Sub-Grid with JSON AJAX results, how to?

[MatthewVParticipant]

I am trying to make a basic grid that contains a single level of sub-grid. Both grids need to get there information from JSON results, I have gotten the basic grid to work but I can not get the sub to appear. There is a blank column on the left side I would expect to see the arrow to indicate there is a sub grid and when I click in that box nothing happens.

$(document).ready(function ()
{
    var firstLevelEmployees = new $.jqx.dataAdapter({
        dataType: "json",
        dataFields: [
            { name: "Employee", type: "string" },
            { name: "WeekOfDate1", type: "date" },
            { name: "HoursWorked1", type: "number" },
            { name: "Status1", type: "string" },
            { name: "WeekOfDate2", type: "date" },
            { name: "HoursWorked2", type: "number" },
            { name: "Status2", type: "string" },
            { name: "PTO", type: "number" }
        ],
        id: "EmployeeID",
        url: "TimeOverviewGrid"
    });

    $("#TimeOverviewGrid").jqxGrid({
        autoheight: true,
        width: 900,
        source: firstLevelEmployees,
        rowdetails: true,
        initrowdetails: function (index, parentElement, gridElement, record)
        {
            var id = record.uid.toString();
            var grid = $($(parentElement).children()[0]);
            var secondLevelEmopyees = new $.jqx.dataAdapter({
                dataType: "json",
                dataFields: [
                    { name: "Employee", type: "string" },
                    { name: "WeekOfDate1", type: "date" },
                    { name: "HoursWorked1", type: "number" },
                    { name: "Status1", type: "string" },
                    { name: "WeekOfDate2", type: "number" },
                    { name: "HoursWorked2", type: "number" },
                    { name: "Status2", type: "string" },
                    { name: "PTO", type: "number" }
                ],
                id: "EmployeeID",
                url: "TimeOverviewGrid"
            });
            if (grid != null)
            {
                grid.jqx({
                    source: secondLevelEmopyees,
                    columns: [
            { text: "Employee", dataField: "Employee", width: 200 },
            { text: "Week Of", dataField: "WeekOfDate1" },
            { text: "Hours Worked", dataField: "HoursWorked1", width: 100 },
            { text: "Status", dataField: "Status1", width: 75 },
            { text: "Week Of", dataField: "WeekOfDate2", },
            { text: "Hours Worked", dataField: "HoursWorked2", width: 100 },
            { text: "Status", dataField: "Status2", width: 75 },
            { text: "Estimated PTO", dataField: "PTO" }
                    ]
                });
            }
        },
        columns: [
            { text: "Employee", dataField: "Employee", width: 200 },
            { text: "Week Of", dataField: "WeekOfDate1", },
            { text: "Hours Worked", dataField: "HoursWorked1", width: 100 },
            { text: "Status", dataField: "Status1", width: 75 },
            { text: "Week Of", dataField: "WeekOfDate2", },
            { text: "Hours Worked", dataField: "HoursWorked2", width: 100 },
            { text: "Status", dataField: "Status2", width: 75 },
            { text: "Estimated PTO", dataField: "PTO" }
        ]
    });
});

[HristoParticipant]

Hello MatthewV,

This is duplicate post. Please, take a look at this:
http://www.jqwidgets.com/community/topic/nested-grid-using-json-and-ajax-to-get-data/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts