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.

Sketchbook

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.

Oxtail

Sorry, I don't completely understand what you are saying. How can I possibly get the ID from the Row's data, if that column is "hidden" (a.k.a. not in the Row). – Sketchbook

You bind the grid to the data array: var data = [{id: 0, title: 'item1'}, {id: 1, title: 'item3'}, ...]; If you choose not to display the column for ID, the data is still there on the data item. – Oxtail

I tried what you said, and I'm storing my additional info in data[] which is great, but I'm still confused as to how to match that data to the appropriate Row after an event (say, Sorting) has taken place. Is it possible to match a Row up with its data[] entry? – Sketchbook

I am confused by this question. Can you include a complete code sample? – Oxtail

#6379581 – Sketchbook

For those wondering how to translate the row on the grid to the proper row in data, here it is: alert(data[args.row].id) (assuming you have id in your data) – Satiny

So the simple answer is to omit the column definition. – Fitzpatrick

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.

Colicweed

This is absolutely correct. I noticed that I didn't need the CSS, but I'm also using gird.autosizeColumns() after grid.render(). Maybe that has something to do with it? – Marked

Resizing the column will make header and cell value miss aligned a little bit. – Plumbic

To fix the resizing issue, go to applyColumnWidths in slick.grid.js and add in the following if(columns[i].minWidth == 0 && columns[i].maxWidth == 0 ) { columns[i].width = 0; }. – Randirandie

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

Tarahtaran

Answer 4

I had the same problem today, and i am working with pure array data. if you add your values at the end of the data array, but do not define them in the columns-array, the data is present and you can use it in your events, but it is not shown.

example:

new Slick.Grid({
    document.getElementById('grid')
    , [
        [1, 2, 3, 1]
        , [1, 2, 3, 2]
        , [1, 2, 3, 3]
        , [1, 2, 3, 4]
        , [1, 2, 3, 5]
    ]
    , headers: [
        {
            field: '0'
            , id: 'foo'
            , name: 'foo'
        }
        , {
            field: '1'
            , id: 'bar'
            , name: 'bar'
        }
        , {
            field: '0'
            , id: 'baz'
            , name: 'baz'
        }
    ]
    , {}
);

As you can see in the code, i provided a 4th value to the grid with no column-definition.

Alcus

Answer 5

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);

Conjunction

Answer 6

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

Obala

Answer 7

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

Capello

There are options in metadata, but how to hide the column this way? – Adlei

Answer 8

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.

Sidelight

This way I got a blank column, but still visible. – Adlei

@Adlei try to make the column width at a minimum width of 0. – Sidelight