This question is locked. New answers and comments are not allowed.
I`m binding data via Ajax to grid. I added Change event to the grid. what happening is code inside the Onchange event is executing twice .
I have ajax call inside the Change event function , how can I control this ? My requirement is I should able to write an event that fires at row level like row select event.
@(Html.Kendo().Grid<User>()
.Name("grid")
.DataSource(datasource => datasource
.Ajax()
.ServerOperation(false)
.Model(model => model.Id(p => p.UserID))
.Read(read => read.Action("AllUserRecords_Read", "User"))
.PageSize(15)
)
.Columns(columns =>
{
columns.Bound(p => p.FirstName).Width(40);
columns.Bound(p => p.LastName).Width(80);
columns.Bound(p => p.EmailAddress).Width(70);
})
.Pageable(pageable => pageable.PreviousNext(true).PageSizes(new[] { 5, 10, 15, 20 }))
.Filterable()
.Events(events => events.DataBound("onDataBound").Change("grid_change"))
.Selectable(select => select.Mode(GridSelectionMode.Single))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true)))
function grid_change(e) {
$.ajax({
type: "POST",
url: "/User/GetRoles",
data: { userID: id },
async: false,
success: function (response) {
$("#roles").replaceWith(response);
},
error: function (response, q, t) {
alert(response.responseText);
}
});
function onDataBound(arg) {
this.element.find('tbody tr:first').addClass('k-state-selected');
}
}
I have ajax call inside the Change event function , how can I control this ? My requirement is I should able to write an event that fires at row level like row select event.
@(Html.Kendo().Grid<User>()
.Name("grid")
.DataSource(datasource => datasource
.Ajax()
.ServerOperation(false)
.Model(model => model.Id(p => p.UserID))
.Read(read => read.Action("AllUserRecords_Read", "User"))
.PageSize(15)
)
.Columns(columns =>
{
columns.Bound(p => p.FirstName).Width(40);
columns.Bound(p => p.LastName).Width(80);
columns.Bound(p => p.EmailAddress).Width(70);
})
.Pageable(pageable => pageable.PreviousNext(true).PageSizes(new[] { 5, 10, 15, 20 }))
.Filterable()
.Events(events => events.DataBound("onDataBound").Change("grid_change"))
.Selectable(select => select.Mode(GridSelectionMode.Single))
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true)))
function grid_change(e) {
$.ajax({
type: "POST",
url: "/User/GetRoles",
data: { userID: id },
async: false,
success: function (response) {
$("#roles").replaceWith(response);
},
error: function (response, q, t) {
alert(response.responseText);
}
});
function onDataBound(arg) {
this.element.find('tbody tr:first').addClass('k-state-selected');
}
}