how to add hidden column in slickgrid

slickgrid column options
slickgrid remove column
slickgrid column show hide

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.

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.


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.

Hide Column! � Issue #146 � mleibman/SlickGrid � GitHub, Hello! I want to hide the column. But I can't know how to do this. Help me!. Thanks in advice. We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand

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!

SlickGrid Column picker, Using Header Column picker user check or uncheck the 'Last Communication' column i have to call one function how to do it? Adding some formatting; Handling events; Highlighting and flashing cells; Making it editable; Writing compound editors; Implementing Undo; Using a CompositeEditor to implement detached item edit form (most comprehensive) Using a filtered data view to drive the grid; Adding tree functionality (expand/collapse) to the grid; AJAX-loading data with

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


    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

view.slickgrid.js, We need all columns, even the hidden ones, to show on the column picker. var columns = []; when adding row from slickgrid the field value is undefined. if(!_. idbehold, I'm pretty sure he wants to group the rows based on the values of multiple columns. The example he links to is of grouping the rows based on the values in one column, and AFAIK slickgrid doesn't have anything like "column grouping". Columns order is defined when defining the grid itself. – mmitchell Feb 25 '13 at 20:07

i want to hide few columns in slickgrid on button click and show all , is it possible to show and hide some Slickgrid Columns on button click and set The grid shows the data (which is in the object) but if I change the data or add� SlickGrid is a fully open-source, javascript, client-side grid control, based on jQuery and jQueryUI and compatible with Bootstrap. The grid is designed to take an external component as a datasource, and that means SlickGrid should be compatible with a wide range of modern data-centric frameworks. Check out a Sample. Key Links

SlickGrid Examples, Basic use with minimal configuration � Adding some formatting � Handling Using dataItemColumnValueExtractor option to specify a custom column value� Hiding a column doesn’t delete any data from your project; it only removes the column from your view until you need it again. Unlike Excel, Project doesn't have an Unhide command—to unhide a column, you just need to insert it again. Here's how you hide a column: Display a sheet view, like the Gantt Chart.

How can I make the entire column (with header) invisible in slick grid , Google Groups allows you to create and participate in online forums and email- based groups with a rich experience for community� The key difference is between SlickGrid and other grid implementation I have seen is that they focus too much on being able to understand and work with data (search, sort, parse, ajax load, etc.) and not enough on being a better “grid” (or, in case of editable grids, a spreadsheet).