jQWidgets jqxTreeGrid getRows() Method

Last Updated : 29 Jun, 2022

jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxTreeGrid is used for representing data in a tree-like structure. This widget is useful for displaying multi-column of hierarchical data, data paging, sorting and filtering, data editing, column resizing, fixed columns, conditional formatting, aggregates, and rows selection. These widgets also read and display the data from any type of data source such as XML, JSON, Array, CSV, or TSV.

The getRows() method is used to return an array of rows of the specified jqxTreeGrid. There are some reserved members of the returned array of rows:

checked: The checked state of the row is returned. It accepts the boolean value.
expanded: The expanded state of the row is returned. It accepts the boolean value.
icon: The icon URL of the row is returned. It accepts the string value.
leaf: The existence of the row’s leaf in the hierarchy is returned. It accepts the boolean value.
level: The hierarchy level of the row is returned. It accepts the integer value.
parent: It returns null for root rows else returns the object of the parent row. It accepts the object.
records: This is an array. Here, the sub-rows collection of the row is returned.
selected: The selected state of the row is returned. It accepts the boolean value.
uid: The unique ID or key of the row is returned. It can be the number or string value.

Syntax:

$('Selector').jqxTreeGrid('getRows');

Parameters: This method does not accept any parameters.

Return Values: This method returns an array of the specified jqxTreeGrid.

Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.

<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery.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/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdatatable.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtreegrid.js”></script>

Example: The below example illustrates the jQWidgets jqxTreeGrid getRows() method.

HTML

<!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.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/jqxlistbox.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxdropdownlist.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxdatatable.js"> 
    </script> 
    <script type="text/javascript" 
            src="jqwidgets/jqxtreegrid.js"> 
    </script> 
  </head> 
  
  <body> 
    <center> 
      <h1 style="color: green">GeeksforGeeks</h1> 
      <h3> 
        jQWidgets jqxTreeGrid getRows() Method 
      </h3> 
      <div id="jqxTreeGrid" 
           style="margin: 25px"> 
      </div> 
      <input
        type="button"
        style="margin: 20px"
        id="button_for_getRows"
        value="Get the details of all the Rows"/> 
      <div id="log"></div> 
        
      <script type="text/javascript"> 
        $(document).ready(function () { 
          var A = [ 
            { 
              ID: 1, 
              Employee_Name: "Amit", 
              Company: "GeeksforGeeks", 
              Designation: "Content Writer", 
              expanded: true, 
              A1: [ 
                { 
                  ID: 2, 
                  Employee_Name: "Sumit", 
                  Company: "Amazon", 
                  Designation: "Software Engineer", 
                }, 
                { 
                  ID: 3, 
                  Employee_Name: "Vivek", 
                  Company: "Apple", 
                  Designation: "Product Manager", 
                  expanded: true, 
                  A1: [ 
                    { 
                      ID: 4, 
                      Employee_Name: "Soni", 
                      Company: "Flipkart", 
                      Designation: "HR", 
                    }, 
                  ], 
                }, 
              ], 
            }, 
          ]; 
  
          var Data_Source = { 
            dataFields: [ 
              { 
                name: "ID", 
              }, 
              { 
                name: "Employee_Name", 
              }, 
              { 
                name: "Company", 
              }, 
              { 
                name: "Designation", 
              }, 
              { 
                name: "A1", 
                type: "array", 
              }, 
              { 
                name: "expanded", 
              }, 
            ], 
            hierarchy: { 
              root: "A1", 
            }, 
            id: "ID", 
            localData: A, 
          }; 
  
          var Data = new $.jqx.dataAdapter(Data_Source); 
  
          $("#jqxTreeGrid").jqxTreeGrid({ 
            source: Data, 
            editable: true, 
            ready: function () { 
              $("#jqxTreeGrid").jqxTreeGrid("expandRow", "1"); 
              $("#jqxTreeGrid").jqxTreeGrid("expandRow", "3"); 
            }, 
            columns: [ 
              { 
                text: "Employee_Name", 
                align: "center", 
                dataField: "Employee_Name", 
                width: 140, 
              }, 
              { 
                text: "Company", 
                align: "center", 
                dataField: "Company", 
                width: 150, 
              }, 
              { 
                text: "Designation", 
                align: "center", 
                dataField: "Designation", 
                width: 150, 
              }, 
            ], 
          }); 
          $("#button_for_getRows").jqxButton({ 
            width: 300, 
            height: 35, 
          }); 
          $("#jqxTreeGrid").jqxTreeGrid("selectRow", 1); 
          $("#button_for_getRows").click(function () { 
                    var Row_Details = $("#jqxTreeGrid").jqxTreeGrid("getRows"); 
                    var rd = ""; 
                    var tT = function (Row_Details) { 
                        for (var i = 0; i < Row_Details.length; i++) { 
                            rd += Row_Details[i].Employee_Name  
                                + "- " 
                                + Row_Details[i].Company 
                                + " \n"; 
                            if (Row_Details[i].records) { 
                                tT(Row_Details[i].records); 
                            } 
                        } 
                    }; 
                    tT(Row_Details); 
                    $("#log").html(rd); 
                }); 
            }); 
        </script> 
    </center> 
</body> 
</html>