Adding new row(Custom Button) to filtered kendo grid

[abdul]

Hi,

I have a kendo grid and in the page load kendo grid automatically have a new empty row. When we click on the + icon then it should create multiple rows in the grid.

 

The above functionality is working fine, but when we do a filter on any of the column then on filter click button it should display filtered row along with new empty row.

After click on filter button the empty row is not creating. I tried the below code on click on filter button it fires the Filter event but  

its not creating the empty row. Can you please let me know how to add a new empty row on click of filter button.

.Events(ev => ev.Filter("onFiltering"))

function onFiltering() {
    var gridName = "grid1";
    var grid = $("#" + gridName).data("kendoGrid");

if (grid && grid.dataSource) {
    grid.dataSource.cancelChanges();
    var newRow = { field: "NewRow", Value: 0 };
    grid.dataSource.add(newRow);
}

}

[Ivaylo]

Hello Abdul,

Thank you for the deails provided.

To add a new empty row to your Kendo Grid after filtering, it's best to use the grid's dataBound event instead of the Filter event. The dataBound event fires after the grid refreshes with the filtered data, ensuring the new empty row appears alongside the filtered results.

Recommended Approach:

$("#grid1").kendoGrid({
    // ... your grid configuration ...
    dataBound: function() {
        var grid = $("#grid1").data("kendoGrid");
        // Prevent duplicate empty rows
        var hasEmptyRow = grid.dataSource.data().some(function(item) {
            return item.field === "NewRow" && item.Value === 0;
        });
        if (!hasEmptyRow) {
            grid.dataSource.add({ field: "NewRow", Value: 0 });
        }
    }
});

How This Works:

• The code checks if an empty row already exists, avoiding duplicates after each filter.
• Every time the grid data is refreshed (including after filtering), a new empty row is added if one isn't present.

Integration with "+" Icon Logic:

• Your existing logic for adding rows via the "+" icon can remain unchanged.
• Both the "+" icon and filtering will trigger row addition independently, so ensure your checks for duplicates are consistent.

This setup should resolve the issue and keep your grid behavior consistent after filtering. If you need a tailored example based on your full grid configuration, please provide more details about your columns and data model.

Regards,
Ivaylo
Progress Telerik

[abdul]

Hi Ivaylo,

Thanks for sharing the response. I tried the above solution on data bound event but when choose filter and click on the filter button the below code gives me hasEmptyRow as true, because on grid load I am adding a empty row to the grid, so after filter also grid.dataSource.data() has all the grid records along with empty row.

From the grid can we get only the filtered records so after that we can add an empty row to the grid.

 var hasEmptyRow = grid.dataSource.data().some(function(item) {
            return item.field === "NewRow" && item.Value === 0;
        });

[Ivaylo]

Hi Abdul,

Thank you for the details provided.

In your case, you may utilize the code provided in my previous response within the Filter event. However, it is advisable to wrap the code in a setTimeout function to ensure that the filtering process is completed before appending the empty row. Below is an example implementation:

function onFilter(e) {
    setTimeout(function () {
        var grid = $("#grid1").data("kendoGrid");
        // Prevent duplicate empty rows
        var hasEmptyRow = grid.dataSource.data().some(function (item) {
            return item.field === "NewRow" && item.Value === 0;
        });
        if (!hasEmptyRow) {
            grid.dataSource.add({ field: "NewRow", Value: 0 });
        }
    }, 1000)
}

You could increase or decrease the value of delay. Please let me know if this is the desired result.

I hope this information was helpful, and I look forward to your reply.

Regards,

Ivaylo