Align data inside cell based on the columns' dataType in FlexGrid

Align data inside cell based on the columns' dataType in FlexGrid

Posted by: sskss1ss2 on 19 July 2023, 8:01 pm EST

• 

  sskss1ss2

  • Post Options:
  • Link
    Copy

  Posted 19 July 2023, 8:01 pm EST

  Hi,
  
  Iam using wijmo FlexGrid to render a table data. Based on the datatype of the column header i want to align the data inside each each cell. ForEg: if its a boolean then center aligned or if its a number than left aligned.
  
  Currently Iam using the ItemFormatter to align each and every cell. But this is very expensive. Can it be done in a different way other than using itemFormatter?

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 21 July 2023, 2:14 am EST

  Hi,

  You may use align property of Column class to set alignment of the columns. To know the dataType of the column, use the dataType property of Column class.

  Please refer to this sample for reference: https://stackblitz.com/edit/js-nnafkg

  Please refer to the following API references for more information on align and dataType property of Column class:

  1. align: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.column.html#align

  2. dataType: https://www.grapecity.com/wijmo/api/classes/wijmo_grid.column.html#datatype

  Regards

• 

  sskss1ss2

  • Post Options:
  • Link
    Copy

  Posted 23 July 2023, 2:11 pm EST

  But the above implementation i’ve done it already making use of itemFormatter builtin function. Iam trying to avoid the usage of itemFormatter. Can we do it without using it?

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 23 July 2023, 3:57 pm EST

  Hi,

  You may do the same without using the itemFormatter. Use the loadedRows event of FlexGrid to assign the alignment for the desired column. Please refer to the following code snippet:

  
  let alignment = {
    Number: 'left',
    Boolean: 'center',
    String: 'right',
  };
  
  let grid = new FlexGrid('#gridHost', {
    loadedRows: (sender, args) => {
      let columns = sender.columns;
      for (let index = 0; index < columns.length; index++) {
        // Set the align property of the column as per dataType.
        columns[index].align = alignment[DataType[columns[index].dataType]];
      }
    },
    itemsSource: getData(12),
  });
  

  You can also refer to this sample for reference: https://stackblitz.com/edit/js-op7kmf

  Regards

• 

  sskss1ss2

  • Post Options:
  • Link
    Copy

  Posted 23 July 2023, 4:51 pm EST

  Hi,

  I tried doing the above, the dataType is coming as null even when i have the column information.

  Thanks,

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 23 July 2023, 10:04 pm EST

  Hi,

  As, we are not able to replicate the behavior on our end so please share a small working sample replicating the issue. This will help us to assist you better as per your use case.

  You can even modify this sample to replicate the issue: https://stackblitz.com/edit/js-prnjyw

  Regards