Kendo Combo Box onkeypress Event

Question

I'm having a trouble on handling large data on combo box cause it returns at least 16,000 records I tried this method JsonReturnResult.MaxJsonLength = int.MaxValue; but my browser still hangs up. Now what I want to do is to trigger the query when the User presses Enter .

Here's my code :

<script>
function onSelectCAO() {
                     var AccountName = $("#ChildAccountCode").val();
                     $("#account_name").data("kendoComboBox").value(AccountName);
                     document.getElementById("text_AcccountName").value = AccountName;

                 }
</script>

<input type="text" id="text_AcccountName" name="text_AcccountName" style="width:80%;" hidden="hidden"/>

@(Html.Kendo().ComboBox()

                                .Name("ChildAccountCode")
                                .DataTextField("ChildAccountCode1")
                                .Filter(FilterType.Contains)
                                .MinLength(3)
                                .Placeholder("Select ChildAccountCode")
                                .DataValueField("AccountName1")
                                .HtmlAttributes(new { @style = "width: 200px;" })
                                .Events(e =>
                                    {
                                        e.Change("onSelectCAO");
                                    })
                                                    .DataSource(source =>
                                                                {
                                                                    source.Read(read =>
                                                                        {
                                                                            read.Action("ddlChildAccountCode", "Dropdowns");
                                                                        });
                                                                })                                                                                       
             )

What I want to accomplish is when User presses Enter it will only return results base on what User input it

Answer 1

I already solved my problems. So here's my solution I set the AutoBind into false and set the Parameter on my DataSource as filter or condition on my query

@(Html.Kendo().ComboBox()

                                .Name("ChildAccountCode")
                                .DataTextField("ChildAccountCode")
                                .Filter(FilterType.Contains)
                                .MinLength(3)
                                .Placeholder("Select ChildAccountCode")
                                .DataValueField("AccountName")
                                .HtmlAttributes(new { @style = "width: 200px;" })
                                .AutoBind(false)
                                .Events(e =>
                                    {
                                        e.Change("onSelectCAO");
                                    })
                                                    .DataSource(source =>
                                                                {
                                                                    source.Read(read =>
                                                                        {
                                                                            read.Action("ddlChildAccountCode", "Dropdowns").Data("AccountCodeParameter");
                                                                        });
                                                                })                                                                                       
             )

Answer 2

inside script.

$("#DropDownID").data("kendoComboBox").input.keydown(function (e) {
console.log("KeyPressed");
  console.log(e.keyCode);
} 

Answer 3

I strictly advise you to get data to combobox by ServerFilteringTrue attribute of Kendo. Because 16000 records is so high.

You can use text filtering on Kendo with contains and in Business side You can filter by name and id with the text you enter to combobox.

the filter method in jquery can be like

function filterByText() {
    var mainText = $("#DropDownID").data("kendoComboBox").input.val();
    return {
        text: mainText
    };
}

And kendo combobox be like

<div class="form-group">
    <label class="col-md-3 control-label">@Html.LabelFor(m => m.SomeModelId)</label>
    <div class="col-md-9">
        @(Html.Kendo().ComboBoxFor(m => m.SomeModelId)
                 .DataTextField("ChildAccountCode")
                 .DataValueField("Id")
                 .HtmlAttributes(new { style = "width: 100%", id = "ChildAccountCode", data_value_primitive = "true", required = "required", validationMessage = "Select code" })
                 .Placeholder("Select some code")
                 .Filter("contains")
                 .AutoBind(true)
                 .Suggest(false)
                 .DataSource(source =>
                 {
                     source.Read(read =>
                     {
                         read.Action("ddlChildAccountCode", "DropDowns").Data("filterByText");
                     })
                     .ServerFiltering(true);
                 }).AutoBind(true)
        )
    </div>
</div>

For example in your controller if the text parameter length is smaller than 3, you can not fill anything to combobox, so it will make DB calls less cost.

I hope that will be useful to you