Save Persist state in DB

[Jeremie]

    Hi all,

I'm trying to use the persist state feature of the Kendo Grid.

I work with ASP.Net Core (2.1) and JQuery (3.3.1).

I have an issue with the grid.GetOptions(), .SetOptions() and . They always try to post to the page where I'm at. My grid is not configured to go and fetch for the data with the Datasource option of the grid. My data for the grid are passed along the model.

[Jeremie]

I missclicked and can't delete the message, wonderful...

[Tsvetomir]

Hi Jeremie,

The state of the Kendo UI Grid can be stringified and saved into the database. The save itself should happen with the help of a custom AJAX request. The URL that is set for the request is determined by the developer.

Can you share all the relevant code snippets so that I can investigate them and get back to you with specific suggestions?

 

Kind regards,
Tsvetomir
Progress Telerik

[Jeremie]

Here is the definition of my Grid :

@(Html.Kendo().Grid(Model.MyData)
          .Name("MyName")
          .Columns(columns =>
          {
              columns
                  .Template(templateInfo.ToString())
                  .Width(50)
                  .HtmlAttributes(new { @class = "centrer-texte" });
              columns.Bound(r => r.Nom)
                  .Title(Localisation.Nom);
              columns.Bound(r => r.Prenom)
                  .Title(Localisation.Prenom);
              columns.Bound(r => r.Email);
              columns.Bound(r => r.DateEntreeListe).Format("{0:dd/MM/yyyy HH:mm}").Title(Localisation.DateEntree);
              columns.Bound(r => r.DateSortieListe).Format("{0:dd/MM/yyyy HH:mm}").Title(Localisation.DateSortie);
          })
          .ToolBar(t => t.ClientTemplate(ToolbarTemplate()))
          .Pageable(pageable => pageable
              .PageSizes(true)
              .ButtonCount(5))
          .Sortable()
          .Filterable(c => c.Enabled(true).ConfigurerEtMettreEnFrancais())
          .Reorderable(reorder => reorder.Columns(true))
          .Resizable(c => c.Columns(true))
          .ColumnMenu()
          .Scrollable(c => c.Enabled(true))
          .Events(c => c.DataBound("SauvegarderEtatInitialTableauOnDataBound")
              .ExcelExport("FormatageDateExcel")
          )
          .NoRecords(c => c.TemplateId("aucunElementTemplate"))
        )

As you can see I do not have the .DataSource set as my data are passed throught the Model. So when the JS perform the SetOptions I don't need the grid to perform a server operation.

Furthermore, on databound the grid calls the js function SauvegarderEtatInitialTableauOnDataBound(), which saves my default state of the grid IF it is not already saved.

Here is my loading context in AJAX which is called on the document.ready in my last js script:

function ChargerContexteTableau() {

    var grid = $(".tableau-persistant").data("kendoGrid");
    if (grid) {
        var urlToCall = $("#url-chargement-contexte-tableau").data("request-url");
        var data = { idTableau: "Registre-2c728622-eec1-4ae8-a483-eb67afca20f3", initial : false };
        var state = null;
        $.ajax({
            async: false,
            type: "POST",
            url: urlToCall,
            cache: false,
            data: data,
            method: 'POST'
        })
            .done(function (xhr) {
                if (xhr) {
                    state = JSON.parse(xhr);
                }
            })
            .fail(function (jqXhr, textStatus, errorThrown) {
                console.log(jqXhr);
                console.log(textStatus);
                console.log(errorThrown);

            });

        if (state) {
            var optionsAMettreAJour = grid.getOptions();

            optionsAMettreAJour.dataSource.page = state.page;
            optionsAMettreAJour.columns = state.columns;
            optionsAMettreAJour.dataSource.pageSize = state.pageSize;
            optionsAMettreAJour.dataSource.sort = state.sort;
            optionsAMettreAJour.dataSource.filter = state.filter;

            grid.destroy();
        $(".tableau-persistant").empty().kendoGrid(optionsAMettreAJour);
        }
    }
}

 

When I load the first time the page of the grid, the save of the default context with the databound seems to be performed well (save_default_state_success.jpg, the 1 means default).

