Send expanded TreeGrid Nodes in cookie

Question

In continue of this topic I want to save expanded nodes in cookie. Is it the best way?

I'm not sure in way of JSON data checking.

Why expandRow doesn't work?

var gridId = "#table";
var grid = $(gridId);
grid.jqGrid({

...

loadComplete: function() {
var ids = grid.jqGrid('getDataIDs');

var cookie = $.cookie(gridId + '_expanded');
var expanded = false;

if (typeof(cookie) == 'string')
var expanded = JSON.parse(cookie);

for (var i=0;i<ids.length;i++) {
var id=ids[i];
var row_data = $(this).jqGrid('getRowData', id);

if (expanded && id in expanded && expanded[id] == 'true')
$(gridId + ' tr#' + id + ' div.treeclick').trigger("click");
//Why it doesn't work?
//grid.jqGrid('expandRow', row_data);

}
}

...

});

function setCookie() {
            var ids = grid.jqGrid('getDataIDs');

            var expanded = Object();
            var string = '';

            for (var i=0;i<ids.length;i++) {    
                var id=ids[i];
                var rowData = grid.jqGrid('getRowData', id);                

                if (rowData.parent != '' && grid.jqGrid('isVisibleNode', rowData) === true)
                    expanded[rowData.parent] = true
            }

            for (e in expanded) 
                string += '"' + e + '":' + '"' + expanded[e] + '",';

            $.cookie(gridId + '_expanded', '{'+ string.substring(0, string.length - 1) + '}', { expires: 365 });    
}

var orgExpandNode = $.fn.jqGrid.expandNode, orgCollapseNode = $.fn.jqGrid.collapseNode;

        $.jgrid.extend({
            expandNode : function(rc) {
                orgExpandNode.call(this, rc);
                setCookie();            
            },
            collapseNode : function(rc) {
                orgCollapseNode.call(this, rc);
                setCookie();                        
            },
});

P.S. I allways get this stupid alert :)

Your post does not have much context to explain the code sections; please explain your scenario more clearly.

Do you load the Tree Grid at once of use Ajax to load the children from the server on every expending of the tree node? I will try to examine the problem later. Before all I would recommend you to read [the answer](http://stackoverflow.com/a/8436273/315935) and [this one](http://stackoverflow.com/a/8547852/315935) where I use `localStorage` instead of cookies. Probably it's better way in your case too. — Oleg, Feb 08 '12 at 12:19
All data(about parents and children) came via Ajax once during building of grid — dr0zd, Feb 08 '12 at 12:49
My question was whether all the data are loaded via *one* Ajax request of will be loaded on demand during expanding of the tree node. — Oleg, Feb 08 '12 at 12:59

score 5 · Accepted Answer · edited May 23 '17 at 12:09

I recommend you to use localStorage instead of cookies. I describe the reason in the answer. I made the demo base on the demos from the answer and another one. For the demo I used the test data from one more my recent answer.

Try to expand in the demo some tree nodes and reload the grid with F5. You will see that all expanded rows stay expanded after the reloading.

The code of the demo you will find below:

var $grid = $('#treegridCompanies'),
    saveObjectInLocalStorage = function (storageItemName, object) {
        if (typeof window.localStorage !== 'undefined') {
            window.localStorage.setItem(storageItemName, JSON.stringify(object));
        }
    },
    removeObjectFromLocalStorage = function (storageItemName) {
        if (typeof window.localStorage !== 'undefined') {
            window.localStorage.removeItem(storageItemName);
        }
    },
    getObjectFromLocalStorage = function (storageItemName) {
        if (typeof window.localStorage !== 'undefined') {
            return JSON.parse(window.localStorage.getItem(storageItemName));
        }
    },
    myColumnStateName = function (grid) {
        return window.location.pathname + '#' + grid[0].id;
    },
    idsOfExpandedRows = [],
    updateIdsOfExpandedRows = function (id, isExpanded) {
        var index = $.inArray(id, idsOfExpandedRows);
        if (!isExpanded && index >= 0) {
            idsOfExpandedRows.splice(index, 1); // remove id from the list
        } else if (index < 0) {
            idsOfExpandedRows.push(id);
        }
        saveObjectInLocalStorage(myColumnStateName($grid), idsOfExpandedRows);
    },
    orgExpandRow = $.fn.jqGrid.expandRow,
    orgCollapseRow = $.fn.jqGrid.collapseRow;

idsOfExpandedRows = getObjectFromLocalStorage(myColumnStateName($grid)) || [];

$grid.jqGrid({
    url: 'SPATEN-TreeGrid2.json',
    datatype: 'json',
    ajaxGridOptions: { contentType: "application/json" },
    jsonReader: {
        id: "CompanyId",
        cell: "",
        root: function (obj) { return obj.rows; },
        page: function () { return 1; },
        total: function () { return 1; },
        records: function (obj) { return obj.rows.length; },
        repeatitems: true
    },
    beforeProcessing: function (data) {
        var rows = data.rows, i, l = rows.length, row, index;
        for (i = 0; i < l; i++) {
            row = rows[i];
            index = $.inArray(row[0], idsOfExpandedRows);
            row[5] = index >= 0; // set expanded column
            row[6] = true;       // set loaded column
        }
    },
    colNames:  ['CompanyId', 'Company'],
    colModel: [
        { name: 'CompanyId', index: 'CompanyId', width: 1, hidden: true, key: true },
        { name: 'Company', index: 'Company', width: 500 }
    ],
    height: 'auto',
    pager: '#pager',
    rowNum: 10000,
    sortable: false,
    treeGrid: true,
    treeGridModel: 'adjacency',
    ExpandColumn: 'Company'
});
$grid.jqGrid('navGrid', '#pager', {edit: false, add: false, del: false, search: false});
$grid.jqGrid('navButtonAdd', '#pager', {
    caption: "",
    buttonicon: "ui-icon-closethick",
    title: "Clear saved grid's settings",
    onClickButton: function () {
        removeObjectFromLocalStorage(myColumnStateName($(this)));
        window.location.reload();
    }
});
$.jgrid.extend({
    expandRow: function (rc) {
        //alert('before expandNode: rowid="' + rc._id_ + '", name="' + rc.name + '"');
        updateIdsOfExpandedRows(rc._id_, true);
        return orgExpandRow.call(this, rc);
    },
    collapseRow: function (rc) {
        //alert('before collapseNode: rowid="' + rc._id_ + '", name="' + rc.name + '"');
        updateIdsOfExpandedRows(rc._id_, false);
        return orgCollapseRow.call(this, rc);
    }
});

Send expanded TreeGrid Nodes in cookie

1 Answers1

Linked