Grid Options persist and load - managing column changes between application versions

4 posts, 0 answers
  1. Nick
    Nick avatar
    1 posts
    Member since:
    Sep 2016

    Posted 08 Aug 2017 Link to this post

    Hi Guys,

    A quick one: I understand the concept of grabbing the grid state via "grid.getOptions", then persisting this, and then applying it again via "grid.setOptions" on form refresh to keep the users' sort/filter/column options, etc between sessions. There are posts and help for this already.

     

    My question is this:

    • In our situation, we do the above persistence, and store the options string somewhere (e.g. database).
    • However, we may well change the set of columns that the grid needs to display when we do an application version update. It's likely that we would remove, or add columns for example.
    • So, if we have try to apply an options set to the grid that has some columns missing or added since the "save" of the options... what happens?

    Does it:

    • Robustly (silently ignore) options we are trying to apply for columns that no longer exist in the grid?
    • Robustly (apply a default) for columns that do not have any options being applied? (e.g. newly added columns).
    • Throw errors, but still render?
    • Fail to render with errors?
    • Something else?

    cheers

    Nick

     

     

     

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2497 posts

    Posted 10 Aug 2017 Link to this post

    Hi Nick,

    When the state is persisted via getOptions the column settings would also be persisted. This means that if some columns are persisted they will be added in the Grid after the state is restored.

    You can test by that behavior by saving the state in the example below. Then remove a column from the Grid and restore the state. You will notice that the column is recreated. 


    In order to change the behavior I would recommend getting the options that are saved and removing the data for the columns that should not be present manually.


    Regards,
    Viktor Tachev
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. hunidoc.com developers
    hunidoc.com developers avatar
    2 posts
    Member since:
    Apr 2019

    Posted 28 Jan 2020 Link to this post

    Hi

    This is our problem too. The user save their grid profile into the local storage, after it when he/she open the page we load the profile automatically. We add new columns, because there is always a new user need ... After that he/she not see the new columns to switch on. Is there any js function that regenerate the columns menu ?

    thanks

  4. hunidoc.com developers
    hunidoc.com developers avatar
    2 posts
    Member since:
    Apr 2019

    Posted 28 Jan 2020 Link to this post

    I found the solution. It works for me:

    var Partnerlist =
        {
            LoadClientState: function () {
                var grid = $('#grid').data('kendoGrid');
                var tempColumns = grid.columns;
                var options = localStorage['Last_PartnerGridSettings'];
                if (options && options != "undefined") {
                    var parsedOptions = JSON.parse(options);
                    parsedOptions.toolbar = [
                        {
                            template: $("#toolbarTemplate").html()
                        }
                    ];
                    grid.setOptions(parsedOptions);
                    grid.columns = tempColumns;
                    grid.dataSource.read();              
                    return true;
                }
                return false;
            },
     
            SaveClientState : function () {
                try {
                    var grid = $('#grid').data('kendoGrid');
                    localStorage['Last_PartnerGridSettings'] = kendo.stringify(grid.getOptions());
                } catch (ex) {
                    console.log("profil error : " + ex);
                }
                return true;
            },
     
            DeleteGridSettings: function () {
                 deleteGridSettings('@VirtualPathUtility.ToAbsolute("~/ ")Partner/List', 'grid');     
            }
        };

    var Partnerlist =
        {
            LoadClientState: function () {
                var grid = $('#grid').data('kendoGrid');
                var tempColumns = grid.columns;
                var options = localStorage['Last_PartnerGridSettings'];
                if (options && options != "undefined") {
                    var parsedOptions = JSON.parse(options);
                    parsedOptions.toolbar = [
                        {
                            template: $("#toolbarTemplate").html()
                        }
                    ];
                    grid.setOptions(parsedOptions);
                    grid.columns = tempColumns;
                    grid.dataSource.read();               
                    return true;
                }
                return false;
            },

            SaveClientState : function () {
                try {
                    var grid = $('#grid').data('kendoGrid');
                    localStorage['Last_PartnerGridSettings'] = kendo.stringify(grid.getOptions());
                } catch (ex) {
                    console.log("profil error : " + ex);
                }
                return true;
            },

            DeleteGridSettings: function () {
                 deleteGridSettings('@VirtualPathUtility.ToAbsolute("~/ ")Partner/List', 'grid');      
            }
        };

Back to Top