jQWidgets Forums

Tagged: nested grids

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 8 months ago.

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

Author

Nesting and Grouping of the Grid Posts

June 19, 2012 at 7:48 am Nesting and Grouping of the Grid #5100

SRK

Participant

Hi,

Using Jqx grid ,Is it possible to display mulitple grids in the same level on expanding of nth level.

Regards,
/Srk

June 19, 2012 at 2:20 pm Nesting and Grouping of the Grid #5112

Peter Stoev

Keymaster

Hi Srk,

You can use the same approach as in our “nested grids” demo, but you will need to add more than 1 DIV tag when you define the rows details.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 22, 2012 at 10:36 am Nesting and Grouping of the Grid #5234

SRK

Participant

Thanks for the Reply Peter

In the previous post you have suggested to add one extra DIV tag to display the 2nd grid in the same level.

My scenario is when the first level of the grid is expanded , it should display two individual grids with different columns in the second level .
and on further expanding of Individual grids it should display next level of hierarchy data. could you provide me some inputs how to achieve this…

Regards,
/Srinivas

June 24, 2012 at 8:22 am Nesting and Grouping of the Grid #5267

Peter Stoev

Keymaster

Hi Srinivas,

Here’s a basic sample which demonstrates how to display 2 individual Grids in the second level.

<!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.7.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">
        $(document).ready(function () {
            var generateData = function (rowscount) {
                // prepare the data
                var data = new Array();
                var firstNames =
                [
	                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
                ];
                var lastNames =
                [
	                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
                ];
                var productNames =
                [
	                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
                ];
                var priceValues =
                [
	                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
                ];
                for (var i = 0; i < rowscount; i++) {
                    var row = {};
                    var productindex = Math.floor(Math.random() * productNames.length);
                    var price = parseFloat(priceValues[productindex]);
                    var quantity = 1 + Math.round(Math.random() * 10);
                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                    row["productname"] = productNames[productindex];
                    row["price"] = price;
                    row["quantity"] = quantity;
                    row["total"] = price * quantity;
                    data[i] = row;
                }
                var source =
                {
                    localdata: data,
                    datatype: "array"
                };
                var dataAdapter = new $.jqx.dataAdapter(source);
                return dataAdapter;
            }
            // create nested grid.
            var initlevel2 = function (index) {
                var grid = $($.find('#topgrid' + index));
                var bottomgrid = $($.find('#bottomgrid' + index));
                // init the top grid.
                grid.jqxGrid({ source: generateData(20), width: 600, height: 200,
                    columns: [
			              { text: 'First Name', dataField: 'firstname', width: 100 },
			              { text: 'Last Name', dataField: 'lastname', width: 100 },
			              { text: 'Product', dataField: 'productname', width: 180 },
			              { text: 'Quantity', dataField: 'quantity', cellsalign: 'right' }
			            ]
                });
                // init the bottom grid.
                bottomgrid.jqxGrid({ source: generateData(10), width: 600, height: 200,
                    columns: [
			              { text: 'First Name', dataField: 'firstname', width: 100 },
			              { text: 'Last Name', dataField: 'lastname', width: 100 },
			              { text: 'Product', dataField: 'productname', width: 180 },
			              { text: 'Quantity', dataField: 'quantity', cellsalign: 'right' }
			            ]
                });
            }
            // set rows details.
            $("#jqxgrid").bind('bindingcomplete', function (event) {
                if (event.target.id == "jqxgrid") {
                    $("#jqxgrid").jqxGrid('beginupdate');
                    var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
                    for (i = 0; i < datainformation.rowscount; i++) {
                        var hidden = i > 0 ? true : false;
                        $("#jqxgrid").jqxGrid('setrowdetails', i, "<div id='topgrid" + i + "' style='margin: 10px;'></div><div id='bottomgrid" + i + "' style='margin: 10px;'></div>", 420, hidden);
                    }
                    $("#jqxgrid").jqxGrid('endupdate');
                }
            });
            // creage jqxgrid
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                height: 365,
                source: generateData(10),
                rowdetails: true,
                initrowdetails: initlevel2,
                columns: [
		            { text: 'First Name', dataField: 'firstname', width: 100 },
		            { text: 'Last Name', dataField: 'lastname', width: 100 },
		            { text: 'Product', dataField: 'productname', width: 180 },
		            { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
		            { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
		            { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
	            ]
            });
        })
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.