Nested Grid using JSON and AJAX to get data?

[MatthewVParticipant]

I have been, unsuccessfully, trying to follow your demo and adapt it to using JSON results to get a nested grid. Is there a cleaner demo that uses JSON somewhere or can someone give me a barebones JSON nested grid code base I can work from? My goal is to have a grid that gets the top level results from JSON and then when each row is expanded a AJAX call is done to get a new JSON result back. I am not looking to add pictures, custom render anything, or edit any data. I have already been able to build out the basic Grid but can not figure out the right way to modify it so the rows become expandable and then when they are expanded they fill the sub-grid with the JSON results of an AJAX call

[MatthewVParticipant]

Based off another post I found about 30 minutes after making this one I have code that looks like it should work but the rows are not expanding when clicking on the blank column at the start of each row.

$(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" }
        ]
    });
});

I know the sub-grid is calling into the same data as the top grid. I am doing this for simplicity at this point as I just want to get the grid working with data points I know work already

[HristoParticipant]

Hello MatthewV,

I would like to suggest you to look one similar topic of our forum.
Hope this helps.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[MatthewVParticipant]

That does not help at all, first off that is a very complex example and I am not doing anything that complex. Second that is using local array and I want to use JSON. I guess my question is not clear and since I can’t edit questions I will just start another one.

[HristoParticipant]

Hello MatthewV,

Please, provide us an simple JSON data to reproduce this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[MatthewVParticipant]

[{“EmployeeID”:151,”Employee”:”Matthew Verstraete”,”WeekOfDate1″:”\/Date(1474689600000)\/”,”HoursWorked1″:40.00,”Status1″:”Submitted”,”WeekOfDate2″:”\/Date(1475294400000)\/”,”HoursWorked2″:17.50,”Status2″:”New”,”PTO”:0.00}]

That is the JSON for the first level of the grid.

[HristoParticipant]

Hello MatthewV,

I would like to suggest you first to use rowdetailstemplate thus you could easy to select element that will be used for the next inner grid.
Also in this shared json data I do not see indicator that shows on which level is this item or has this item ‘children’.
Please take a look this example:
https://www.jseditor.io/?key=jqxgrid-nestedgrid

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[MatthewVParticipant]

As stated in my first post, I want to make it so that when the row is expanded it does an AJAX call to get the JSON data for the sub grid. Is this possible and if so how?

[HristoParticipant]

Hello MatthewV,

You could try to achieve this with your custom logic. Could use the examples above to create it.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[dan123Participant]

Thanks

[Author]

Posts