Kendo Grid: Toolbar template issue

Question

I have a grid that lists Road information and want a Toolbar Template that will allow me to filter the roads by choosing a Concession from a DropDownList.

Something like this

My code:

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 is the number of concessions I currently have. When I select one of the undefined options, it shows the actual name of the concession, refreshes the grid but doesn't filter it.

I want the list to show the concession names and to filter the grid by concession as I select one of them. What am I missing?

Answer 1

change this

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 what Json you are returning from the controller method. It looks like your ConcessionMediumDescriptions may have no data in them.

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

I am guessing it looks like this...

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

You may consider returning a title field as a part of this Json and to use that for the text field of your dropdown. This is just me guessing from what you are returning in that controller.

---

Ideal Json would be somting like this...

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

And you defind your dropdown as such.

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

Answer 3

You have to do json return line like this.

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

Just change DATAVALUE and DATATEXT