I'm trying to create a hierarchical grid in kendo and this is what i have so far - > https://plnkr.co/edit/tJvRD0CFqZ1gSYEB
<script>
function onChange(e) {
var dataItem = e.sender.dataItem();
};
var data = [
]
index = data.length + 1;
$("#grid").kendoGrid({
dataSource: {
transport: {
read: function (o) {
o.success(data);
},
update: function (o) {
o.success();
},
destroy: function (o) {
var d = data.filter(data => data.id == o.data.id);
var removeIndex = data.map(data => data.id).indexOf(o.data.id);
if (removeIndex >= 0) {
data.splice(removeIndex, 1);
}
o.success();
},
create: function (o) {
var record = o.data;
record.id = index;
index++;
data.push(o.data);
Object.assign(o.data, { courses: [] })
o.success(record);
}
},
schema: {
model: {
id: "id",
fields: {
id: { type: "number", editable: false },
name: {
type: "string",
validation: {
required: true,
duplicate: function (input) {
debugger;
if (input.is("[name='name']") && input.val() != "") {
var name = input.val();
var grid = $("#grid").data('kendoGrid');
var view = grid.dataSource.view();
var name_edit = grid.editable.options.model.name;
var valid = true;
for (var i = 0; i < view.length; i++) {
if ((name == view[i].name && (name != name_edit))) {
valid = false;
input.attr("data-duplicate-msg", "Duplicates not allowed.");
break;
}
}
return valid;
}
return true;
},
},},
isActive: { type: "boolean" },
description: { type: "string" }
}
}
}
},
editable: "popup",
toolbar: [{ name: "create", text: "Add Sub Group" }],
columns: [
"name",
"isActive",
"description",
{ command: ["edit", "destroy"] }
],
detailInit: detailInit
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
transport: {
read: function (o) {
var subdata = [
]
o.success(e.data.courses);
},
update: function (o) {
var parentid = data.filter(x => x.id == e.data.id)[0];
var parentIndex = data.map(function (img) { return img.id; }).indexOf(parentid.id);
var childIndex = data[parentIndex].courses.map(function (img) { return img.id; }).indexOf(o.data.id);
data[parentIndex].courses[childIndex].name = o.data.name;
data[parentIndex].courses[childIndex].coursetext= o.data.coursetext;
data[parentIndex].courses[childIndex].courseteacher= o.data.courseteacher;
o.success();
},
destroy: function (o) {
debugger;
var parentid = data.filter(x => x.id == e.data.id)[0];
var parentIndex = data.map(function (img) { return img.id; }).indexOf(parentid.id);
var childIndex = data[parentIndex].courses.map(function (img) { return img.id; }).indexOf(o.data.id);
if (childIndex >= 0) {
data[parentIndex].courses.splice(childIndex, 1);
}
o.success();
},
create: function (o) {
var record = o.data;
record.id = index;
index++;
var dataobj = data.filter(x => x.id == e.data.id)[0];
dataobj.courses.push(record);
o.success(record);
}
},
schema: {
model: {
id: "id",
fields: {
id: { type: "number", editable: false },
name: {
type: "string",
validation: {
required: true,
duplicate: function (input) {
if (input.is("[name='name']") && input.val() != "") {
var name = input.val();
var grid = $("#grid").data('kendoGrid');
var view = grid.dataSource.view();
var parentid = grid._data.filter(x => x.name == e.data.name)[0];
var parentIndex = grid._data.map(function (img) { return img.id; }).indexOf(parentid.id);
var view = grid._data[parentIndex].courses;
var valid = true;
for (var i = 1; i < view.length; i++) {
if ((name == view[i].name)) {
valid = false;
input.attr("data-duplicate-msg", "Duplicates not allowed.");
break;
}
}
return valid;
}
return true;
},
},
},
coursename: { type: "string" },
courseteacher: { type: "string" }
}
}
}
},
editable: "popup",
toolbar: [{ name: "create", text: "Add Courses" }],
columns: [
"name",
"coursename",
{ field: "courseteacher", title: "courseteacher"},
{ command: ["edit", "destroy"] }
]
});
}
</script>
What I'm trying to achieve is, i want to prevent duplicate "name" to be added. I have placed validation in the parent grid and it's working fine. Now i want to have similar validation in the child grid. I'm unable to get the current editable row in the child grid. I fetched it through "var name_edit = grid.editable.options.model.name;" in the parent grid and I need an alternate for the child grid.
I would appreciate if any help in this as this is critical for my project TIA.
I created the validation function outside and for the child grid, I first save the instance within the edit event and then pass the input and the child grid instance to it and it works.
edit:function(e){
childGrid = e.sender;
},
// ...
duplicate: function (input) {
return validateDuplicate(input, childGrid);
}