Reputation: 1742
I have a Kendo MVC Grid in a template that supports re-ordering of rows. I can successfully drag and drop the rows and catch the event when this happens (see handler below) but unless I also edit one or more cells in the grid the Save event doesn't fire when I click the Update button.
The drag-n-drop handler does set the affected model(s) 'dirty' flag but that doesn't seem to cut it:
function onChangeEnumValueOrder(e) {
var uid = $(e.draggableEvent.currentTarget).data("uid");
var model = $("#TheGrid").data("kendoGrid").dataSource.getByUid(uid);
model.dirty = true;
}
Any hints or tips would be appreciated.
[UPDATE (grid definition)]
@(Html.Kendo().Grid<EnumItemViewModel>()
.Name("TheGrid")
.Columns(columns =>
{
columns.Bound(x => x.Id).Visible(false);
columns.Bound(x => x.Key).Visible(false);
columns.Bound(x => x.SortOrder).Width(10).Sortable(true);
columns.Bound(x => x.Value).Width(100);
columns.Command(command => command.Custom("Delete").Click("onDeleteEnumItem")).Width(100).Visible(true);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(x => x.Key);
model.Field(x => x.Id).DefaultValue(Guid.Empty);
model.Field(x => x.Value);
})
.Read(read => read.Action("GetEnumItems", "SiteManagement").Data("getFieldIdEnumItemGrid"))
.Create(create => create.Action("AddEnumItem", "SiteManagement"))
.Update(update => update.Action("UpdateEnumItem", "SiteManagement"))
.Destroy(destroy => destroy.Action("DeleteEnumItem", "SiteManagement"))
.Events(events => events.Error("onErrorGrid('EnumGrid')"))
)
.Editable(editable => editable.DisplayDeleteConfirmation(false).Mode(GridEditMode.InCell))
.ToolBar(toolbar => toolbar.Create())
.Events(events => events.SaveChanges("onSaveEnumItemGrid")) // <-- EVENT NOT FIREING
.Sortable(sort =>
{
sort.SortMode(GridSortMode.SingleColumn);
sort.AllowUnsort(true);
})
)
@(Html.Kendo().Sortable()
.For("#TheGrid")
.Filter("table > tbody > tr")
.Cursor("move")
.HintHandler("hintHandlerSortable")
.PlaceholderHandler("placeholderHandlerSortable")
.ContainerSelector("#TheGrid tbody")
.Events(events => events.Change("onChangeEnumValueOrder"))
Upvotes: 1
Views: 3303
Reputation: 4054
In your onChangeEnumValueOrder
, call saveChanges()
as follows:
function onChangeEnumValueOrder(e) {
var uid = $(e.draggableEvent.currentTarget).data("uid");
var model = $("#TheGrid").data("kendoGrid").dataSource.getByUid(uid);
model.dirty = true;
$("#TheGrid").data("kendoGrid").saveChanges();
}
You may also want to consider setting your data like this:
model.set('<Property Name>', <Property Value>)
as this should set the dirty flag for you.
Upvotes: 1