how to add hidden column in slickgrid

Question

Is it possible to have a hidden column in slickgrid? By hidden column I mean I want to save some data for each row, but I don't want this data to be shown on the grid.

where do I put this? I don't think it's a good way to do it. — sivann, Jun 24 '12 at 20:57

score 17 · Accepted Answer · answered Jun 25 '12 at 13:12

There is no implied relationship between the data and the columns in the grid - the two exist completely independent of each other. So your data can contain many more fields than are actually bound to grid columns.

Example:

var grid;
var columns = [
  {id: "title", name: "Title", field: "title"},
  {id: "duration", name: "Duration", field: "duration"},
  {id: "%", name: "% Complete", field: "percentComplete"},
  {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
];

var options = {
  enableCellNavigation: true,
  enableColumnReorder: false
};

$(function () {
  var data = [];
  for (var i = 0; i < 500; i++) {
    data[i] = {
      title: "Task " + i,
      duration: "5 days",
      percentComplete: Math.round(Math.random() * 100),
      start: "01/01/2009",
      finish: "01/05/2009",
      effortDriven: (i % 5 == 0)
    };
  }

  grid = new Slick.Grid("#myGrid", data, columns, options);
})

Here my dataarray contains fields start and finish but I have chosen to exclude them when creating my columns array.

excellent! I supposed this would break slickgrid. Thanks njr. — sivann, Jun 25 '12 at 19:58
This is correct. However in my situation there are 8 columns in total, 4 of them are displayed in the grid. When using a composite editor, how can I define a column editor if column is not declared? A 'visible' column property would be realy nice. — user1517081, Aug 27 '13 at 17:31
There are samples of compound and composite editor at http://mleibman.github.io/SlickGrid/examples/ — Ben McIntyre, Nov 03 '15 at 08:24

score 3 · Answer 2 · answered Jun 25 '12 at 04:21

I think you can achieve this by using grid.setColumns - lets say you had columns={id, a, b, c} set while declaring the grid; after the grid is initialized, you can call the grid.setColumns(newColumns) - where newColumns is the new column array which excludes id - newColumns={a, b, c}.

This column is still accessible and all data associated with it should be available as well.

Hope this helps!

score 1 · Answer 3 · answered Nov 02 '19 at 00:23

in angular-slickgrid version, you can do the following 1. In column definition, include all column's 2. in Present , re-add the column id's you would like to see in the grid. now load the page and view the column selector menu. you will be delighted to see all columns. some unchecked

e.g.

    this.columnDefinitions = [
    { id: 'name', name: 'Name', field: 'name', filterable: true, sortable: true },
    { id: 'duration', name: 'Duration', field: 'duration', filterable: true,sortable: true },
    { id: 'complete', name: '% Complete', field: 'percentComplete', filterable:true,sortable: true }
    ];



this.gridOptions = {
      presets: {
        // the column position in the array is very important and represent
        // the position that will show in the grid
        columns: [
          { columnId: 'duration', width: 88, headerCssClass: 'customHeaderClass' },
          { columnId: 'complete' }
        ]
// name will be present in the menu but not on the grid

how to add hidden column in slickgrid

3 Answers3