從 Kendo UI 網格過濾器和自動填充中獲取價值
[英]Get value from Kendo UI grid filter and autofill
問題描述
我有一個 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"))
)
)
我希望能夠做的是，當有人在第一列（“項目”）中使用搜索過濾器然后添加新記錄時，我希望該搜索過濾器中的值自動填充到“添加新記錄”彈出窗口中的下拉列表：
那可能嗎？
2 個解決方案
解決方案1
1 已采納 2021-03-04 10:55:09
您可以在beforeEdit事件中處理它。 它接收 model 作為參數，用它你可以覆蓋你喜歡的屬性。 接下來，您可以獲取dataSource的過濾器並在model中找到您需要設置的值。 例如：
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>
解決方案2
0 2022-08-24 12:04:07
使用 => grid.dataSource.filter() 獲取網格的應用過濾器
用下面的方法檢查網格過濾器長度
var grid = $("#gridID").data("kendoGrid"); if(grid.dataSource.filter()==null){ console.log(0); } else{ grid.dataSource.filter().filters.length; }
帶有文本和值下拉列表的Kendo UI網格過濾器
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.