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

时间:2019-04-18 18:55:19

标签: javascript c# asp.net-mvc kendo-ui kendo-grid

我正在使用dropdownlist和2列组合框来更新Kendo UI网格自定义过滤器。我在telerik上进行了演示,并能够在下拉列表中显示 Text 值。但是,该列实际上基于 Value ,例如,以下工具具有 Text LAX03S和 Value 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 :(得分:0)

找到了解决方案,在问题中也是偶然的错别字,应该是kendoDropDownList而不是KendoComboBox。添加了dataTextField和dataValueFi

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