Search code examples
javascriptjqueryasp.net-mvckendo-uikendo-grid

Get value from Kendo UI grid filter and autofill

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:

enter image description here

Is that possible?

Solution

  • 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. E.g.:

    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