Search code examples
javascriptc#asp.net-mvckendo-uikendo-asp.net-mvc

Overwrite Kendo Read Parameter Value


I have a Kendo DropDown list which sends an additional parameter to it's read request. So for example

@(Html.Kendo().DropDownList()
    .Name("MyDropdown")
    .HtmlAttributes(new { style = "width:100%" })
    .Filter("contains")
    .Value(ID)
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("Dropdown_Read", "Dropdowns", new { User = 1});
        });
    })
)

This works fine and as expected, a value of 1 is passed to the controller and the read is executed.

Depending on user interaction with other elements, this read can be triggered again and I have done so via Javascript:

var user = $(#UserList).val(); // 2 for example
$('#MyDropdown').data('kendoDropDownList').dataSource.read({ User: user});

This triggers the read functionality but the User value is still being sent as 1 instead of the new value. An inspection into the network activity shows this:

Request URL: https://localhost:8080/Dropdowns/Dropdown_Read?User=1&User=2

It seems as if the User property is defined twice, sent to the controller and then the controller picks up the first value which is the original default value. Is there a way to overwrite this value and just send the new value to the controller?


Solution

  • This should be relatively simple to fix.

    If you change the code:

    .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("Dropdown_Read", "Dropdowns", new { User = 1});
            });
        })
    

    to

    .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("Dropdown_Read", "Dropdowns").Data("getFilterValue");
            });
        })
    

    then create a Javascript function that returns the value you are looking to filter on:

    i.e.

    function getFilterValue(){
         var user = $('#UserList').val();
        .... other code removed for brevity
        return {User: user}; 
    }
    

    This should then get you the required param structure and send the selected value from your other control. You would want to put some checking code in to make sure that a value has been selected and if not then a default value is sent if allowed.

    this link should also help you out

    DropDown List Kendo UI for ASP.Net MVC