Griglia Kendo: problema del modello della barra degli strumenti

Question

Ho una griglia che elenca le informazioni sulla strada e desidero un modello della barra degli strumenti che mi consentirà di filtrare le strade scegliendo una concessione da un DropDownList.

qualcosa come questo

Il mio codice:

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

.

Questo è il risultato attuale:

L'elenco è pieno della parola "indefinito" 16 volte, che è il numero di concessioni che attualmente ho.Quando seleziono una delle opzioni indefinite, mostra il nome effettivo della concessione, aggiorna la griglia ma non filtrala.

Voglio che la lista mostri i nomi delle concessioni e filtrare la griglia per concessione mentre seleziono uno di essi.Cosa mi manca?

Answer 1

Cambia questo

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

Primo, ricontrollare cosa stai tornando dal metodo del controller.Sembra che le tue concessiondiumdescripzioni possano non avere dati in loro.

Secondo, sembra, nel tuo controller, che stai restituendo un elenco di oggetti dati "concessionmediumdescription".

Indovina che sembra questo ...

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

.

Puoi prendere in considerazione la possibilità di tornare un campo del titolo come parte di questo JSON e di utilizzarlo per il campo di testo del menu a discesa.Questo è solo io indovinando da ciò che stai tornando in quel controller.

---

.

IDEAL JSON sarebbe un po 'di sommare come questo ...

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

.

E si definisci il tuo a discesa come tale.

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

.

Answer 3

Devi fare la linea di ritorno JSON come questa.

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

.

Basta modificare datavalue e datatext