Persist sate, value and data of dropdown in Kendo Grid MVC

[Marina]

I have a dropdown by which I select the category of my data in a Kendo grid in my MVC app.

 

@(Html.Kendo().DropDownList()
    .Name("kind")
    .HtmlAttributes(new { style = "width:18%" })
    .OptionLabel("Select Category")
    .DataTextField("Cat_Title")
    .DataValueField("Cat_ID")
    .Events(e => e.Change("onChange"))
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("Overview_Get_Categories", "Announcements");
        });
    })
)

I need to save my selected value so if the user return back can load his search. I have the following code for my grid

<div class="box-col">
<a href="#" class="k-button k-button-md k-rounded-md k-button-solid-base" id="save">Save State</a>
<a href="#" class="k-button k-button-md k-rounded-md k-button-solid-base"  id="load">Load State</a>

</div>

and in js

 

<script>

$(document).ready( function () {
    var grid = $("#grid").data("kendoGrid");

    $("#save").click(function (e) {
        e.preventDefault();
        localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
    });

    $("#load").click(function (e) {
        e.preventDefault();
        var options = localStorage["kendo-grid-options"];
        if (options) {
            grid.setOptions(JSON.parse(options));
        }
    });
});

How can I save the value from the dropdown? and then reload it? any idea? Thank you!

[Anton Mironov]

Hi Marina,

Thank you for the code snippets and details provided.

The pointed approach is working for getting and setting the options of a Kendo UI Grid. This is related to the filtering, sorting, ordering, and paging functionalities.

For getting the newly selected value of the DropDownList(DDL), use its "Change" event. In the Event handler, save the needed value in the SessionStorage, or in the DataBase.

The following forum thread answer demonstrates how to send an additional parameter to the Read Method of the DataSource for the Grid:

• https://www.telerik.com/forums/pass-additional-data-to-read-method-of-datasource#3064714

As a parameter, use the saved value of the DDL conditionally and in the Read Action Method in the Controller to return the required dataSource for the Grid.

I hope this information helps. Let me know if further information or assistance is needed.

Looking forward to hearing back from you.

Kind Regards,
Anton Mironov
Progress Telerik

[Marina]

Thank you very much....you point me to right direction!

[Anton Mironov]

Hi Marina,

Thank you for the kind words!

If any further information or assistance is needed, do not hesitate to contact me and the team.

Best Regards,
Anton Mironov