How to change grid column definitions after rendering when enableColumnVirtualization is true?

[Igor Podboj]

We run CreateGrid() and after that ChangeGridColumns() in same window.

When enableColumnVirtualization is false columns change from 1 column to 3 columns as expected.
When enableColumnVirtualization is true columns do not change at all.

function CreateGrid()

{
  var grid_instance = new ej.grids.Grid({
      enableAdaptiveUI: false,
      dataSource: [
        {
          'id': 1,
          'code': 'ac',
          'descr': 'acustic'
        },
        {
          'id': 2,
          'code': 'ba',
          'descr': 'basic'
        },
        {
          'id': 3,
          'code': 'ce',
          'descr': 'centric'
        }
      ],
      enableVirtualization: true,
      enableColumnVirtualization: true,
      showColumnMenu: true,
      editSettings: {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        mode: 'Normal',
        newRowPosition:'Top'
      },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
      pageSettings: {pageSize: 50},
      columns: [
        { field: 'id', headerText: 'ID', width: 100, isPrimaryKey: true, validationRules: { required: true }, autoFit: false }
      ],
      allowSorting: true,
      allowPaging: true,
      allowFiltering: true,
      allowGrouping: true
    });
  grid_instance.appendTo('#MyGrid');
}


function ChangeGridColumns()
{
  grid = window.document.getElementById('MyGrid');
  grid_instance = grid.ej2_instances[0];
  grid_instance.columns = [
        { field: 'id', headerText: 'ID', width: 100, isPrimaryKey: true, validationRules: { required: true }, autoFit: false },
        { field: 'code', headerText: 'Code', width: 200, isPrimaryKey: false, validationRules: { required: false }, autoFit: false },
        { field: 'descr', headerText: 'Descr', width: 300, isPrimaryKey: false, validationRules: { required: false }, autoFit: false }
    ];
  grid_instance.refreshColumns();
}

[Rajapandiyan Settu]

Hi Igor,

Thanks for contacting Syncfusion support.

While the grid is rendering, we are not supposed to change the properties or refresh the Grid. So, we suggest you to change the columns in the load event or once the grid is rendered.

Load: https://ej2.syncfusion.com/javascript/documentation/api/grid/#load

    load: function (args) {

      var columns = [

        {

          field: 'id',

          headerText: 'ID',

          width: 100,

          isPrimaryKey: true,

          validationRules: { required: true },

          autoFit: false,

        },

        ----

      ];

      this.columns = columns; // change the columns

    }

 

 

// change the grid columns through button click

 

function ChangeGridColumns() {

  grid = window.document.getElementById('MyGrid');

  grid_instance = grid.ej2_instances[0];

  var columns = [

    {

      field: 'id',

      headerText: 'ID',

      width: 100,

      isPrimaryKey: true,

      validationRules: { required: true },

      autoFit: false,

    },

    ----

  ];

  grid_instance.columns = columns;

}

 

Sample: https://stackblitz.com/edit/s1pbdx?file=index.js

Note: If you have fewer data and less number of columns, don’t use the virtualization and column virtualization features. It is used only for large datasets and columns.

Regards,

Rajapandiyan S

[Igor Podboj]

The original problem we are having is with date time JSON data as we do not know column types when defining the grid.

On "load" event triggers before data is linked to grid.currentViewData so it is not usefull in this sense. DataManager .Adaptor already autodetects data types based on JSON format so it is possible to change column types based of data we recieve. Columns can be changed at any time after render but that triggers additional/unwanted data fetch and refresh.

What options do we have to adjust columns before render and after data fetch (without triggering additional grid.refresh)?

We can implement column type auto detect based on data. It would be helpful however that grid has this functionality as well.

Kind Regards

[Rajapandiyan Settu]

Hi Igor , 

  

By default, the column type is set based on the first cell value’s type in the dataSource. If the first cell value is null, then the column type set as null and the Grid actions on this column do not work as expected. This is the behavior of EJ2 Grid column.  

  

In that case, we have to manually set the column type. 

Column type: https://ej2.syncfusion.com/documentation/grid/columns/columns/#column-types

We suggest you to use the below code to update the columns in Column Virtualization Grid.

 

  grid_instance.columns = [];

  grid_instance.columns = columns;

  grid_instance.refresh();

 

Sample: https://stackblitz.com/edit/s1pbdx-deppbk?file=index.js

Regards, 

Rajapandiyan S 

[Igor Podboj]

Question: How do we render grid with new column definitions without triggering data fetch on dataBound event?

The example you provided uses local data and does not represent the problem because the data(source) is avaliable at initialization.

We are using UrlAdaptor as datasource and column definitions need to be changed after first data is avaliable on dataBound event. Example of how we change the column definitions:

            this.columns = null;
            this.columns = new_columns;
            this.updateColumnObject();

Problem: Grid refresh triggers additional data fetch from UrlAdaptor. Grid detects column changes and triggers full refresh but that is not required in this case because the data is already loaded.

Note: Column changes are made by analyzing data recieved on second triggering of dataBound event since the first triggering is at grid initialization and contains default data.

[Rajapandiyan Settu]

Hi Igor,

When we change the Grid settings, we need to reinitialize the component to affect all the changes. To reinitialize the component, we need to refresh it. Whenever the Grid gets refreshed, it will send the request to the server. Since this is the behavior of Grid component. We cannot refresh the Grid without sending a request to the server.

Regards,

Rajapandiyan S