Persist column selection in cookie

2 posts, 1 answers
  1. Masoud
    Masoud avatar
    61 posts
    Member since:
    Aug 2011

    Posted 21 May 2013 Link to this post


    this issue is a followup on this thread!

    I am trying to extend the example to persist column state in a cookie. Users can hide/show/resize columns. I thought I could use the same method described in the thread above. Here is my code:

    // Add handlers to show and hide events
        .Events(events => events.ColumnHide("onColumnHideIOrShow"))
        .Events(events => events.ColumnShow("onColumnHideIOrShow"))


    // Function is called when a column is hidden or Shown
    function onColumnHideIOrShow(e) {
        var columnlistCookieName = "GridMarColumns";
        var grid = $("#GridMar").data("kendoGrid");
        var columns = grid.columns;
        var serializedColumns = kendo.stringify(columns);
        $.cookie(columnlistCookieName, serializedColumns);


    // On load recreate the column list as  found in the cookie
            $(document).ready(function () {
                var columnlistCookieName = "GridMarColumns";
                var serializedColumns = JSON.parse($.cookie(columnlistCookieName)); 
                var grid = $("#GridMar").data("kendoGrid");
                if (serializedColumns) {
                    grid.columns = serializedColumns;

    When I hide a column from the grid, the column is hidden and I can see that the cookie now has the right information. When I reload the page however, the column is present in the grid, in the columnmenu however, it is no longer there (see image attached). The columns strasse is visible on the gird, but not in the list of columns that I could make visible or invisible.

    Thank you for your suggestions on this issue!

  2. Answer
    Petur Subev
    Petur Subev avatar
    1882 posts

    Posted 22 May 2013 Link to this post

    Hello Klaus,

    Did you try to pass the columns to the configuration object when the Grid is initializing?

    Since what you are trying to achieve is not supported out-of-the-box and I can suggest you to take a look at the solution created and shared by the other users using Kendo. I guess it might be of help!

    Petur Subev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top