Handling server filtering with Kendo ComboBox

Question

I'm trying to handle filtering of Kendo UI ComboBox on server side. I have the following codes in the view

$('#Solicitor').kendoComboBox({
    placeholder: "@T("Enter the partial Name or Primary ID of the Entity.").Text",
    dataTextField: "text",
    dataValueField: "id",
    autoBind: false,
    minLength: 3,
    filter: "startswith",
    dataSource: {
        serverFiltering: true,
        transport: {
            read: {
                url: "@Url.Action("Index", "EntitiesAdmin", new { area = "BizNet.Entity"})",
                dataType: "json"
            }
        }
    }
});

When I typed something into the ComboBox, eg. CAR, using Fiddler2, i can see the following query string is being sent to the server

filter%5Blogic%5D=and&filter%5Bfilters%5D%5B0%5D%5Bvalue%5D=CAR&filter%5Bfilters%5D%5B0%5D%5Bfield%5D=text&filter%5Bfilters%5D%5B0%5D%5Boperator%5D=startswith&filter%5Bfilters%5D%5B0%5D%5BignoreCase%5D=true

when parsed, it'll look something like this

filter[logic]:and
filter[filters][0][value]:CAR
filter[filters][0][field]:text
filter[filters][0][operator]:startswith
filter[filters][0][ignoreCase]:true

From the looks of it, the ComboBox is sending a javascript array named filter through ajax to the server. How do I handle such array in my controller?

public ActionResult Index(THE_TYPE_TO_USE filter) {
}

What should I put in THE_TYPE_TO_USE? I've tried object and dynamic but they both produced a null filter. Please note that the filter sent from the client can be complex too like the following:

$('#Solicitor').kendoComboBox({
    placeholder: "@T("Enter the partial Name or Primary ID of the Entity.").Text",
    dataTextField: "text",
    dataValueField: "id",
    autoBind: false,
    minLength: 3,
    filter: "startswith",
    dataSource: {
        serverFiltering: true,
        // Additional filters which span several levels deep
        filter: {
            filters: [
                {
                    filter: {
                        logic: "or",
                        filters: [
                            { field: "content-type", operator: "eq", value: "Company" },
                            { field: "content-type", operator: "eq", value: "Firm" }
                        ]
                    }
                }
            ]
        },
        transport: {
            read: {
                url: "@Url.Action("Index", "EntitiesAdmin", new { area = "BizNet.Entity"})",
                dataType: "json"
            }
        }
    }
});

which will produce the following parsed query string

filter[filters][0][filter][logic]:or
filter[filters][0][filter][filters][0][field]:content-type
filter[filters][0][filter][filters][0][operator]:eq
filter[filters][0][filter][filters][0][value]:Company
filter[filters][0][filter][filters][1][field]:content-type
filter[filters][0][filter][filters][1][operator]:eq
filter[filters][0][filter][filters][1][value]:Firm
filter[logic]:and
filter[filters][1][value]:CAR
filter[filters][1][field]:text
filter[filters][1][operator]:startswith
filter[filters][1][ignoreCase]:true

As you can see, the array can be several levels deep. So my question is, What should I put in THE_TYPE_TO_USE above which can handle complex filter of arbitrary depth? Can this only be done with the ASP.NET MVC Wrappers? If so, how?

Answer 1

Hi Guys if you are still looking for a solution then below is the code:

   1:         public JsonResult GetCountries(string text)
   2:         {
   3:             var countries = new List<SelectListItem>
   4:                             {
   5:                                 new SelectListItem{Text ="Bulgaria",
   6:                                                    Value="1"},
   7:                                 new SelectListItem{Text ="United States of America",
   8:                                                    Value="2"},
   9:                                 new SelectListItem{Text ="India",
  10:                                                    Value="3"},
  11:                                 new SelectListItem{Text ="Australia",
  12:                                                    Value="4"},
  13:                                 new SelectListItem{Text ="United Kingdom",
  14:                                                    Value="5"},
  15:                             };
  16:             if (!string.IsNullOrEmpty(text))
  17:             {
  18:                 countries = (from item in countries
  19:                              where item.Text.StartsWith(text)
  20:                              select item).ToList();
  21:             }
  22:             return Json(countries, JsonRequestBehavior.AllowGet);
  23:         }

Combobox Init. Code

   1:         @(
   2:             Html.Kendo().ComboBox().Name("kcombobox")
   3:             .HtmlAttributes(new { style = "width:250px" })
   4:             .Placeholder("Select a value...")
   5:             .DataTextField("Text")
   6:             .DataValueField("Value")
   7:             .Filter(FilterType.StartsWith)
   8:             .DataSource(source =>
   9:             {
  10:                 source.Read(read =>
  11:                 {
  12:                     read.Action("GetCountries", "Home");
  13:                 }).ServerFiltering(true);
  14:             })
  15:        )

If you wish to handle extra filters along with the one for combobox then you will need to either have DataSourceRequest which handles the rest of the filter by its own OR you can do the filtering on the client side via Javascript function by applying filter on DataSource in event DataBound Event.