Фильтр сетки Kendo UI с выпадающим списком текста и значений - PullRequest
Новая
       17

Фильтр сетки Kendo UI с выпадающим списком текста и значений

0 голосов
/ 18 апреля 2019

Я работаю над обновлением пользовательского фильтра сетки Kendo UI с использованием выпадающего списка и комбинированного списка для 2 столбцов.Я следовал за демо на telerik и смог отобразить значение Text в выпадающем списке.Однако столбец фактически основан на Значение , например, следующее средство имеет Текст LAX03S и Значение 15.

У меня есть следующеекод в контроллере возвращает список объектов: 

public ActionResult GetFacilitySelection()
{
    var allFacilities = _facilityService.GetAllFacilities();
    var selection = allFacilities.Select(m => new { Text = m.NetworkCode, Value = m.Id }).OrderBy(m => m.Text).ToList();

    return Json(selection, JsonRequestBehavior.AllowGet);
}

И следующее представление, которое содержит сетку и сценарий: 

@(Html.Kendo().Grid<OutboundCustomBatchConfigurationViewModel>()
    .Name("ConfigGrid")
    .Columns(columns =>
    {
        columns.Bound(m => m.SorterName).ClientTemplate("#=Sorter#").Title("Sorter");
        columns.Bound(m => m.FacilityId).Width(200).ClientTemplate("#=NetworkCode#").Filterable(filterable => filterable.UI("FacilityFilter"));
        columns.Bound(m => m.DefaultCnPPort).Width(200);
        columns.Bound(m => m.DefaultCnEPort).Width(200);
        columns.Bound(m => m.ShipperId).ClientTemplate("#=ShipperName#").Width(200).Title("Shipper").Filterable(filterable => filterable.UI("ShipperFilter"));
        columns.Command(command => { command.Edit(); }).Width(100);
    })
    .Sortable()
    .ToolBar(tb =>
    {
        tb.Create().Text("Add Configuration");
    })
    .DataSource(ds =>
    {
        ds.Ajax()
        .Read("ReadCustomBatchConfiguration", "OutboundSorting")
        .Create("UpsertCustomBatchConfiguration", "OutboundSorting")
        .Update("UpsertCustomBatchConfiguration", "OutboundSorting")
        .Model(md => { md.Id(m => m.Id); })
        .Events(e => e.Error("function(args){onGridBoundError(args,\"ConfigGrid\");}"));
    }) 
    .Filterable(ft => { ft.Enabled(true); })
    .ClientDetailTemplateId("MappingTemplate")
)

<script>
    function FacilityFilter(element) {
        element.kendoComboBox({
            dataSource: {
                transport: {
                    read: "@Url.Action("GetFacilitySelection")"
                }
            }
        });
    }
</script>

Если я обновлю GetFacilitySelection, чтобы вернуть только строкуСписок NetworkCode, выпадающий список будет отображать NetworkCodes успешно, но сортировка не удастся (как я упоминал выше, сортировка основана на значении).Поэтому я думаю, что мне нужно внести некоторые изменения в сценарий, но не уверен, как это сделать.Могу ли я получить помощь?Спасибо!

1 Ответ

0 голосов
/ 19 апреля 2019

Найденное решение, также случайная опечатка в вопросе, должно быть kendoDropDownList вместо KendoComboBox. Добавлены dataTextField и dataValueFi 

function FacilityFilter(element) {
    element.kendoDropDownList({
        dataTextField: "Text",
        dataValueField: "Value",
        dataSource: {
            transport: {
                read: "@Url.Action("GetFacilitySelection")"
            }
        }
    });
}
...