Kendo UI 带有文本和值下拉列表的网格过滤器

Question

我正在更新 Kendo UI 网格自定义过滤器，使用 2 列的下拉列表和组合框。我按照 telerik 上的演示进行操作，并能够在下拉列表中显示 Text 值。然而，该列实际上基于 Value，例如以下设施具有 Text LAX03S 和 Value 15.

我在控制器 returns 设施列表中有以下代码：

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 更新为 return 只有 NetworkCode 的字符串列表，下拉列表将成功显示 NetworkCodes 但排序将失败（就像我上面提到的，排序是基于值的）。所以我认为我需要对脚本进行一些更改，但不确定如何进行。我能得到一些帮助吗？谢谢！

Answer 1

找到解决方案，也是题中的意外错别字，应该是kendoDropDownList而不是KendoComboBox。添加了 dataTextField 和 dataValueFi

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

Kendo UI 带有文本和值下拉列表的网格过滤器

Kendo UI grid filter with text and value dropdownlist

javascript

c#

asp.net-mvc

kendo-ui

kendo-grid