Kendo UI Grid: Method “removeRow” deletes all events of the grid

Question

I have a Kendo UI Grid and added mouse events to the grid by jQuery (e.g. click). This is working without any problem. But by deleting a row in the grid, all events of the grid are also deleted. What am I doing wrong?

This is my code to delete a row:

var rowToDelete = $(this).closest("tr");
var grid = $("#gridId").data("kendoGrid");
grid.removeRow(rowToDelete);

I added a button to each row of the grid, added a click event to these buttons which deletes the corresponding row. After the row is deleted, the click events of all other buttons are removed. The same with the mouse-over events of a grid column.

Thanks for your help!

Of course I can add all events again after deleting the row, but this solution doesn't seem to be very elegant. — Lopo
Can you please provide information about which event you have added in this grid/row? — Jayesh Goyani
It's just a simple jQuery-Event, e.g.: '$('#gridId .k-grid-content table tr').click(function () { alert('row clicked!') });' — Lopo
Ok, i will try to resolved this issue and inform you. In this time can you please check that issue is: "Sometimes alert break the functionality of kendo ui so can you please change the code (on row click change the color of text) of click event and check it again". — Jayesh Goyani
alert() was just an example... it doesn't matter which event I'm binding. In fact, I'm doing just a simple '$("#someDivId").addClass("someClass")' — Lopo

Jayesh Goyani Jayesh Goyani · Accepted Answer · 2013-08-13T13:03:15

Please try with the below code snippet.

VIEW

<script>
function gridDataBound(e) {
    var grid = $("#Grid").data("kendoGrid");
    grid.tbody.find(">tr").click(function () {
        $("#divTest").html('Row Index Clicked :' + $(this).index());
    });
}

function DeleteRow(obj) {
    var rowToDelete = $(obj).parent().parent()
    var grid = $("#Grid").data("kendoGrid");
    grid.removeRow(rowToDelete);
}
</script>
@(Html.Kendo().Grid<MvcApplication1.Models.TestModels>()
.Name("Grid")
.Columns(columns =>
{
    columns.Bound(p => p.ID);
    columns.Bound(p => p.Name);
    columns.Template(@<text></text>).ClientTemplate("<input type='button' class='k-button' value='Delete' onclick='DeleteRow(this);' />");

})
.Pageable()
.Sortable()
.Filterable()
.DataSource(dataSource => dataSource
    .Ajax()
        .Read(read => read.Action("Grid_Read", "Home"))
)
.Events(e => e.DataBound("gridDataBound"))
)
<div id="divTest"></div>

CONTROLLER

public ActionResult Grid_Read([DataSourceRequest] DataSourceRequest request)
    {
        List<TestModels> models = new List<TestModels>();

        for (int i = 0; i < 5; i++)
        {
            TestModels t1 = new TestModels();
            t1.ID = i;
            t1.Name = "Name" + i;
            models.Add(t1);
        }

        return Json(models.ToDataSourceResult(request));
}

MODEL

public class TestModels
{
    [Display(Name = "ID")]
    public int ID { get; set; }

    [Display(Name = "Name")]
    public string Name { get; set; }

}

Let me know if any concern.

Kendo UI Grid: Method “removeRow” deletes all events of the grid

2 Answers