Persist grid state on filter or sort action

[guillaume.lebel]

Good Day,

I am actually looking to find a way to save only filter, sort and current paging options when a user interract with the grid. I have seen this demo https://demos.telerik.com/aspnet-core/grid/persist-state, but I would like it to be automatically instead of having external button to do the action.

I have tried also binding on the databound event using a flag like so, but it only works the first time. My function is a little bit generic, because I would like to automatically do it for every grid in the application without having to configure anything.

    let stateChanged = false;
    $('.k-grid').data('kendoGrid').bind('filter', function (e) {
        stateChanged = true;
    });

    $('.k-grid').data('kendoGrid').bind('sort', function (e) {
        stateChanged = true;
    });

    $('.k-grid').data('kendoGrid').bind('dataBound', function (e) {
        if (stateChanged) {
            const grid = e.sender;
            const storageKey = generateStorageKey(grid);
            const options = grid.getOptions();
            saveGridState(options, storageKey);
            stateChanged = false;
        }
    });

Is there any other way to actually  save the state of the grid immediately after the user interract with the grid?

Thank you :)

[guillaume.lebel]

One thing I forgot to mention is that the first time the page load when there's nothing in the local storage, everything works out. But when I reload the page it's like the databound event isn't triggered anymore. I am probably doing something wrong here. Just trying to have it available for every possible list at the same time.

[guillaume.lebel]

Finally found my mistake. I updated my code like this. Changed the order to when databound event was applied to the list :).

    let stateChanged = false;
    $('.k-grid').data('kendoGrid').bind('filter', function (e) {
        stateChanged = true;
    });

    $('.k-grid').data('kendoGrid').bind('sort', function (e) {
        stateChanged = true;
    });

    $('.k-grid').each(function() {
        const grid = $(this).data('kendoGrid');
        const storageKey = generateStorageKey(grid);
        loadGridState(grid, storageKey);

        grid.bind('dataBound', function (e) {
            if (stateChanged) {
                const grid = e.sender;
                const storageKey = generateStorageKey(grid);
                const options = grid.getOptions();
                console.log(e);
                saveGridState(options, storageKey);
                stateChanged = false;
            }
        });
    });

[Mihaela]

Hi Guillaume,

Thank you for the provided code snippet.

To persist the current grid settings automatically when the user navigates away from the page I would recommend the following approach:

• Bind an event handler to the "unload" event of the "window" object and store the grid options via the method "getOptions".
• Load the stored options through the "setOptions" method in the $(document).ready() function after the initialization of the grid.

<script>
  $( document ).ready(function() {
            var grid = $(".k-grid").data("kendoGrid");
            var options = localStorage["kendo-grid-options"];

            if (options) {
                grid.setOptions(JSON.parse(options)); // Load the stored Grid options after its initialization
            }

            $(window).on("unload", function (e) { //The "unload" event is sent to the window element when the user navigates away from the page
                e.preventDefault();
                localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions()); // Get and store the Grid settings when navigating away from the page
            });
  });
</script>

If you have any additional questions, don't hesitate to let me know.

 

Regards, Mihaela Progress Telerik

[guillaume.lebel]

Hi, I'm having another strange issue related to this. Seems the command column is not working after saving the state and reloading the page. I have added an additional column at the end where user can click to see page details of that element. On first load and when doing filtering and sorting if I don't leave the page it's working fine.

As soon as I leave the page and come back, if there was anything in the local storage, that command column is not working anymore. I have to manually remove the element from the dev toolbar.

I suppose i'm doing something wrong when saving the state.

My command column look like that 

column.Command(c => c.Custom("ViewMembers").Text(" ").IconClass("fas fa-edit").Click("navigateToEdit")).Width(75);

and my function is in a script tag at the end of the page

        function navigateToEdit(e) {
            e.preventDefault();
            const dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            redirectToMemberDetails(dataItem);}

Thank you for you help,

Guillaume

[Mihaela]

Hi Guillaume,

Thank you for the provided code snippets.

The described behavior is expected because the JSON.stringify() method cannot serialize function references. When the grid's options are retrieved through the "getOptions" method and then are stringified, the function reference of the custom command button is lost. 

To persist the function reference, you could add it manually before passing the options to the "setOptions" method:

$(document).ready(function () {
  var grid = $(".k-grid").data("kendoGrid");
  var options = localStorage["kendo-grid-options"];
  if (options) {
    var parsedOptions = JSON.parse(options);
    parsedOptions.columns[5].command[0].click = navigateToEdit // Add the function reference to the specified column index (i.e. column 6)
    grid.setOptions(parsedOptions); 
  }
});

Also, here is a KB article for your reference:

https://docs.telerik.com/kendo-ui/knowledge-base/persist-state-and-function-references

Would you please give this approach a try and let me know if the custom command is persisted properly at your end?

 

Regards, Mihaela Progress Telerik