jQuery.Deferred exception: Cannot read property 'models' of undefined - kendo-grid

Question

I'm not sure how to debug this error.
I have a kendo grid that allows users to drag and drop to sort rows and also allows users to update a cell in those rows. However after adding the sort functionality I get this error when trying to update a row:
jQuery.Deferred exception: Cannot read property 'models' of undefined TypeError: Cannot read property 'models' of undefined
I have this code:
#(Html.Kendo().Grid<DocumentProperties>(Model.CurrentList)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ID).Visible(false);
columns.Bound(p => p.SortOrder).Visible(false);
columns.Bound(p => p.DisplayText).Title("Title");
columns.Bound(p => p.FileName).Title("File Name");
columns.Bound(p => p.ID).ClientTemplate(#Html.ActionLink("View", "ViewDocument", new { id = "did" }, new { target = "_blank" }).ToHtmlString().Replace("did", "#: ID #")).Title("").Width(80); //creates link to view the uploaded document
columns.Bound(p => p.ID).ClientTemplate(#Html.ActionLink("Remove", "DeleteDocument", new { id = "did" }, new { onclick = "return confirm('Are you sure you want to delete this document?');", style = "color:Red;" }).ToHtmlString().Replace("did", "#: ID #")).Title("").Width(80);
columns.Command(commands =>
{
commands.Edit(); // The "edit" command will edit and update data items.
}).Title("").Width(80);
})
.DataSource(dataSource => dataSource
.Ajax()
.Update(update => update.Action("DocAttributeUpdate", "Blurb")) // Action invoked when the user saves an updated data item.
.Events(events => events.Error("error_handler"))
.PageSize(20)
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.ID); // Specify the property which is the unique identifier of the model.
model.Field(p => p.ID).Editable(false); // Make the ID property not editable.
model.Field(p => p.SortOrder).Editable(false); // Make the SortOrder property not editable.
model.Field(p => p.FileName).Editable(false); // Make the FileName property not editable.
model.Field(p => p.DisplayText).Editable(true); // Make the DisplayText property editable.
})
)
.Sortable(sortable => sortable
.Enabled(true)
)
.Pageable(pageable => pageable
//.Refresh(true) Need to figure this out. Doesn't refresh properly.
.PageSizes(true)
.ButtonCount(5))
.Resizable(r => r.Columns(true))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row)) //make each row selectable
)
#(Html.Kendo().Sortable() //this adds the cool drag and drop sorting
.For("#Grid")
.Filter("table > tbody > tr")
.Cursor("move")
.HintHandler("noHint")
.PlaceholderHandler("placeholder")
.ContainerSelector("#Grid tbody")
.Events(events => events.Change("onChange"))
)
<script type="text/javascript">
var noHint = $.noop;
function placeholder(element) {
return element.clone().addClass("k-state-hover").css("opacity", 0.65);
}
function onChange(e) {
var grid = $("#Grid").data("kendoGrid"),
skip = grid.dataSource.skip(),
oldIndex = e.oldIndex + skip,
newIndex = e.newIndex + skip,
dataItems = grid.dataSource.data(),
dataItem = grid.dataSource.getByUid(e.item.data("uid")); //grab your item and give it a new index. Then remove the item from the list and place in the new index.
grid.dataSource.remove(dataItem);
grid.dataSource.insert(newIndex, dataItem);
var dataList = [];
for (var i = 0; i < dataItems.length; i++) {
dataList[i] = {
ID: dataItems[i].ID,
ClientId: dataItems[i].ClientId,
SortOrder: i,
DisplayText: dataItems[i].DisplayText,
Type: dataItems[i].Type,
MimeType: dataItems[i].MimeType,
FileName: dataItems[i].FileName
};
}
$.ajax({
url: "/Blurb/SaveSortOrder",
type: "POST",
data: {
data: JSON.stringify(dataList) //send our json string back to the server for sorting
}
})
};
When I remove the code for:
#(Html.Kendo().Sortable()
The update button works again, but I don't have my drag and drop sorting anymore.
jQuery Script:
<script>
jQuery(function() {
jQuery("#Grid").kendoGrid({
"columns": [{
"title": "Title",
"headerAttributes": {
"data-field": "DisplayText",
"data-title": "Title"
},
"field": "DisplayText",
"encoded": true,
"editor": "\u003cinput class=\"text-box single-line\" id=\"DisplayText\" name=\"DisplayText\" type=\"text\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"DisplayText\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"
}, {
"title": "File Name",
"headerAttributes": {
"data-field": "FileName",
"data-title": "File Name"
},
"field": "FileName",
"encoded": true
}, {
"headerAttributes": {
"data-field": "ID",
"data-title": ""
},
"width": "80px",
"template": "\u003ca href=\"/Blurb/ViewDocument/#: ID #\" target=\"_blank\"\u003eView\u003c/a\u003e",
"field": "ID",
"encoded": true
}, {
"headerAttributes": {
"data-field": "ID",
"data-title": ""
},
"width": "80px",
"template": "\u003ca href=\"/Blurb/DeleteDocument/#: ID #\" onclick=\"return confirm(\u0027Are you sure you want to delete this document?\u0027);\" style=\"color:Red;\"\u003eRemove\u003c/a\u003e",
"field": "ID",
"encoded": true
}, {
"width": "80px",
"command": [{
"name": "edit",
"buttonType": "ImageAndText",
"text": "Edit"
}]
}],
"pageable": {
"pageSizes": [5, 10, 20],
"buttonCount": 5
},
"sortable": true,
"selectable": "Single, Cell",
"resizable": true,
"scrollable": false,
"editable": {
"confirmation": "Are you sure you want to delete this record?",
"confirmDelete": "Delete",
"cancelDelete": "Cancel",
"mode": "inline",
"create": true,
"update": true,
"destroy": true
},
"messages": {
"noRecords": "No records available."
},
"dataSource": {
"type": (function() {
if (kendo.data.transports['aspnetmvc-ajax']) {
return 'aspnetmvc-ajax';
} else {
throw new Error('The kendo.aspnetmvc.min.js script is not included.');
}
})(),
"transport": {
"read": {
"url": ""
},
"prefix": "",
"update": {
"url": "/Blurb/DocAttributeUpdate"
}
},
"pageSize": 20,
"page": 1,
"total": 3,
"error": error_handler,
"schema": {
"data": "Data",
"total": "Total",
"errors": "Errors",
"model": {
"id": "ID",
"fields": {
"ID": {
"editable": false,
"type": "number"
},
"ClientId": {
"type": "number"
},
"SortOrder": {
"editable": false,
"type": "number",
"defaultValue": null
},
"DisplayText": {
"type": "string"
},
"Type": {
"type": "string"
},
"MimeType": {
"type": "string"
},
"FileName": {
"editable": false,
"type": "string"
},
"Document": {
"type": "object"
}
}
}
},
"data": {
"Data": [{
"ID": 440,
"ClientId": 16,
"DisplayText": "Test Document",
"FileName": "3182AscensionRecipientsDashboard (5).pdf",
"Type": "Document",
"MimeType": "application/pdf",
"Document": {
"ID": 0,
"DocumentAttributeId": 0,
"FileContent": null ,
"Content": null
},
"SortOrder": 0
}, {
"ID": 5,
"ClientId": 16,
"DisplayText": "Summary Plan Description",
"FileName": "Summary Plan Description.pdf",
"Type": "Document",
"MimeType": "application/pdf",
"Document": {
"ID": 0,
"DocumentAttributeId": 0,
"FileContent": null ,
"Content": null
},
"SortOrder": 1
}, {
"ID": 6,
"ClientId": 16,
"DisplayText": "Summary Annual Report",
"FileName": "SUMMARY ANNUAL REPORT.pdf",
"Type": "Document",
"MimeType": "application/pdf",
"Document": {
"ID": 0,
"DocumentAttributeId": 0,
"FileContent": null ,
"Content": null
},
"SortOrder": 2
}],
"Total": 3,
"AggregateResults": null
}
}
});
});
</script>

Answer 1

I had to approach edit a bit differently to get this work, although I might still try to figure out why my original way wasn't working.
I had to add the toolbar feature of kendo and make the cell editable:
.ToolBar(toolBar =>
{
toolBar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))