CODEWITHSUNDEEP
javascriptslickgrid
user721588
user721588

Reputation:

how to save a SlickGrid column order (js)?

I have two grids in my application.

var columns1 = [
    {
        name: "Address",
        field: "address"
        id: "address",
        sortable: true
    }
]

var columns2 = [
    {
    {
        name: "Rating, in %",
        field: "rating"
        id: "rating_percent",
        resizable: false
    }
]

They are absolutely independent from each other. Also, I have some grid events descriptions in another js file.

    grid.onColumnsReordered.subscribe(function (e, args) {
        _this.updateHeaderRow();
            // here
    });

When user changes the columns order, then I want to save this order. Should I change (overwrite) the DOM elements, I mean column1 and column2? So question: how can I save the columns order?

Upvotes: 3

Views: 4179

Answers (2)

Peter H
Peter H

Reputation: 51

njr101's answer (using store.js) is great, but note: store.js cannot store functions (i.e. for editors, formatters), so once you store.get() the columns, you'll need to add the functions back, using your original stock "columns" array:

if (store.get('gridColumns')) {
    grid.setColumns(store.get('gridColumns'));      // Restore settings if available

    grid.getColumns().forEach(function(ch) {    // Re-create editor and formatter functions
        var result = $.grep(columns, function(e){ return e.id == ch.id; });
        if (result[0]) {
            ch.editor = result[0].editor;
            ch.formatter = result[0].formatter;
        }
    });
}

Upvotes: 4

njr101
njr101

Reputation: 9619

I have done this before and the easiest way I found was to store the columns in local storage. I use the store.js library which makes this pretty simple.

grid.onColumnsReordered.subscribe(function (e, args) {        
    store.set('gridColumns', grid.getColumns());
});

When you want to restore the columns (e.g. when the user returns to the page) you can just call:

grid.setColumns(store.get('gridColumns'));

Upvotes: 3

Related Questions