Possible To Hide A Slickgrid Column Without Removing It From The "columns" Array?

I'd like to hide a column (its an ID column that is unique for each row), but I cannot remove it from the 'columns' array because I need that data in the Row when actions are perfo

Solution 1:

The answer is NO, but that is not the answer you are looking for :)

Other than what columns are looking at to grab their data, there is no hard link between them and what your data items look like. You don't have to have a column visible to have an ID on your data item.

Solution 2:

In case anyone is still looking for this, I've found a way... it's not massively elegant but it does work. As Simon, suggested, add the Id column as the last in the grid. Set both the cssClass and headerCssClass to be "display:none !important" and set the width, minWidth and maxWidth column options to 0 as follows:

varcolumns= [
    { id:"MyColumnId", name:"My Column", field:"MyColumnData", width:100},
    { id:"Id", name:"Id", field:"Id", width:0, minWidth:0, maxWidth:0, cssClass:"reallyHidden", headerCssClass:"reallyHidden" }
];

and the css is:

.reallyHidden { display: none !important;}

Hope that helps.

Solution 3:

It is not possible BUT as a workaround you can set the width/maxWidth to 1, set the name to an empty string and place the column at the far right of all other columns. Like so (example is in coffeescript, if you feel uncertain about the syntax use http://js2coffee.org/):

columns = [

          ... some columns ...

            {
               id:"hidden"
               name:""
               field:"id"
               sortable:"true"
               width: 1
               maxWidth: 1
               minWidth: 1
               unselectable: true
               formatter: (row,cell,val,columnDef,dataContext) ->
                  "<div style='display: none;'>#{val}</div>"
            }
         ]

Solution 4:

For this kind of problem, I've used two arrays. One for showing and the other one for columnPicker. Here is how,

varorg_columns= [],hid_columns= [];org_columns.push(cb_selector.getColumnDefinition(),
{id:"id", name:"ID", field:"id", sortable:true, width:56},
{id:"name", name:"Name", field:"name", editor:Slick.Editors.Text, sortable:true, width:234},
{id:"email", name:"Email", field:"email", editor:Slick.Editors.Text, sortable:true, width:234}
);hid_columns.push(cb_selector.getColumnDefinition(),
{id:"name", name:"Name", field:"name", editor:Slick.Editors.Text, sortable:true, width:234},
{id:"email", name:"Email", field:"email", editor:Slick.Editors.Text, sortable:true, width:234}
);vardata_view=newSlick.Data.DataView();grid=newSlick.Grid("#grid",data_view,hid_columns,grid_options);varcolumnPicker=newSlick.Controls.ColumnPicker(org_columns,grid,grid_options);

Solution 5:

in coloumns.push({id:id,name:name,Hidden:true}) //hidden ensures that the column is removed while binding grid