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.
-
Author
-
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,
KarthicHi 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,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Thanks for your help.Thanks,
Karthic -
AuthorPosts
You must be logged in to reply to this topic.