Hi There,
I am trying to implement hierarchy grid and want to allow Create and update on both master and child grid. Data in hierarchy grid populated perfectly. But mentioned below are the problems with Create and Edit feature. I am using Inline editing.
1) When I click on Edit button, selected row opened in editable form with Update and Cancel button, but nothing happens when I click on Update or Cancel, both button not working. This issue is both on Master and Child grid.
2) If I click on "Add New Record" on master grid, then it tries to bind the child grid as well and also new row added but not in editable format. It adds a blank row with Edit button and after that "Edit" button not works not only of this row but of rows of entire grid.
3) If I try to put create and update method in child grid then no data is populated in child Grid.
I have tried to look out for solution but with no luck. Below is the code, if you guys want to check.
<
link
href
=
'@Url.Content("~/Content/kendo.common.min.css")'
rel
=
"stylesheet"
type
=
"text/css"
/>
<
link
href
=
'@Url.Content("~/Content/kendo.default.min.css")'
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
'@Url.Content("~/Scripts/kendo.all.min.js")'
type
=
"text/javascript"
></
script
>
<
div
id
=
"example"
>
<
div
id
=
"userDefinedGrid"
></
div
>
<
script
>
$(document).ready(function () {
masterDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/MCSSIF/Template/GetUserDefinedType",
type: 'POST',
dataType: "json"
},
update: function (options) {
alert('not firing');
},
create: function (options) {
alert('not firing');
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
pageSize: 20,
autoSync: true,
schema: {
data: function (response) {
return response.UserTypes;
},
total: function (response) {
return response.UserTypes.length;
},
model: {
id: "UserDefinedTypeID",
fields: {
UserDefinedTypeID: { editable: false, nullable: true },
UserDefinedTypeName: { validation: { required: true } },
Active: { type: "boolean" },
CreatedBy: { editable: false },
CreatedOn: { editable: false },
ModifiedBy: { editable: false },
ModifiedOn: { editable: false },
}
}
}
});
$("#userDefinedGrid").kendoGrid({
dataSource: masterDataSource,
height: 600,
filterable: true,
sortable: true,
pageable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
detailInit: detailInit,
dataBound: function () {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
toolbar: ["create"],
columns: [
{ command: ["edit"], title: " ", width: "100px" },
{ field: "UserDefinedTypeName", title: "User Defined Type", width: "200px" },
{ field: "Active", title: "Active", width: "100px" },
{ field: "CreatedBy", title: "Created By", width: "150px" },
{ field: "CreatedOn", title: "Created On", width: "150px" },
{ field: "ModifiedBy", title: "Modified By", width: "150px" },
{ field: "ModifiedOn", title: "Modified On", width: "150px" }
],
editable: "inline"
});
});
function detailInit(e) {
$("<
div
/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "POST",
transport: {
read: {
url: "/MCSSIF/Template/GetUserDefinedTypeOptions",
type: 'POST',
dataType: "json",
data: { userDefinedTypeID: e.data.UserDefinedTypeID }
}
},
schema: {
data: function (response) {
return response.UserTypeValues;
},
model: {
id: "UserDefinedTypeOptionID",
fields: {
UserDefinedTypeOptionID: { editable: false, nullable: true },
UserDefinedTypeID: { editable: false },
Sequence: { editable: false },
OptionText: { validation: { required: true } },
Active: { type: "boolean" },
CreatedBy: { editable: false },
CreatedOn: { editable: false },
ModifiedBy: { editable: false },
ModifiedOn: { editable: false },
}
}
}
},
filterable: true,
scrollable: false,
sortable: true,
toolbar: ["create"],
columns: [
{ command: ["edit"], title: " ", width: "100px" },
{ field: "OptionText", title: "User Defined Type Option", width: "200px" },
{ field: "Active", title: "Active", width: "100px" },
{ field: "CreatedBy", title: "Created By", width: "150px" },
{ field: "CreatedOn", title: "Created On", width: "150px" },
{ field: "ModifiedBy", title: "Modified By", width: "150px" },
{ field: "ModifiedOn", title: "Modified On", width: "150px" }
],
editable: "inline"
});
}
</
script
>
</
div
>
Please update me where I am doing wrong ASAP.
Thanks,
Sandeep