CODEWITHSUNDEEP
jqueryslickgrid
sivann
sivann

Reputation: 2141

how to add hidden column in slickgrid

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.

Upvotes: 7

Views: 13419

Answers (3)

Anish Kutti
Anish Kutti

Reputation: 354

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

Upvotes: 1

njr101
njr101

Reputation: 9629

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.

Upvotes: 17

ganeshk
ganeshk

Reputation: 5631

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!

Upvotes: 3

Related Questions