Can't Read KendoUI Dropdown List value

Question

I have the following three KendoUI Dropdown List boxes

@(Html.Kendo().DropDownList()  
    .HtmlAttributes(new { style = "width:120px;height:20px;font-size:12px;" })
    .OptionLabel("Make (any)") 
    .Name("Make") 
    .DataTextField("Name") 
    .DataValueField("Id") 
    .DataSource(source =>
    {
           source.Read(read =>
           {
               read.Action("UpdateFilters", "Home"); 
           })
           .ServerFiltering(true); 
    })
    .Events(e => e.Change("UpdateFilterParameters"))
    .SelectedIndex(0) //Select first item.
    )

    @(Html.Kendo().DropDownList()    
          .Name("Model")
          .HtmlAttributes(new { style = "width:120px;height:20px;font-size:12px;'" })
          .OptionLabel("Model (any)")
          .DataTextField("Name")
          .DataValueField("Id")
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("UpdateFilters", "Home");
              })
              .ServerFiltering(true);
          })
          .Enable(true)
          .AutoBind(true)
          .Events(e => e.Change("UpdateFilterParameters"))


    )

    @(Html.Kendo().DropDownList()
          .Name("Fuel")
          .HtmlAttributes(new { style = "width:120px;height:20px;font-size:12px;" })
          .OptionLabel("Fuel type (any)")
          .DataTextField("Name")
          .DataValueField("Id")
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("UpdateFilters", "Home");
              })
              .ServerFiltering(true);
          })
          .Enable(true)
          .AutoBind(true)
          .Events(e => e.Change("UpdateFilterParameters"))


    )

This is my MVC controller

public JsonResult UpdateFilters(string FilterInfo)
    {
        FilterParameter oFilterInfo = new FilterParameter();

        // Json object for filtering
        // {'Procedure':'GetMakes','Id':[1,2,3]}
        try
        {
            oFilterInfo = JsonConvert.DeserializeObject<FilterParameter>(FilterInfo);
            return Json(UpdateFilterParameter.GetUpdatedFilters(oFilterInfo), JsonRequestBehavior.AllowGet);
        }
        catch
        {
            return new JsonResult();
        }

    }

This is my class for holding the Json data

public class FilterParameter
{
    public string Procedure { get; set; }
    public int?[] Id;

    public FilterParameter()
    {
    }
}

The problem I'm having is when calling the JavaScript function UpdateFilterParameters, I'm only getting the value for either list box, but not all. This is the function;

function UpdateFilterParameters() {

        var iMake = $("#Make").val();
        var iModel = $("#Model").val();
        var iFuel = $("#Fuel").val();

        $('#Make').data("kendoDropDownList").dataSource.read(
            { FilterInfo: "{'Procedure':'GetMakes','Id':[" + iMake + "," + iModel + "," + iFuel + "]}" });

        $('#Model').data("kendoDropDownList").dataSource.read(
             { FilterInfo: "{'Procedure':'GetModels','Id':[" + iMake + "," + iModel + "," + iFuel + "]}" });

        $('#Fuel').data("kendoDropDownList").dataSource.read(
            { FilterInfo: "{'Procedure':'GetFuelTypes','Id':[" + iMake + "," + iModel + "," + iFuel + "]}" });

    };

Any ideas why this is happening ?

Is any further information needed to help solve my problem ? — neildt, Jul 25 '13 at 16:29

score 3 · Accepted Answer · answered Jul 26 '13 at 07:14

3

To fix this issue I had to change the function UpdateFilterParameters to as below, to either show the Id value or pass NULL. My code was failing when de-serialising the Json

function UpdateFilterParameters() {

        var iMake = $("#Make").val();
        var iModel = $("#Model").val();
        var iFuel = $("#Fuel").val();

        var ids = (iMake || "null") + "," + (iModel || "null") + "," + (iFuel || "null");

        $('#Make').data("kendoDropDownList").dataSource.read(
            { FilterInfo: "{'Procedure':'GetMakes','Id':[" + ids + "]}" });

        $('#Model').data("kendoDropDownList").dataSource.read(
             { FilterInfo: "{'Procedure':'GetModels','Id':[" + ids + "]}" });

        $('#Fuel').data("kendoDropDownList").dataSource.read(
            { FilterInfo: "{'Procedure':'GetFuelTypes','Id':[" + ids + "]}" });

    };

answered Jul 26 '13 at 07:14

neildt

5,101
10
56
107

hey i'm trying to implement what you have since mine doens't work @ `http://stackoverflow.com/questions/18410895/how-to-read-kendoui-cascading-dropdownlist-from-controller` but in your example i can't get `JsonConvert.` or `UpdateFilterParameter.` they both `Err:` Don't exists in current contedxt. can you help me out? – Don Thomas Boyle Aug 26 '13 at 13:52
Have you added a reference to using Newsoft.Json ? – neildt Aug 26 '13 at 14:48
sure have, anything else you can think of? also do you think there is a good reason why i can't just do `string filter3 = values["DDLID"]` from my formCollection values and the DDl's Name / id from the controller level? – Don Thomas Boyle Aug 26 '13 at 15:31

Can't Read KendoUI Dropdown List value

1 Answers1