Grid Setup

[Mario]

Good morning,

i need to save column sorting and other filters within a grid.

The only method i figured out is this:

I save the current grid state to the browser local storage

$(window).on("beforeunload", function () {

               var GType = '@Model.flowCatalogId' + '@Model.flowTypeCatalogId' + '@Model.filterVersion' + '@ViewBag.Lang' + '_grid_filtered';
            var grid = $("#grid_filtered").data("kendoGrid");
               localStorage["QSW-grid-Claim-List" + GType] = utf8_to_b64(kendo.stringify(grid.getOptions()));

         })

Then i reload it every time i enter the page at the end of it's load

$(document).ready(function () {

        $('body').css('pointer-events', 'all') //activate all pointer-events on body
        $('#dialog_pos').data("kendoDialog").close();
        $('#dialog_pos_supp').data("kendoDialog").close();
        $('#dialog_create').data("kendoDialog").close();

        var GType = '@Model.flowCatalogId' + '@Model.flowTypeCatalogId' + '@Model.filterVersion' + '@ViewBag.Lang' + '_grid_filtered';
        var grid = $("#grid_filtered").data("kendoGrid");

        if (localStorage["QSW-grid-Claim-List" + GType]) {
            var options = b64_to_utf8(localStorage["QSW-grid-Claim-List" + GType]);
            grid.setOptions(JSON.parse(options));
        }
        else
        {
            for (i = 0; i < localStorage.length; i++) {
                x = localStorage.key(i);
                if (x.includes("QSW")) { localStorage.removeItem(x);}
            }
        }

        $('#btnCreate').click(function (e) {
            $(this).prop('disabled', true);
            $('#create_form').submit();
        });


    });

This works but it do the read function of my grid 2 times.

.Read(read => read.Action("Claims_Read_Filtered", "Claim", new { flowCatalogId = Model.flowCatalogId, flowTypeCatalogId = Model.flowTypeCatalogId, Model.DateFrom, Model.DateTo})

My question is, how can i save the state of the grid with all of its filters and the column sorting and all the eventual changes i've done to it without run the read a second time?

[Mihaela]

Hello Mario,

The Read request that is triggers twice, because of the setOptions() method. When setOptions() is called, the Grid is recreated to apply the respective options, and it triggers a Read request to the remote endpoint, as is described in the client-side API:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setoptions

To avoid this behavior, I would recommend setting the AutoBind() option of the Grid to "false". This way, the Read request will be called only by the setOptions() method, which is triggers when the page with the Grid is loaded.

@(Html.Kendo().Grid<GridViewModel>()
        .Name("grid_filtered")
        .AutoBind(false)
        ...
)

Let me know if this option works for you.

 

Regards, Mihaela Progress Telerik

[Mario]

Thank you for answering my question Mihaela.

In my particular case this option will not resolve the problem because if i don't have any option to set the first time, my read doesn't trigger and i don't have the first set of data for my grid.

But, since my problem was that the getoption function saves some parameter such as the value of the datetime in itself, i resolved the problem by change that value with a replace in the string using a regex:

let newText;
            let newJsonString;
            var options = b64_to_utf8(localStorage["QSW-grid-Claim-List" + GType]);
            // Funzione per trovare le date settate in setoption e sostituirle con quelle giuste del modello dati
            let jsonString = options;
            let regex = /"read":\s*\{[^}]*\}/;
            let match = jsonString.match(regex);
            console.log(match);
            if (match) {
                newText = '"read":{"url":"/Claim/Claims_Read_Filtered?flowCatalogId=' + '@Model.flowCatalogId' + '&flowTypeCatalogId=' + '@Model.flowTypeCatalogId' + '&DateFrom=' + '@Model.DateFrom.ToString("MM")' + '%2F' + '@Model.DateFrom.ToString("dd")' + '%2F' + '@Model.DateFrom.Year' + '%2000%3A00%3A00&DateTo=' + '@Model.DateTo.ToString("MM")' + '%2F' + '@Model.DateTo.ToString("dd")' + '%2F' + '@Model.DateTo.Year' + '%2000%3A00%3A00\"}';
                newJsonString = jsonString.replace(match[0], newText);
            }

And this solution resolved my problem even if i do a second read for the data of the grid.

Initially i tought that the problem was the second read, but in reality it was that old dates were saved inside the options and erroneously passed them back to the read at the time of the setoption.

[Mihaela]

Hi Mario,

Thank you for sharing your solution. It is greatly appreciated!

Another approach to prevent the second Read request is the following:

• Keep the AutoBind() option disabled.
• Call the client-side read() method of the DataSource to trigger the initial Read request if the setOptions() method will not be triggered (it is highlighted in the code snippet below).

$(document).ready(function () {
        $('body').css('pointer-events', 'all') //activate all pointer-events on body
        $('#dialog_pos').data("kendoDialog").close();
        $('#dialog_pos_supp').data("kendoDialog").close();
        $('#dialog_create').data("kendoDialog").close();

        var GType = '@Model.flowCatalogId' + '@Model.flowTypeCatalogId' + '@Model.filterVersion' + '@ViewBag.Lang' + '_grid_filtered';
        var grid = $("#grid_filtered").data("kendoGrid");

        if (localStorage["QSW-grid-Claim-List" + GType]) {
            var options = b64_to_utf8(localStorage["QSW-grid-Claim-List" + GType]);
            grid.setOptions(JSON.parse(options));
        }
        else
        {
            for (i = 0; i < localStorage.length; i++) {
                x = localStorage.key(i);
                if (x.includes("QSW")) { localStorage.removeItem(x);}
            }
            grid.dataSource.read();
        }
    });

Best,

Mihaela