[英]Kendo UI grid filter with text and value dropdownlist
I am working on updating the Kendo UI grid custom filter with using dropdownlist and combobox for 2 columns. 我正在使用下拉列表和2个列的组合框更新Kendo UI网格自定义过滤器。 I followed the demo on telerik and was able to display the Text value in the dropdownlist. 我在telerik上跟踪了演示,并能够在下拉列表中显示Text值。 However the column is actually based on the Value , for example the following facility has Text LAX03S and Value 15. 但是,该列实际上基于值 ,例如,以下工具具有Text LAX03S和Value 15。
I have the following code in controller returns the list of facilities: 我在控制器中有以下代码返回设施列表:
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);
}
And the following is the view that contains the grid and script: 以下是包含网格和脚本的视图:
@(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>
If I update the GetFacilitySelection to return only the string list of NetworkCode, the dropdownlist will display the NetworkCodes successfully but sorting will fail(like I mentioned above, the sorting is based on the value). 如果我更新GetFacilitySelection以仅返回NetworkCode的字符串列表,则下拉列表将成功显示NetworkCodes但排序将失败(如上所述,排序基于值)。 So I think I need to make some change in the script but not sure how to do it. 所以我认为我需要在脚本中进行一些更改,但不知道如何做到这一点。 Can i get some help? 我可以得到一些帮助吗? Thanks! 谢谢!
Found the solution, also accidental typo in the question, should be kendoDropDownList instead of KendoComboBox. 找到解决方案,也是意外错误的问题,应该是kendoDropDownList而不是KendoComboBox。 Added dataTextField and dataValueFi 添加了dataTextField和dataValueFi
function FacilityFilter(element) {
element.kendoDropDownList({
dataTextField: "Text",
dataValueField: "Value",
dataSource: {
transport: {
read: "@Url.Action("GetFacilitySelection")"
}
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.