4

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.

Badhon Jain
  • 938
  • 6
  • 20
  • 38
  • what do you mean you can't read details value ? `ChildDataSource.data()` returns nothing right ? – Tasnim Reza Jan 07 '14 at 06:30
  • Yes, I need to find a way to fetch the child data. – Badhon Jain Jan 07 '14 at 06:41
  • you should add some more explanation about your expectations and what you see instead; did you try debugging and what were the results? lastly: you increase your chances of getting an answer by copying all of this into JSBin or JSFiddle – Lars Höppner Apr 26 '14 at 10:14
  • I'm not very used to JSBin or JSFiddle, but I will try. By the way, I want to read a kendo hierarchical grid & carry both the master & child data to the server through ajax call. I'll try to put it into JSBin. – Badhon Jain Apr 26 '14 at 10:58
  • Hi, For master grid have a change="OnChange" in this event you will get the master grid's row details once you open the hierarchy and when you submit the child grids form in that event you can send Master Grids row details. – Mohammed Farooq Apr 28 '14 at 04:23

1 Answers1

0

Couple of issues are related to find child grid datasource

  • Each master grid row contain a child grid
  • Grid by default show single child grid

So if you try to find child grid, it always give you the expanded grids. Initially it give you single child grid. If you want all child grids you must expand all manually or programmatically.

See this plunker here i render the child grid inside a <div class="childGrid">

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

Then looping to get all the child grids datasource

$(".childGrid").each(function(index, element){
  console.log($(element).data("kendoGrid").dataSource.data());
});
Tasnim Reza
  • 6,058
  • 3
  • 25
  • 30