or
Hello,
I want to implement endless scroll for both master and detail grid. Is that possible? I tried to use detail grid as below but nothing worked.
@(Html.Kendo().Grid<AspNetCoreGrid.Models.OrderViewModel>() .Name("grid") .Scrollable(sc => sc.Endless(true))
.Scrollable(s => s.Height("100px"))
)
Try to use the Drag and Drop to reorder the rows.
I'm stuck in an error that I'm not figuring out.
The error: Uncaught TypeError: Cannot read property 'insert' of undefined
The line: grid.datasource.insert(newIndex, dataItem );
I'm sure the datasource has data, since the "console.log(dataItem)" returns the object model
var Material = new kendo.data.Model.define({
id: "NR_position",
fields: {
NR_position: { type: "number" },
CD_Material: { type: "number" },
NM_Material: { type: "string" }
}
});
var Controller = {
dataSource: {
ListMat: new kendo.data.DataSource({
transport: { read: { url: matList, type: "POST" } },
model: Material,
dataType: "json",
url: "data/person.json"
})
},
init: function () {
var grid = $("#grdMatOrder").kendoGrid({
dataSource: Controller.dataSource.ListMat,
columns: [
{ field: "NR_position", title: "Order" },
{ field: "CD_Material", title: "Code" },
{ field: "NM_Material", title: "Name" }
]
}).data("kendoGrid");
grid.table.kendoSortable({
filter: ">tbody >tr",
hint: function (element) {
var table = $('<tr colspan=4" class="placeholder></ tr>'), hint;
table.append(element.clone());
table.css("opacity", 0.7)
return table;
},
change: function (e) {
var skip = grid.dataSource.skip(),
oldIndex = e.oldIndex + skip,
newIndex = e.newIndex + skip,
data = grid.dataSource.data(),
dataItem = grid.dataSource.getByUid(e.item.data("uid"));
console.log(dataItem)
grid.dataSource.remove(dataItem);
grid.datasource.insert(newIndex, dataItem );
}
});
}
};
$(document).ready(function () {
Controller.init();
});