15

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.

Kevin
  • 541
  • 3
  • 6
  • 17

8 Answers8

13

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.

Tin
  • 9,082
  • 2
  • 34
  • 32
  • 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). – Kevin Jun 16 '11 at 17:17
  • 7
    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. – Tin Jun 16 '11 at 19:21
  • 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? – Kevin Jun 16 '11 at 20:58
  • I am confused by this question. Can you include a complete code sample? – Tin Jun 16 '11 at 21:23
  • http://stackoverflow.com/questions/6379081/restyling-dynamically-styled-slickgrid-cells-after-sort – Kevin Jun 16 '11 at 21:53
  • 2
    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) – Rosdi Kasim May 14 '13 at 08:34
  • 1
    So the simple answer is to omit the column definition. – styfle Nov 22 '13 at 01:57
7

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.

user2837841
  • 71
  • 1
  • 3
  • 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? – jarederaj Mar 21 '14 at 21:19
  • 1
    Resizing the column will make header and cell value miss aligned a little bit. – bunjeeb Sep 07 '14 at 09:11
  • 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; }`. – phyatt Jan 09 '18 at 20:10
1

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.

Stefan Jelner
  • 111
  • 1
  • 4
1

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>"
            }
         ]
Simon Landeholm
  • 319
  • 2
  • 12
0

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);
HeiN
  • 503
  • 3
  • 17
0

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

clarifier
  • 119
  • 1
  • 13
0

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

Damian
  • 528
  • 5
  • 9
0

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.

R3muSGFX
  • 63
  • 4
  • 12