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

【问题标题】：Get value from Kendo UI grid filter and autofill从 Kendo UI 网格过滤器和自动填充中获取价值
【发布时间】：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"))
)
)

我希望能够做的是，当有人在第一列（“项目”）中使用搜索过滤器然后去添加新记录时，我希望该搜索过滤器中的值自动填写在“添加新记录”弹出窗口的下拉列表中：

这可能吗？

【问题讨论】：

标签： javascript jquery asp.net-mvc kendo-ui kendo-grid

【解决方案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: "&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

【讨论】：

这成功了！我在网格中的 .HtmlAttributes(new { style = "height:550px;" }) 之前添加了 .Events(e => e.BeforeEdit("BeforeEdit")) ，然后在我的 javascript 中添加了一个名为 "BeforeEdit" 的函数和用这两行 Javascript 填充它。谢谢。