Kendo Grid Add Row/Delete Row with Icon

[abdul]

Hi,

I have a requirement in the Kendo grid

1. When the user click on cross icon in each row in the action column then the row should be deleted.

2. In the last available row, a + icon should display and when the user clicks the + icon then it should create new row in the grid 

instead of normal Add new record button.

Below screenshot for the requirements.

 

 

[Anton Mironov]

Hello Abdul,

Thank you for the images and the details provided.

Here’s how you can implement this functionality in a Kendo UI Grid:

Steps to Achieve:

Delete the row when Clicking on the "X" icon. Use a command column with a custom delete button. On click, remove the row from the data source.

Add Row on Click of "+" Icon - display a "+" button in the last row dynamically. On click, add a new empty row in the data source.

The following demo represents the Custom Command functionality that can be used for the delete part:

• https://demos.telerik.com/aspnet-mvc/grid/custom-command

Here is the addRow method that can be used for the additional part:

• https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/addrow

 

Kind Regards,
Anton Mironov
Progress Telerik

[abdul]

Thanks for the response.  I am able to implement Delete in the custom command.

I just want to know how to add a + icon in the command next to the (X) icon at the last row of the grid.

[Anton Mironov]

Hi Abdul,

Please note this is not a built-in configuration. 

I implemented one custom approach, feel free to update it if needed. For the case, I used the "DataBound" Event of the Grid.

In the Event handler, I am removing the current instance of the "+" button and re-create it:

    function onDataBound(e) {
        var grid = this;
        var tbody = grid.tbody;

        // Remove any existing "+ Add Row" buttons to avoid duplicates
        tbody.find(".k-grid-add-row").remove();

        // Append a new row at the bottom with a "+" button
        var colCount = grid.columns.length;
        var newRowHtml = `<tr class="k-grid-add-row"><td colspan="${colCount}" style="text-align: center;">
            <button class="k-button k-primary" onclick="addNewRow()">+</button>
        </td></tr>`;
        tbody.append(newRowHtml);
    }

Here is a REPL example that I prepared for the case. It implements the approach above:

• https://netcorerepl.telerik.com/QTucmpuW42Srek5955

Feel free to test the REPL example on your side. I hope you will like the result.

Best Regards,
Anton Mironov