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");
grid.dataSource.cancelChanges();
var newRow = { field: "NewRow", Value: 0 };
grid.dataSource.add(newRow);
}
}
1 Answer, 1 is accepted
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
Start the 2025 Survey