从 Kendo UI 网格过滤器和自动填充中获取价值
Posted
技术标签:
【中文标题】从 Kendo UI 网格过滤器和自动填充中获取价值【英文标题】：Get value from Kendo UI grid filter and autofill 【发布时间】：2021-06-02 05:03:14 【问题描述】：我有一个 MVC Web 应用程序，在我的一个视图中我有一个 Kendo UI 网格：
@(html.Kendo().Grid<Custodias.Models.ProjectMessageRecipientsModel>()
.Name("grid")
.Columns(columns =>
columns.ForeignKey(p => p.ProjectID_FK, (System.Collections.IEnumerable)ViewBag.ProjectList, "Value", "Text").Title("Project").Width(150).Filterable(filterable => filterable.Cell(e => e.Operator("eq").SuggestionOperator(FilterType.Contains).ShowOperators(false))); ;
columns.ForeignKey(p => p.ServiceUserID_FK, (System.Collections.IEnumerable)ViewBag.ServiceUserList, "Value", "Text").Title("Service User").Width(150).Filterable(filterable => filterable.Cell(e => e.Operator("eq").SuggestionOperator(FilterType.Contains).ShowOperators(false)));
columns.ForeignKey(p => p.ProcessKeyID_FK, (System.Collections.IEnumerable)ViewBag.ProcessKeyList, "Value", "Text").Title("Process Key").Width(150).Filterable(false);
columns.ForeignKey(p => p.ContactID_FK, (System.Collections.IEnumerable)ViewBag.ContactList, "Value", "Text").Title("HideContact").Width(150).Filterable(false);
columns.Bound(p => p.ContactName).Title("Contact").Width(200).Filterable(false).Hidden();
columns.Command(command => command.Edit(); ).Width(90);
columns.Command(command => command.Destroy(); ).Width(90);
)
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp).Window(w => w.Title("Edit Project Message Recipients").Width(500))).Events(e => e.Edit("onPopOpen"))
.Pageable()
.Resizable(resize => resize.Columns(true))
.Sortable()
.Scrollable()
.Filterable(ftb => ftb
.Mode(GridFilterMode.Row)
.Extra(false)
)
.HtmlAttributes(new style = "height:550px;" )
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events =>
events.RequestEnd("onRequestEnd");
)
.Model(model => model.Id(p => p.ProjectMessageRecipientID_PK))
.Create(update => update.Action("CreateProjectMessageRecipients", "ProjectMessageRecipients"))
.Read(read => read.Action("BindProjectMessageRecipientsModel", "ProjectMessageRecipients"))
.Update(update => update.Action("UpdateProjectMessageRecipients", "ProjectMessageRecipients"))
.Destroy(update => update.Action("DeleteProjectMessageRecipients", "ProjectMessageRecipients"))
)
)
我希望能够做的是，当有人在第一列（“项目”）中使用搜索过滤器然后去添加新记录时，我希望该搜索过滤器中的值自动填写在“添加新记录”弹出窗口的下拉列表中：
这可能吗？
【问题讨论】：
【参考方案1】：您可以在beforeEdit event 内处理它。它接收模型作为参数，你可以用它覆盖你喜欢的属性。接下来，您可以获取数据源的过滤器并找到您需要在模型中设置的值。例如：
var grid = $("#grid").data("kendoGrid");
grid.bind("beforeEdit", (e) =>
let filter = e.sender.dataSource.filter().filters.find(filter => filter.field === 'ProductName');
e.model.ProductName = filter.value;
);
演示（纯 javascript）：
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/editing-popup">
<style>html font-size: 14px; font-family: Arial, Helvetica, sans-serif; </style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.1.224/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.1.224/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.1.224/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function ()
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource(
transport:
read:
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
,
update:
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
,
destroy:
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
,
create:
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
,
parameterMap: function(options, operation)
if (operation !== "read" && options.models)
return models: kendo.stringify(options.models);
,
batch: true,
pageSize: 20,
schema:
model:
id: "ProductID",
fields:
ProductID: editable: false, nullable: true ,
ProductName: validation: required: true ,
UnitPrice: type: "number", validation: required: true, min: 1 ,
Discontinued: type: "boolean" ,
UnitsInStock: type: "number", validation: min: 0, required: true
);
$("#grid").kendoGrid(
dataSource: dataSource,
pageable: true,
height: 550,
toolbar: ["create"],
filterable:
mode: "row"
,
columns: [
field:"ProductName", title: "Product Name",
filterable:
cell:
operator: "contains",
suggestionOperator: "contains"
,
field: "UnitPrice", title:"Unit Price", format: "0:c", width: "120px" ,
field: "UnitsInStock", title:"Units In Stock", width: "120px" ,
field: "Discontinued", width: "120px", editor: customBoolEditor ,
command: ["edit", "destroy"], title: " ", width: "120px" ],
editable: "popup",
beforeEdit: (e) =>
let filter = e.sender.dataSource.filter().filters.find(filter => filter.field === 'ProductName');
e.model.ProductName = filter.value;
);
);
function customBoolEditor(container, options)
$('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);
</script>
</div>
</body>
</html>Dojo
【讨论】：
这成功了！我在网格中的 .HtmlAttributes(new style = "height:550px;" ) 之前添加了 .Events(e => e.BeforeEdit("BeforeEdit")) ，然后在我的 javascript 中添加了一个名为 "BeforeEdit" 的函数和用这两行 Javascript 填充它。谢谢。以上是关于从 Kendo UI 网格过滤器和自动填充中获取价值的主要内容，如果未能解决你的问题，请参考以下文章
Kendo UI Grid 自定义过滤器菜单在第一次过滤或清除后中断