Preventing row-level editing from being cleared when filters are applied

1 Answer 56 Views
Editor Filter Grid
Avinesh
Top achievements
Rank 1
Avinesh asked on 07 Oct 2024, 11:14 PM

Hi,

We are attempting to set the default values of new rows in a grid based on some user-specified filters. The desired functionality is that if, for example, the "Year Level" filter is set to "Year 1", when a new row is created it will have its Year Level value automatically set to Year 1 AND will be visible in an edit state in the grid. 

We have read the previous Q&A here, however this solution is not suitable as it makes ALL rows with no "Year Level" value become visible when a new row is created.

As the "edit" event does not seem to fire when creating a new row whilst filters are applied, the implementation we are attempting involves saving those filters when the "Add" button is clicked and then re-applying them after the row has been created. This mostly works, but the new row is inserted as an un-editable dirty record and clicking its "Edit" button does nothing.

The code below is a combination of a couple of different approaches. Any guidance would be greatly appreciated!

let currentEditRow;
let currentModel;

$(".k-grid-add").click(function () {
    var grid = $("#grid").data("kendoGrid");

    // Save the current filters before clearing them
    savedFilters = grid.dataSource.filter();
    grid.dataSource.filter([]); 

    // Add a new row and enter edit mode
    currentEditRow = grid.addRow(); 
    grid.editRow(currentEditRow); // Attempting to force new row into edit mode here does not work
});

$("#grid").kendoGrid({
    dataSource: ds,
    sortable: true,
    toolbar: ["create"],
    columns: [
        {
            field: "Yearlevel",
            sortable: false,
            title: "Year Level",
            editor: cmbEditorYearlevelForHomegroup,
            template: "#=Yearlevel?.Name ?? ''#",
            editable: isEditable
        },
        // Other columns here
        { command: ["edit", "destroy"], title: "Action", width: "180px" }],
    editable: "inline",
    edit: function (e) {
        currentEditRow = $(e.container); // Save reference to the editing row
        currentModel = e.model; // Save the current model

        if (e.model.isNew()) {
            var yearLevelDropdown = $("#yearLevel").data("kendoDropDownList");
            e.model.set("Yearlevel", { // Update the values in the new row based on the selected filters
                Code: yearLevelDropdown.value(),
                Id: 0,
                Name: yearLevelDropdown.text()
            });

            var grid = $("#grid").data("kendoGrid");
            if (savedFilters) {
                grid.dataSource.filter(savedFilters); // Re-apply the filters
            }
            if (currentEditRow && currentModel && currentModel.isNew()) {
                var grid = this;
                setTimeout(function () {
                    grid.editRow(currentEditRow); // Attempting to re-enter edit mode for the new row; this also does not work
                });
            }
        }
    }
});

1 Answer, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 10 Oct 2024, 11:30 AM

Hello, Avinesh,

When using the addRow method, the newly added row should be in edit mode by default, as in this Dojo example. Furthermore, the addRow method does not return the newly added row so that you can store in a variable, so the parameter you're passing to the editRow method should be undefined in that case. You can either try commenting out the code for the editRow method, or change it as below:

grid.editRow($("#grid tr:eq(1)"));

Let me know if the above information would be useful.

Regards,
Martin
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Editor Filter Grid
Asked by
Avinesh
Top achievements
Rank 1
Answers by
Martin
Telerik team
Share this question
or