I'm trying to carry both master & child data to the server from a kendo heirarchical grid.
Here is my Grid:
//To Define Data Source for Yearly Holiday Kendo Grid
var YearlyHolidayDataSource = new kendo.data.DataSource({
schema: {
model: {
id: "HLDY_CODE",
fields: {
HLDY_SLNO: { editable: true },
HLDY_DATE: { editable: true },
HLDY_DAY: { editable: true },
HLDY_NAME: { editable: true },
HLDY_TYPE: { editable: true },
HLDY_STUS: { editable: true },
HLDY_DFIN_TYPE: { editable: true },
HLDY_REM: { editable: true }
}
}
},
pageSize: 10
});
//To Define Columns for Yearly Holiday Kendo Grid
var YearlyHolidayGrid = $("#YearlyHolidayGrid").kendoGrid({
dataSource: YearlyHolidayDataSource,
pageable: true,
editable: true,
detailInit: detailInit,
selectable: "row",
navigatable: true,
filterable: true,
sortable: true,
height: 400,
columns: [
{ field: "HLDY_SLNO", title: "SL", width: "50px" },
{ field: "HLDY_DATE", title: "Date", width: "60px" },
{ field: "HLDY_DAY", title: "Day", width: "60px" },
{ field: "HLDY_NAME", title: "Holiday Name", width: "200px", attributes: { "class": "HolidayName"} },
{ field: "HLDY_TYPE", title: "Holiday Type", width: "90px" },
{ field: "HLDY_STUS", title: "Holiday Status", width: "80px", editor: YearlyHolidayStatus },
{ field: "HLDY_DFIN_TYPE", title: "Defined as", width: "70px", editor: YearlyHolidayDefinedAs },
{ field: "HLDY_REM", title: "Remarks", width: "80px" },
{ command: [{ name: "DeltedRow", text: "Delete"}], title: "Delete", width: "90px" }
]
});
var DetailsGrid;
function detailInit(e) {
DetailsGrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: SpecialHolidayDataSource,
pageable: true,
editable: true,
selectable: "row",
navigatable: true,
filterable: true,
sortable: true,
height: 200,
toolbar: ["create"],
columns: [
{ field: "HLDY_SPCL_SLNO", title: "SL", width: "50px" },
{ field: "HLDY_DATE", title: "Date", width: "100px" },
{ field: "DIVI_NAME", title: "Division", width: "100px", attributes: { "class": "DivisionName" } },
{ field: "UNIT_NAME", title: "Unit", width: "100px", attributes: { "class": "UnitName" } },
{ field: "PLANT_NAME", title: "Plant", width: "100px", attributes: { "class": "PlantName" } },
{ field: "DEPT_NAME", title: "Department", width: "100px", attributes: { "class": "DepartmentName" } },
{ field: "SECT_NAME", title: "Section", width: "100px", attributes: { "class": "SectionName" } },
{ field: "ACTIVE_STATUS", title: "Active Status", width: "100px", editor: ddlActiveInactive },
{ field: "HLDY_SPCL_REM", title: "Remarks", width: "100px" },
{ command: [{ name: "DeltedRow", text: "Delete" }], title: "Delete", width: 100 }
]
}).data("kendoGrid");
}
Here is my two javascript object to carry the values.
// Java Script object to carry the form data from UI to Server
var Yearly_Holiday = {"HLDY_SLNO": "", "HLDY_DATE": "", "HLDY_NAME": "", "HLDY_TYPE": "", "HLDY_STUS": "", "HLDY_DFIN_TYPE": "", "HLDY_REM": "", "Special_Holiday": ""};
var Special_Holiday = { "HLDY_SPCL_SLNO": "", "HLDY_DATE": "", "DIVI_CODE": "", "UNIT_CODE": "", "PLANT_CODE": "", "DEPT_CODE": "", "SECT_CODE": "", "HLDY_SPCL_REM": "", "ActiveStatus": "" };
Here is my Code for Save Method:
function Save() {
if (saveStatus == 0) {
var MasterDataSource = $("#YearlyHolidayGrid").data("kendoGrid").dataSource;
MasterData = MasterDataSource.data(); // Get Master Grid Data
var ChildDataSource = DetailsGrid.data("kendoGrid").dataSource;
ChildData = ChildDataSource.data(); // Get Detail Grid Data
Yearly_Holiday.Special_Holiday = [];
Yearly_Holiday.CrudStatus = $("#CrudStatus").val();
for (var i = MasterData.length - 1; i >= 0; i--) {
Yearly_Holiday.HLDY_DATE = MasterData[i].HLDY_DATE;
Special_Holiday.DIVI_CODE = ChildData[i].DIVI_CODE;
Yearly_Holiday.Special_Holiday.push(Special_Holiday);
}
$.ajax({
url: '/HRMC_HDL01/HRMF_HDL01',
data: JSON.stringify(Yearly_Holiday),
type: 'POST',
contentType: 'application/json;',
dataType: 'json',
success: function (response) {
}
});
}
};
I can read the master values but not the detail values.