We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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();
}



1 Reply

RS Rajapandiyan Settu Syncfusion Team November 23, 2022 10:21 PM

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


Loader.
Live Chat Icon For mobile
Up arrow icon