Then I do some filtering, reordering,hiding columns and save the state. The save action seems to be performed well also with this JS :

function OptionsASauvegarder() {
    var grid = $(".tableau-persistant").data("kendoGrid");
    var columns = grid.getOptions().columns;
    var dataSource = grid.getOptions().dataSource;
    var state = {
        columns: columns,
        page: dataSource.page,
        pageSize: dataSource.pageSize,
        sort: dataSource.sort,
        filter: dataSource.filter
    };
    return JSON.stringify(state);
}

$("#sauvegarder-configuration-tableau").click(function (e) {
        e.preventDefault();

        var grid = $(".tableau-persistant").data("kendoGrid");
        var options = OptionsASauvegarder();
        var idTableau = $(".contenuPage").find(".tableau-persistant")[0].id;
        var data = { optionsTableau: options, idTableau: idTableau, initial: false };
        var urlToCall = $("#url-sauvegarde-contexte-tableau").data("request-url");

        $.ajax({
            async: false,
            type: "POST",
            url: urlToCall,
            cache: false,
            data: data,
            method: "POST"
        })
            .done(function (xhr) {
                console.log("succes sauvegarde contexte taleau");
                //console.log(JSON.parse(xhr));
            })
            .fail(function (jqXhr, textStatus, errorThrown) {
                console.log("erreur sauvegarde contexte taleau");
                console.log(jqXhr);
                console.log(textStatus);
                console.log(errorThrown);
            });
    });

 

The result of the save action can be seen on the save_custom_state_success.jpg (the 0 means no default but custom state).

So when I come back to the page with the grid, I want that my custom save state to be loaded by default. That is why I call 

function ChargerContexteTableau()

on the document.ready.

 

Do you need more informations ?

Thanks for your support, I really appreciate.

Best regards,

Jeremie

 

 

 

 

 

 

 

 

[Jeremie]

I forgot to mention that the URL of my page is :

https://localhost:44323/Liste/Details/2c728622-eec1-4ae8-a483-eb67afca20f3

and on load the grid or whoeever is trying to POST the page i'm at, as you can see in the screenshot attached (post_the_same_page.jpg)

[Tsvetomir]

Hi Jeremie,

I have investigated the provided code snippets and I have noticed that the items are stringified twice. When performing AJAX requests it is not needed to explicitly call the JSON.stringify() method.

Could you try saving the state without actually stringifying the state and let the AJAX request stringify it and see if that makes a difference?

Also, is it possible for you to share more details about the second reply of yours with the 404 error status of the AJAX request? Is there a specific issue with the URL creation or we should look for the problem elsewhere?

 

Regards,
Tsvetomir
Progress Telerik

[Jeremie]

Hi Tsvetomir,

thanks for your reply.

I tried to not stringyfy the options but this way it is no longer saved in my MS SQL Server database as my datatype in DB is text (to store a larger quantity of character). But you were right I stringified twice so I removed one unecessary stringyfy (cf. save_parameters).

 

AS far as the 404 (cf. 404_post.png) page is concerned, the grid.setOptions(optionsAMettreAJour); or the $(".tableau-persistant").empty().kendoGrid(optionsAMettreAJour); (cf. setOptions_post.png) is posting the page I'm at, but I don't know why and how to prevent the POST.

I hope it's clearer for you.

 

Regards,

Jeremie.

[Tsvetomir]

Hi Jeremie,

In general, the setOptions method of the Kendo UI Grid destroys and reinitialized the grid, that is why it performs a POST request - to get the data for the new instance of the grid.

The reason why it is posting to the same URL as the URL of the page you are currently on is that the options that are passed to the kendoGrid() method lack the transport.read.url option. The default one is the one on the page. 

It is recommended to make use of the setOptions method when overriding the grid's initial options so that you keep the previous options and extend them with the new ones. However, in the current case, you are using the local binding of the grid, therefore, you should save all of the data items before the setOptions methods and apply them later on. The two approaches can happen with the help of the following method:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/data

Let me know if additional information is required.

 

Kind regards,
Tsvetomir
Progress Telerik