jQuery UI Widgets Forums Grid How to find the hierarchy level of nested grid?

This topic contains 2 replies, has 2 voices, and was last updated by  karthic_cdm 9 years, 6 months ago.

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

  • karthic_cdm
    Participant

    Hi,
    I have nested grid like below.
    Level1 record1
    ………………………….Level2 record1
    ………………………….Level2 record2
    ………………………….Level2 record3
    …………………………………………………….. Level3 record1
    …………………………………………………….. Level3 record2
    I need to find these level number in grid.
    Please help me on this
    Thanks in advance.

    Thanks,
    Karthic


    Dimitar
    Participant

    Hi Karthic,

    Please check out the following example. In it, the (nested) grid’s level is alerted on row click:

    <!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="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // 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 < 10; 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);
    
                var initlevel2 = function (index) {
                    var grid = $($.find('#grid' + index));
                    if (grid != null) {
                        var dataAdapter = new $.jqx.dataAdapter(source);
                        grid.jqxGrid({ rowdetails: true, initrowdetails: initlevel3, source: dataAdapter, theme: theme, width: 600, height: 200,
                            rowdetailstemplate: { rowdetails: "<div id='subgrid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                            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' }
    			            ]
                        });
                        grid.on('rowclick', function (event) {
                            alert('Level 1');
                        });
                    }
                }
    
                var initlevel3 = function (index) {
                    var grid = $($.find('#subgrid' + index));
                    var dataAdapter = new $.jqx.dataAdapter(source);
                    if (grid != null) {
                        grid.jqxGrid({ source: dataAdapter, theme: theme, width: 530, 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' }
                			]
                        });
                        grid.on('rowclick', function (event) {
                            alert('Level 2');
                        });
                    }
                }
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 670,
                    height: 365,
                    source: dataAdapter,
                    theme: theme,
                    rowdetails: true,
                    initrowdetails: initlevel2,
                    rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                    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' }
    	            ]
                });
    
                $('#jqxgrid').on('rowclick', function (event) {
                    alert('Level 0');
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    karthic_cdm
    Participant

    Hi Dimitar,
    Thanks for your help.

    Thanks,
    Karthic

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

You must be logged in to reply to this topic.