Kendo Grid: Tema de la plantilla de la barra de herramientas

Question

Tengo una cuadrícula que enumera la información de la carretera y desea una plantilla de la barra de herramientas que me permita filtrar las carreteras al elegir una concesión de una lista desplegable.

algo como este

Mi código:

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

controlador

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

Este es el resultado actual:

La lista está llena de la palabra "indefinido" 16 veces, que es el número de concesiones que tengo actualmente.Cuando selecciono una de las opciones no definidas, muestra el nombre real de la concesión, actualiza la cuadrícula pero no lo filtra.

Quiero que la lista muestre los nombres de concesiones y para filtrar la red por concesión, ya que selecciono uno de ellos.¿Qué estoy perdiendo?

Answer 1

Cambia esto

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

a

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

Answer 2

Primero, verifique dos veces a JSON que está regresando del método del controlador.Parece que sus cresonediumdescripciones pueden no tener datos en ellos.

Segundo, se ve, en su controlador, que está devolviendo una lista de objetos de datos "ConcesionMediumDescription".

Estoy adivinando que parece esto ...

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

Puede considerar devolver un campo de título como parte de este JSON y usarlo para el campo de texto de su desplegable.Esto es solo yo adivinando de lo que está regresando en ese controlador.

---

IDEAL JSON estaría soming como este ...

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

y usted defina su desplegable como tal.

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

Answer 3

Tienes que hacer la línea de retorno de JSON como esta.

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

Simplemente cambie DataValue y DatateTXT