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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
1 066
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

Другие вопросы по теме