Kendo ui mvc ComboBox: How to send additional or custom data to filter results

Question

I am using Kendo UI ComboBox (MVC wrapper). In this razor view, user will be prompted to enter the children names depending on the "Model.NumChilds" field. ChildName need to be populated from the server. User need to enter minimum two characters. This information is passed as additional data to server using data method in dataSource. Here in my java script function "filterChildNamesList" I have hard coded to always send first child input value.

How can I send the input value specific to a child?

Any help would be appreciated. Thanks.

@model Test.Web.ViewModels.ParentViewModel

<script>
    function filterChildNamesList() {
        debugger;
        return {
            cFilter: $("#Child0").data("kendoComboBox").input.val()
        };
    }
</script>
@{
 Model.ChildList = new List<Test.Web.Model.Child>();
    for (int count = 0; count < Model.NumChilds; count++)
    {
        Model.ChildList.Add(new Test.Web.Model.Child());
    }
}
<table>
    @for (int count = 0; count < Model.ChildList.Count; count++)
    {
        <tr>
            <td>
                <label>Child @count</label>
                @(Html.Kendo().ComboBoxFor(m => m.ChildList[count].ChildName)
                        .HtmlAttributes(new { style = "width:300px", id = "Child" + count })
                        .Placeholder("Enter 4 characters...")
                        .DataTextField("description")
                        .DataValueField("id")
                        .Filter(FilterType.Contains)
                        .MinLength(2)
                        .DataSource(source =>
                        {
                            source.Read(read =>
                            {
                                read.Action("GetChildNames", "Parent").
                                    Data("filterChildNamesList");
                            }).ServerFiltering(true);
                        }))
                <td>
            </tr>
    }
</table>

Answer 1

You can use return Json(data.ToDataSourceResult(request)) and return it as Json from your controller instead of passing additional data. This will automatically filter the result in data.

If you want to send additional data, you can change to

Data("function(){return filterChildNamesList('Child" + count+"');}")

function filterChildNamesList(arg){}

This will help you identify which send parameter you have called.