Jonas Rembratt
Jonas Rembratt

Reputation: 1742

Kendo MVC Grid Save event not firing

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

Answers (1)

Matt Millican
Matt Millican

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

Related Questions