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

2 Answers 41 Views
DropDownList Grid
Marina
Top achievements
Rank 1
Iron
Marina asked on 21 Mar 2022, 01:23 PM | edited on 21 Mar 2022, 01:32 PM

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!

2 Answers, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 24 Mar 2022, 11:45 AM

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:

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Marina
Top achievements
Rank 1
Iron
answered on 01 Apr 2022, 09:33 AM
Thank you very much....you point me to right direction!
Anton Mironov
Telerik team
commented on 06 Apr 2022, 06:58 AM

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
Tags
DropDownList Grid
Asked by
Marina
Top achievements
Rank 1
Iron
Answers by
Anton Mironov
Telerik team
Marina
Top achievements
Rank 1
Iron
Share this question
or