Kendo Grid: Problème de modèle de barre d'outils

Question

J'ai une grille qui répertorie les informations relatives à la route et souhaite un modèle de barre d'outils qui me permettra de filtrer les routes en choisissant une concession d'une liste déroulante.

Quelque chose comme ça

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

contrôleur

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

Ceci est le résultat actuel:

La liste est remplie du mot "non défini" 16 fois, ce qui est le nombre de concessions que j'ai actuellement.Lorsque je sélectionne l'une des options non définies, elle affiche le nom réel de la concession, rafraîchit la grille mais ne le filtre pas.

Je veux que la liste affiche les noms de concession et à filtrer la grille par concession car je sélectionne l'un d'entre eux.Qu'est-ce que je manque?

Answer 1

changer cette

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

Answer 2

Tout d'abord, vérifiez le JSON que vous retournez de la méthode du contrôleur.Il semble que votre concessionMediumDescriptions ne peut avoir aucune donnée en eux.

Deuxièmement, on dirait, dans votre contrôleur, que vous retournez une liste des objets de données "ConcessionMediumDescription".

Je suppose que cela ressemble à ceci ...

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

Vous pouvez envisager de retourner un champ de titre dans la partie de ce JSON et d'utiliser cela pour le champ de texte de votre liste déroulante.Ceci est juste que je devine de ce que vous retournez dans ce contrôleur.

---

idéal JSON serait somnolent comme ça ...

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

Et vous défiez votre liste déroulante en tant que telle.

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

Answer 3

Vous devez faire une ligne de retour JSON comme celle-ci.

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

Changer simplement DataValue et DaTateXT