Possible to hide a SlickGrid column WITHOUT removing it from the “columns” array?

Question

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 performed on the Row (Selection, Sorting, ect).

After being sorted for example, I need to grab the Rows match them up to the previous styles that they had before, and I can do this with the ID column. I need the data in the row, I just don't want it to be displayed.

Thanks.

Answer 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.

Answer 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:

var columns = [
    { 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.

Answer 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>"
            }
         ]

Answer 4

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

var org_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}
);
var data_view = new Slick.Data.DataView();
grid = new Slick.Grid("#grid", data_view, hid_columns, grid_options);
var columnPicker= new Slick.Controls.ColumnPicker(org_columns, grid,grid_options);

Answer 5

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

Answer 6

I realize this is an old question but the correct way to do this is by using a dataProvider and utilizing getItemMetaData to provide information you don't necessarily want displayed.

When you select your row you can call grid.getItemMetaData(cell.row) to get the extra information you need. getItemMetaData is expected to return a jsonObject describing both row and cell level metaData.

Here's the docs that describe it.

https://github.com/mleibman/SlickGrid/wiki/Providing-data-to-the-grid

Answer 7

After looking for some answers about this questions I've found a workaround that quite does the trick of hiding the column and still save the data.

My initial problem was that I needed to hide the ID column of the grid, so basically I hid the ID column by creating the only with the name attribute without specifying anything else and the column was then created I was expecting.