AngularJS: Autosize Columns & Rows Flex Grid on table initialization

AngularJS: Autosize Columns & Rows Flex Grid on table initialization

Posted by: nan0br3aker on 22 March 2018, 10:41 am EST

• 

  nan0br3aker

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 22 March 2018, 10:41 am EST - Updated 3 October 2022, 3:56 pm EST

  Hello everyone!

  I need to autosize columns width and rows height when my FlexGrid is initialized with data.

  Here is my code from controller:

  
          var grid = new wijmo.grid.FlexGrid('#myFlexGrid', {
              itemsSource: dataTableArray
          });
              
          grid.cells.rows.defaultSize = 70;
  
          grid.formatItem.addHandler(function (s, e) {
              e.cell.style.textAlign = 'center';
              var html = e.cell.textContent;
              e.cell.innerHTML = '<div>' + html + '</div>';
          });
  
  

  HTML part:

  
                  <div id="myFlexGrid">
  
                  </div>
  
  

  1. Where should I add a Handler so I can change my Row & Column sizes.
  2. How can I make text-wrap?
  3. Where can I find list of parameters that participate in grid initilization (like itemsSource: dataTableArray)

  Sorry for such a kidy question, there are a lot of answers to this question, but most of them are made on new Angular, some of them use in HTML grid initilization, that’s why it is so hard to get in to the flow.

  Here is my grid:
  
  

  

  1144×403 40.2 KB

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 23 March 2018, 3:53 am EST

  1). You can use autoSizeRows()?autoSizeColumns() method to autosize rows according to the content in cell.

  ->If you initialize your grid by angular template binding then it is recommended to do any post initialization work such as resizing rows in event handler for initialized event.

  ->If you initialize grid the js way then you simply autosize the rows after creating grid instance.

  ->Or you can also handle the loadedRows event in case grid’s itemSource is changed after grid is initialized.

  2). You can set grid column’s wordWrap property to true for enabling word wrap.

  Please refer to the following fiddle demo:- http://jsfiddle.net/n79z9p05/

  3). You can refer to wijmo flexgrid’s documentation page that lists all the properties,methods and events available.
  
  http://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.grid.FlexGrid.Class.html

  Also you can check out following sample to start with flexgrid:- http://demos.wijmo.com/5/SampleExplorer/SampleExplorer/Sample/flexgridintro