Блог

Я работаю над обновлением пользовательского фильтра сетки пользовательского интерфейса Kendo с использованием выпадающего списка и выпадающего списка для 2 столбцов. Я следил за демонстрацией на telerik и смог отобразить текстовое значение в выпадающем списке. Однако столбец фактически основан на значении, например, следующий объект имеет текст 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, выпадающий список успешно отобразит сетевые коды, но сортировка завершится ошибкой (как я упоминал выше, сортировка основана на значении). Поэтому я думаю, что мне нужно внести некоторые изменения в сценарий, но не уверен, как это сделать. Могу ли я получить некоторую помощь? Спасибо!

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

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