Kendo Grid:工具栏模板问题 [英] Kendo Grid: Toolbar template issue

问题描述

我有一个列出道路信息的网格，并且想要一个工具栏模板，该模板允许我从DropDownList中选择一个特许权来过滤道路.

类似的东西

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

我的代码:

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({});
        }
    }

控制器

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

这是当前结果:

列表中的未定义"一词填充了16次，这是我目前拥有的优惠数量.当我选择未定义的选项之一时，它会显示特许权的实际名称，刷新网格但不对其进行过滤.

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?

推荐答案

更改此

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

到

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

这篇关于Kendo Grid:工具栏模板问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！