How to sync Kendo UI mvc Grid with Kendo Mvc Autocomplete

Question

I am working asp.net mvc witk Kendo UI MVC Tools. I am trying to display list of records in a Kendo UI Mvc Grid. and i have one kendo ui autoComplete Textbox when i type a letter it shows corresponding field record that matches the criteria will be showed like a dropdown. Now i want to sync the autocomplete textbox with kendo ui mvc grid. that means when i type a letter records that matches criteria should display in the grid. I have tried with change event but it doesnt seems work for me.

 @(Html.Kendo().AutoComplete().Events(c=>c.Change("GridChange"))
                                                   .Name("txtSearchItem")
                                                .Filter("startswith")
                                           .DataTextField("xxx")
                                              .Value(ViewBag.SearchValue)
                              .BindTo((List<MyRecords>)Model).HtmlAttributes(new { @class = "required", style = "font-size:19px;width:150px;", onkeypress = "return isNumericKey(event);" })
                                                )

please guide me.

Answer 1

First, create a grid with a HeaderTemplate to make a combobox that behaves as an autocomplete as well.

  @( Html.Kendo().Grid(Model)

                   .Name("Grid")
                   .ClientDetailTemplateId("inventoryTemplate")
                   .DataSource(ds => ds.Ajax()
                           .Read(r => r.Action("Read", "Home"))
                           )
                   .Columns(columns =>
                   {
                       columns.Bound(p => p.Item).Width(10)
                         .Filterable(false).Sortable(false).HeaderTemplate(@<text>
        @(Html.Kendo().ComboBox()
                                .DataValueField("Items")
                                .Placeholder("Items")
                                .DataTextField("Items")
                                .Name("Items")
                                .DataSource(ds => ds.Read(rea => rea.Action("ListOfItems", "Home")))
                                .Events(ev => ev.Change("onComboListCodeChange"))
                              )
                              </text>);
                   })
                   )

Now create this method will get an array from Dictionary of filters, you will need it later.

 function getArrayFromDic(dic) {
    var arr = new Array();
    arr = $.map(dic, function (n, i) {
        return { field: n.field, operator: n.operator, value: n.value };
    });
    return arr;

}

This function will get a dictionary that represents the filters available on the grid. If there is more than one filter.

 function getFilterDic() {

    var grid = $('#Grid').data('kendoGrid');
    var filtersDicTemp = {
    };

    if (grid.dataSource._filter) {
        $.each(grid.dataSource._filter.filters, function (index, value) {
            filtersDicTemp[value.field] =
                                    {
                                        field: value.field, operator: value.operator, value: value.value
                                    }
        });
    }
    return filtersDicTemp;
}

This will be called each time you change the value of the filter Autocomplete combobox in this case. There is a method on the kendo.data.DataSource called filter, where you can pass an array of filters.

function onComboListCodeChange(e) {
        var grid = $('#Grid').data('kendoGrid');
        var filtersDic = getFilterDic();
        if (this.value() && this.value() != 'All') {
            if (this.value() != 'Items' && this.value() != '') {
                filtersDic["Items"] =
               {
                   field: "Items", operator: "startswith", value: this.value()
               }
            }
        }
        else {
            if (filtersDic["Items"]) {
                delete filtersDic["Items"];
            }
        }

        var filters = getArrayFromDic(filtersDic);

        grid.dataSource.filter(
               filters
           );
    }

Hope it helped!

Answer 2

Use the approach from here http://demos.kendoui.com/web/grid/toolbar-template.html

The difference would be that you will use AutoComplete (which is almost the same) and you do not need to put it inside the Toolbar via the Toolbar template.