Kendo DropdownList server filtering with added parameters

Question

I'm happy if I can get the filtering working client or serverside, but combining sending parameters on the DataSource action and ServerFiltering(true) results in an null filter value (text parameter).

The dropdownlist is part of a series which uses cascading.

View:

@(Html.Kendo().DropDownList()
          .Name("name")
          .OptionLabel(new SelectListItem { Text = "Select...", Value = "" })
          .DataTextField("Text")
          .DataValueField("Value")
          .Filter("contains")
          .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("Action", "Controller")
                      .Data("params");
              })
              .ServerFiltering(true);
          })
          .Enable(false)
          .AutoBind(false)
          .CascadeFrom("parent")
    )

    <script>
        function params() {
            return {
                a: '',
                b: 1
            };
        }
    </script>

Controller:

public JsonResult Action(string text, string a, int b)
    {
        return Json((List<SelectListItem>), JsonRequestBehavior.AllowGet);
    }

"text" should contain the filter text.

https://demos.telerik.com/aspnet-mvc/dropdownlist/serverfiltering

Answer 1

Given the example above, loading the 'params' javascript function like this before initializing should work. Both 'text', 'a' and 'b' will be available with their given values in the mvc Controller method every time the filter value is changing. This way you could pass in additinal parameters and values as required:

<script>
    function params() {
        var filterText = "";
        var filter = $('#name').data('kendoDropDownList').dataSource.filter();
        if (filter && filter.filters[0].operator == "contains") {
            filterText = filter.filters[0].value;
        }

        return {
            text: filterText,
            a: '',
            b: 1
        };
    }
</script>

@(Html.Kendo().DropDownList()
      .Name("name")
      .OptionLabel(new SelectListItem { Text = "Select...", Value = "" })
      .DataTextField("Text")
      .DataValueField("Value")
      .Filter("contains")
      .DataSource(source =>
      {
          source.Read(read =>
          {
              read.Action("Action", "Controller")
                  .Data("params");
          })
          .ServerFiltering(true);
      })
      .Enable(false)
      .AutoBind(false)
      .CascadeFrom("parent")
)

Answer 2

I think I understand what you are asking. You would like to send the current value of a drop down as a parameter to the data binding of a datasource read event function.

Try this-->

 <script>
      function params() {
           return {
                Text = $("#name").data("kendoDropDownList").text(),
                a: '',
                b: 1
            };
        }
 </script>

Solution:

<script>
    function params() {
           return {
                text = null,
                a: '',
                b: 1
            };
        }

    var filter = $('#name').data('kendoDropDownList').dataSource.filter();

    if (filter && filter.filters[0].operator == "contains") {
        params.text = filter.filters[0].value;
    }
</script>

The only way I could get it working as Kendo adds some default filters, so I had to use a conditional that looks for the filter type I'm using. If null it's not a search.