Geek Answers Handbook

How to transfer master and child data from a hierarchical kendo grid?

I am trying to transfer both the main and the child information to the server from the hierarchical kendo 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 are two javascript objects for transferring 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 the 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 basic values, but not details.

+4
source share
1 answer

A couple of questions related to the search child grid datasource

  • Each row of the main grid contains a child grid
  • The default mesh shows a single child mesh

, , . . , .

plunker <div class="childGrid">

function detailInit(e) {
  $('<div class="childGrid"></div>').appendTo(e.detailCell).kendoGrid({
    dataSource: {
      //others code

, datasource

$(".childGrid").each(function(index, element){
  console.log($(element).data("kendoGrid").dataSource.data());
});
0

More articles: