Open In App
Related Articles

jQWidgets jqxTreeGrid addRow() Method

Improve Article
Save Article
Like Article

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 addRow() method is used to add a new row at the start or the end of the jqxTreeGrid.


$("#treeGrid").jqxTreeGrid('addRow', rowKey, {rowData}, rowPosition);

Parameters: This method accepts three parameters that are illustrated below:

  • rowKey: This is the unique Id that will identify the newly added row. If its value is null, then the jqxTreeGrid will create a unique key.
  • rowData: This is the data of the new row.
  • rowPosition: This is the position of the newly added row. It accepts two values one is is “first” and another is “last”. Its default value is “last”.

Return Value: This method does not return any values.

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 addRow() method. In the below example, the new row is added at the end of the TreeGrid and this new row will keep on adding on clicking the specified button.


<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" 
          type="text/css" />
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
    <script type="text/javascript" 
        <h1 style="color: green;">
            jQWidgets jqxTreeGrid addRow() Method
        <div id="jqxTreeGrid" style="margin: 25px;">
        <input type="button" style="margin: 20px;" 
               value="Add a new row at the end"/>
        <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
                    source: Data,
                    ready: function () {
                            'expandRow', '1');
                            '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
                    width: 300,
                    height: 35
                    function () {
                            jqxTreeGrid('addRow', 1, {
                                Employee_Name: "Raju",
                                Company: "TCS",
                                Designation: "Manager"
                            }, 'last');



Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 19 Oct, 2021
Like Article
Save Article
Similar Reads
Complete Tutorials