AngularJS: Autosizing row headers and top left cells

AngularJS: Autosizing row headers and top left cells

Posted by: nan0br3aker on 23 March 2018, 9:18 am EST

• 

  nan0br3aker

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 23 March 2018, 9:18 am EST - Updated 3 October 2022, 8:32 pm EST

  Hello everyone!

  I got the following problem, I can’t autosize row headers and top left cells which also contain some header data.

  My questions:

  1. How can I autosize row headers? (or better is there any method that can autosize the whole grid including row headers & column headers)
  2. How can I add text wrapping to the whole table (including row headers & column headers)?
  3. How can I autosize the whole table so there won’t be spaces on the right side as you can see on the first screenshot.

  Here is how my grid looks right now:
  
  

  

  1146×671 36.9 KB

  That is how I want it to be:
  
  

  

  1145×668 39.4 KB

  Here is my code which is responsible for grid initilization and data filling:

  
          //Initializing my FlexGrid
          var grid = new wijmo.grid.FlexGrid('#myFlexGrid', {
              //itemsSource: dataTableCollectionView
          });
  
          // create rows and columns
          while (grid.columns.length < numberOfCols - coordinates.col + 1) {
              grid.columns.push(new wijmo.grid.Column());
          }
          while (grid.rows.length < numberOfRows - 1) {
              grid.rows.push(new wijmo.grid.Row());
          }
  
          //Adding additional columns in row headers
          if(coordinates.col - 1 > 1){
              for(var i = 0; i < coordinates.col - 2; i++){
                  grid.rowHeaders.columns.push(new wijmo.grid.Column());
              }
          }
  
          //ADDING DATA FROM ARRAY TO FLEX GRID
          for(var i = 0; i < coordinates.row - 1; i++){
              for(var j = 0; j < numberOfCols - coordinates.col + 1; j++){
                  grid.columnHeaders.setCellData(0, j, columnHeadersArray[i][j]);
              }
          }
  
          for(var i = 0; i < numberOfRows - coordinates.row + 1; i++){
              for(var j = 0; j < coordinates.col - 1; j++){
                  grid.cells.grid.rowHeaders.setCellData(i, j, rowHeadersArray[i][j]);
              }
          }
  
          for(var i = 0; i < coordinates.row - 1; i++){
              for(var j = 0; j < coordinates.col - 1; j++){
                  grid.topLeftCells.setCellData(i, j, topLeftColumnHeadersArray[i][j]);
              }
          }
  
          for(var i = 0; i < numberOfRows - coordinates.row + 1; i++){
              for(var j = 0; j < numberOfCols - coordinates.col + 1; j++){
                  grid.cells.setCellData(i, j, itemSourceArray[i][j]);
              }
          }
  
  

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 26 March 2018, 7:04 am EST

  Hi,

  1). You can resize headers with autoSizeRows() or autoSizeColumns() method by passing optional third parameter to true which indicates that the resize should be applied to headers.

  Well,currently there isn’t a method that resizes the whole grid. But you can use autoSizeRows() to get the same result

  //resize data rows

  grid.autoSizeRows(0,grid.rows.length);
  

  //resize header rows

  grid.autoSizeRows(0,grid.rows.length,true);
  

  Refer to following document for more info about autoSizeRows():- http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.FlexGrid.Class.html#autoSizeRows

  2).You can set wordWrap properrty to true to enable word wrap for any row or column.

  When we apply word wrap to a column then it implicitly gets applied to its header as well…

  So to applying wordwrap to whole table you can do achieve something like:

  
  grid.column.forEach(col=>col.wordWrap=true);
  
  grid.rowHeaders.column.forEach(col=>col.wordWrap=true);
  
  

  3).You can use star sizing method to autosize the grid to fill the entitre content horizontally.

  Refer to following code snippet

  
  grid.columns[0].width="*";
  
  

  //Now the column at 0th index will resize itself to fill all the remaining space

  For more info about width property you can refer to this document :-

  http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.Column.Class.html#width