从 Kendo UI 网格过滤器和自动填充中获取价值

Question

I have a an MVC web app, and in one of my views I have a Kendo UI grid:我有一个 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"))
)
)

What I'd like to be able to do, is when someone uses the search filter in that first column ("Project") and then goes to add a new record, I want the value from that search filter to be automatically filled into the dropdown list in the "Add New Record" pop-up:我希望能够做的是，当有人在第一列（“项目”）中使用搜索过滤器然后添加新记录时，我希望该搜索过滤器中的值自动填充到“添加新记录”弹出窗口中的下拉列表：

Is that possible?那可能吗？

Answer 1

You can handle it within the beforeEdit event .您可以在beforeEdit事件中处理它。 It receives the model as the parameter, with it you can overwrite the properties you like.它接收 model 作为参数，用它你可以覆盖你喜欢的属性。 Next, you can get the dataSource's filters and find the value you need to set in the model.接下来，您可以获取dataSource的过滤器并在model中找到您需要设置的值。 Eg:例如：

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;
});

Demo(in pure JavaScript):演示（纯 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, "&nbsp:", 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 Dojo

Answer 2

To get apply filters of a grid with => grid.dataSource.filter()使用 => grid.dataSource.filter() 获取网格的应用过滤器

To check grid filter length with below用下面的方法检查网格过滤器长度

 var grid = $("#gridID").data("kendoGrid"); if(grid.dataSource.filter()==null){ console.log(0); } else{ grid.dataSource.filter().filters.length; }

从 Kendo UI 网格过滤器和自动填充中获取价值

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-03-04 10:55:09

解决方案2
0 2022-08-24 12:04:07

从 Kendo UI 网格过滤器和自动填充中获取价值

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-03-04 10:55:09

解决方案2 0 2022-08-24 12:04:07

解决方案1
1 已采纳 2021-03-04 10:55:09

解决方案2
0 2022-08-24 12:04:07