Kendo Grid Custom comboBox Filter

Question

I has grid which will load data as filterable combo box, So I need to create custom filter for this column with filterable combo box also.

I create combo box and assign it to the column filter UI. My problem is when the combobox read the data from the controller it does not send the filter text to the controller.

<script type="text/javascript">
function outletFilter(element) {
        debugger;
                    element.kendoComboBox({
                     dataTextField: "OutletNameE",
                        dataValueField: "OutletID",
                    autoBind: false,
                     minLength: 1,
                        dataSource: {
                        serverFiltering: true,
                        transport: {
                            read: "@Url.Action("GetOutletsCombo")"
                           }
                           },                                                         
                        optionLabel: "--Select Value--"
                    });
                    }

    </script>

 @(Html.Kendo().Grid<Spine.ERP.ViewModel.AccountReceivableOutletViewModel>()
    .Name("ARDetails_OutletGrid")
    .Columns(columns =>
    {

        columns.Bound(p => p.AccountReceivableID).Hidden();
        columns.Bound(p => p.AccountReceivableOutletID);
        columns.Bound("Outlet.OutletName")
           .EditorTemplateName("OutletForeignKeyEditor")
            .ClientTemplate("<a>#=OutletID ##=OutletID? '-' : ' ' ##=OutletID ? 

Outlet.OutletName :  ' ' #</a>")
.Filterable(filter => filter.UI("outletFilter"));    
        })

And here are my controller function

public ActionResult GetOutletsCombo(string text)
        {
            if (text == null)
                text = "";
            var result = new List<OutletViewModel>();
            var Outlets = outletRepository.FilterOnID("Outlet", new string[] { "OutletID", "OutletNameE" }, text).ToList();
            result = (from outlet in Outlets
                      select new OutletViewModel
                      {
                          OutletID = outlet.OutletID,
                          OutletNameE = outlet.OutletNameE,
                          OutletNameA = outlet.OutletNameA
                      }).ToList();
            return Json(result, JsonRequestBehavior.AllowGet);
        }

Mahib Mahib · Accepted Answer · 2014-01-22T16:43:15

First of all if you perform a "read", it does not send any additional value to the controller so in "public ActionResult GetOutletsCombo(string text)" you wouldn't get any value in "text".

For server filtering you can see kendo's demo on the following page

http://demos.kendoui.com/web/combobox/serverfiltering.html

As far as I get from your question, you want to do a Kendo Grid and on there you want to have a combobox to filter the data in the grid. In this case, you may check the similar kind of demo in Kendo's site

http://demos.kendoui.com/web/grid/toolbar-template.html

For filter menu you can check this on kendo under ASP.NET MVC

http://demos.kendoui.com/web/grid/filter-menu-customization.html

Hope you can work out your problem from these examples. In case you can't then put a comment underneath this post. I shall try again to help you.

Kendo Grid Custom comboBox Filter

1 Answers