EasyUI Forum

How to create a datagrid whose number of columns is variable?

Hi;

Well the columns will be created based on the columns provided to the datagrid:

This will dynamically create 3 columns:


And this will dynamically create 5 columns:


I recall that there's also a demo on how to change the columns under the demo section.

Cheers

Hi,

I had no time to study this much but in my project I create complete list of columns but make only part of them visible.
And of course to increase dataload performance I do not load data into hidden columns.

Similar idea could be seen in Demo examples.

//Valery

Hi lusabo

I agree with mzeddd response. Just hide/unhide columns, but it you want to add/remove column, just reinit the datagrid. I'm sure there are better ways to do this, but you should get the idea from the example;
var menuStruct = [];
var menuItems = [];
var menuItem1 = {
   field: 'field1',
   title: 'Title1',
   width: 100
}
var menuItem2 = {
   field: 'field2',
   title: 'Title2',
   width: 105
}

function insertCol() {
   menuStruct.pop();
   menuItems.push(menuItem2);
   menuStruct.push(menuItems);

   $('#myDatagrid').datagrid({
      columns: menuStruct
   });
}

$(function () {
   menuItems.push(menuItem1);
   menuStruct.push(menuItems);

   $('#myDatagrid').datagrid({
      columns: menuStruct,
      fit: false,
      width: 370,
      nowrap: false,
      striped: true,
      collapsible: true,
      url: url
   });
}

To delete a column means you need to remove the menu object from the menuItems array and reinit the datagrid.