Kendo Grid: a problem with the toolbar template

Question

I have a grid listing road information and require a toolbar template that will allow me to filter roads by selecting a concession from DropDownList.

Something like that

My code is:

CSHTML

<div id="datagrid"> @(Html.Kendo().Grid<SustIMS.Models.RoadModel>() .Name("datagrid_Roads") .Columns(columns => { columns.Bound(r => r.RoadCode).Title(ViewBag.lblCode).Width(140); columns.Bound(r => r.RoadType).Title(ViewBag.RoadType).Width(140); columns.Bound(r => r.RoadMediumDescription).Title(ViewBag.lblDescription); columns.Bound(r => r.ConcessionCode).Title("CCode").Hidden(); columns.Bound(r => r.ConcessionMediumDescription).Hidden().Title(ViewBag.Concession); }) .ToolBar(toolbar => { toolbar.Template(@<text> <div class="toolbar"> <label class="category-label" for="category">Concessão:</label> @(Html.Kendo().DropDownList() .Name("concessions") .OptionLabel("All") .DataTextField("ConcessionMediumDescription") .DataValueField("CCode") .AutoBind(false) .Events(e => e.Change("concessionChange")) .DataSource(ds => { ds.Read("ConcessionFiltering", "MasterData"); }) ) </div> </text>); }) .HtmlAttributes(new { style = "height: 534px;" }) ... ) ) </div> <script type="text/javascript"> function concessionChange() { var value = this.value(), grid = $("#datagrid_Roads").data("kendoGrid"); if (value) { grid.dataSource.filter({ field: "ConcessionMediumDescription", operator: "eq", value: value }); } else { grid.dataSource.filter({}); } } 

controller

 public ActionResult ConcessionFiltering() { ConcessionModel cm = new ConcessionModel(); var aux = cm.getConcessions(); return Json(aux.concessions.Select(c => c.concession.mediumDescription).Distinct(), JsonRequestBehavior.AllowGet); } 

This is the current result:

The list is filled with the word "undefined" 16 times, which represents the number of concessions that I have. When I select one of the undefined options, it shows the actual name of the concession, updates the grid, but does not filter it.

I want the list to display the names of the concessions and filtering the grid by concession when I select one of them. What am I missing?

Answer 1

change this value

 return Json(aux.concessions.Select(c => c.concession.mediumDescription).Distinct(), hJsonRequestBehavior.AllowGet); 

to

 return Json(aux.concessions.Select(c => new ConcessionModel { Description = c.concession.mediumDescription }).Distinct(), JsonRequestBehavior.AllowGet); 

Answer 2

First double check which Json you are returning from the controller method. It looks like your ConcessionMediumDescriptions have no data.

Secondly, it looks like in your controller you are returning a list of ConcessionMediumDescription data objects.

I guess it looks like this ...

 {ConcessionMediumDescription: { CCode: 'mycode', ... } } 

You might consider returning the header field as part of this Json and using it for the text field in the drop-down list. This is just me guessing what you are returning in this controller.

---

The perfect Johnson will be like this ...

 [{ {{id: 'id1'},{text: 'text1'}}, {{id: 'id2'},{text: 'text2'}} }] 

And you will refuse your drop-down list as such.

 .DataTextField("text") .DataValueField("id") 

Answer 3

You should make json return line as follows.

 return Json(aux.concessions.Select(c => new { Value = c.concession.DATAVALUE, Text = c.concession.DATATEXT }), JsonRequestBehavior.AllowGet); 

Just change DATAVALUE and DATATEXT