Get value from Kendo UI grid filter and autofill

Question

I have a an MVC web app, and in one of my views I have a Kendo UI grid:

@(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 . It receives the model as the parameter, with it you can overwrite the properties you like. Next, you can get the dataSource's filters and find the value you need to set in the 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):

 <: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

Answer 2

To get apply filters of a grid with => 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; }

Get value from Kendo UI grid filter and autofill

Question

2 answers

solution1
1 ACCPTED 2021-03-04 10:55:09

solution2
0 2022-08-24 12:04:07

Get value from Kendo UI grid filter and autofill

Question

2 answers

solution1 1 ACCPTED 2021-03-04 10:55:09

solution2 0 2022-08-24 12:04:07

solution1
1 ACCPTED 2021-03-04 10:55:09

solution2
0 2022-08-24 12:04:07