Nested Grid with inline data - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: grid, in-line, inline, jqxgrid, local, nested, nested grids, source

This topic contains 2 replies, has 2 voices, and was last updated by ToddHaddaway 11 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Nested Grid with inline data Posts

November 14, 2013 at 4:22 pm Nested Grid with inline data #32652

ToddHaddaway

Participant

Greetings,

I’m new to jqwidgets and have found them very powerful and well documented. Thanks 🙂

For my application, I want a grid that contains a list of students. As a nested grid, I want to provided a list of their current classes. The examples of nested grids that I have seen make use of external files as the data source. What I would like to do is have my php code fetch the source data as the page is being built. So, with that said, I was wondering if there is an example of a nested grid where the data is provided “in-line” rather than referenced as an external file?

I have a drop down that I built with the data in-line (code below). I’m providing it as an example of what I mean.

Thanks for any input or direction 🙂

$(document).ready(function () {
var sourceMajor = [
“– Primary Major –“,
“Admin Sciences Acctng”,
“Africana Studies”,
“American Studies”,
“Ancient Studies”,
“Anthropology” ];
// Create a jqxDropDownList
$(“#jqxMajor”).jqxDropDownList({ source: sourceMajor, selectedIndex: 0, width: ‘300px’ });

});

November 15, 2013 at 6:02 am Nested Grid with inline data #32678

Dimitar

Participant

Hello ToddHaddaway,

Here is an example, based on the demo Nested Grids. The data for the nested grids is a local array.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = "";
            var url = "../sampledata/employees.xml";
            var source =
            {
                datafields: [
                    { name: 'FirstName' },
                    { name: 'LastName' },
                    { name: 'Title' },
                    { name: 'Address' },
                    { name: 'City' }
                ],
                root: "Employees",
                record: "Employee",
                id: 'EmployeeID',
                datatype: "xml",
                async: false,
                url: url
            };
            var employeesAdapter = new $.jqx.dataAdapter(source);
            // create nested grid.
            var initrowdetails = function (index, parentElement, gridElement, record) {
                var id = record.uid.toString();
                var grid = $($(parentElement).children()[0]);
                var data = [
                    ["Maths", "Erwin Beurer"],
                    ["Physics", "Robert Newman"],
                    ["Phylosophy", "Eric Donovan"]
                ];
                var inlineSource = {
                    datafields: [
                        { name: 'class', type: 'string', map: '0' },
                        { name: 'teacher', type: 'string', map: '1' }
                    ],
                    id: 'id',
                    localdata: data,
                    datatype: 'array'
                };
                if (grid != null) {
                    grid.jqxGrid({ source: inlineSource, theme: theme, width: 600, autoheight: true,
                        columns: [
                          { text: 'Class', datafield: 'class', width: "60%" },
                          { text: 'Teacher', datafield: 'teacher', width: "40%" }
                       ]
                    });
                }
            }
            var photorenderer = function (row, column, value) {
                var name = $('#jqxgrid').jqxGrid('getrowdata', row).FirstName;
                var imgurl = '../../images/' + name.toLowerCase() + '.png';
                var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';
                return img;
            }
            var renderer = function (row, column, value) {
                return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
            }
            // creage jqxgrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                height: 365,
                source: source,
                theme: theme,
                rowdetails: true,
                rowsheight: 35,
                initrowdetails: initrowdetails,
                rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 120, rowdetailshidden: true },
                ready: function () {
                    $("#jqxgrid").jqxGrid('showrowdetails', 1);
                },
                columns: [
                      { text: 'Photo', width: 50, cellsrenderer: photorenderer },
                      { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer },
                      { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer },
                      { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer },
                      { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer },
                      { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer }
                  ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 15, 2013 at 5:24 pm Nested Grid with inline data #32727

ToddHaddaway

Participant

Perfect! Thanks 🙂

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.