Sets or gets whether the jqxTreeGrid automatically alternates row colors.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :altRows="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets whether the jqxTreeGrid automatically calculates the rows height and wraps the cell text.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :autoRowHeight="false"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the height of the aggregates bar. Aggregates bar is displayed after setting showAggregates to true.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :aggregatesHeight="40" :showAggregates="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets whether the loading html element with animated gif is automatically displayed by the widget during the data binding process.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :autoShowLoadElement="false"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Determines whether checkboxes are displayed or not.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :checkboxes="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the height of the columns header.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :columnsHeight="40"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets the jqxTreeGrid's columns.

• text - string property which sets the column header's text.
• dataField - string property which sets the column's bound field. It should be unique and should point to a data field defined in the jqxDataAdapter's dataFields array.
• displayField - string property which sets the column's display field. It should be unique and should point to a data field defined in the jqxDataAdapter's dataFields array.
• sortable - boolean property which determines whether the column is sortable.
• filterable - boolean property which determines whether the column is filterable.
• hidden - boolean property which determines whether the column is visible or hidden.
• columnGroup - string property which determines the name of the column's parent group. It should point to a valid name defined in the columnGroups.
• autoCellHeight - boolean property which determines whether the cell's data wrapping is enabled. This property is set to true by default. When autoRowHeight is enabled and autoCellHeight is set to false, the cell's data will not be wrapped.
• renderer - callback function for custom rendering of the column's header.
• rendered - callback function which is called after the column's header rendering is completed.
• cellsRenderer - callback function which is called when a cell is being rendered. The result of that function should be valid and well-formatted HTML string. The cellsRenderer function has 4 parameters passed by jqxTreeGrid - row's key, column's data field, cell's value, row's data as an object of Key/Value pairs.
• columnType - string property which determines the column's type.
  Possible values:
  • "template" - sets a custom editor as a default editor for the column. The editor should be created in the createEditor callback function. The editor should be synchronized with the cell's value in the initEditor callback. The editor's value should be retrieved in the getEditorValue callback function.
  • "custom" - sets a custom editor as a default editor for a cell. That setting enables you to have different cell editors in the column. The editors should be created in the createEditor callback function which is called for each row when the columnType property is set to "custom". The editors should be synchronized with the cell's value in the initEditor callback. The editor's value should be retrieved in the getEditorValue callback function.
• validation - callback function which is called when the jqxTreeGrid's edited row needs to be validated. The function has 2 parameters - edit cell and the cell's value. The function should return true or false, depending on the user's validation logic. It can also return a validation object with 2 fields - "result" - true or false, and "message" - validation string displayed to the users.
• initEditor - callback function which is called when an editor is opened. It has 5 parameters - row's key, cell's value, the editor element, cell's width and cell's height. The function can be used for adding some custom parameters to the editor.
• createEditor - callback function which is called just once when the cells editor is created. It has 5 parameters - row's key, cell's value, the editor element, cell's width and cell's height. The function can be used for adding some custom parameters to the editor.
• getEditorValue - callback function which could be used for overriding the value returned by the editor. It is useful for advanced scenarios with custom editors. It has 3 parameters - row's key, cell's value and the editor element. The result of the function is expected to be the editor's new value.
• cellsFormat - determines the Format string used for formatting the cell values.
  
  Possible number strings:
  "d" - decimal numbers.
  "f" - floating-point numbers.
  "n" - integer numbers.
  "c" - currency numbers.
  "p" - percentage numbers.
  
  For adding decimal places to the numbers, add a number after the formatting string.
  For example: "c3" displays a number in this format $25.256
  Possible built-in Date formats:
  
  // short date pattern d: "M/d/yyyy",
  // long date pattern D: "dddd, MMMM dd, yyyy",
  // short time pattern t: "h:mm tt",
  // long time pattern T: "h:mm:ss tt",
  // long date, short time pattern f: "dddd, MMMM dd, yyyy h:mm tt",
  // long date, long time pattern F: "dddd, MMMM dd, yyyy h:mm:ss tt",
  // month/day pattern M: "MMMM dd",
  // month/year pattern Y: "yyyy MMMM",
  // S is a sortable format that does not vary by culture S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss"
  
  Possible Date format strings:
  
  "d"-the day of the month;
  "dd"-the day of the month;
  "ddd"-the abbreviated name of the day of the week;
  "dddd"- the full name of the day of the week;
  "h"-the hour, using a 12-hour clock from 1 to 12;
  "hh"-the hour, using a 12-hour clock from 01 to 12;
  "H"-the hour, using a 24-hour clock from 0 to 23;
  "HH"- the hour, using a 24-hour clock from 00 to 23;
  "m"-the minute, from 0 through 59;
  "mm"-the minutes,from 00 though59;
  "M"- the month, from 1 through 12;
  "MM"- the month, from 01 through 12;
  "MMM"-the abbreviated name of the month;
  "MMMM"-the full name of the month;
  "s"-the second, from 0 through 59;
  "ss"-the second, from 00 through 59;
  "t"- the first character of the AM/PM designator;
  "tt"-the AM/PM designator;
  "y"- the year, from 0 to 99;
  "yy"- the year, from 00 to 99;
  "yyy"-the year, with a minimum of three digits;
  "yyyy"-the year as a four-digit number;
  
• aggregates - array property which determines the column aggregates.
  
  Aggregate functions:
  • 'avg' - Average aggregate
  • 'count' - Count aggregate
  • 'min' - Min aggregate
  • 'max' - Max aggregate
  • 'sum' - Sum aggregate
  • 'product' - Product aggregate
  • 'stdev' - Standard deviation on a sample.
  • 'stdevp' - Standard deviation on an entire population.
  • 'varp' - Variance on an entire population.
  • 'var' - Variance on a sample.
  
  Custom Aggregate
  

  
  aggregates: [{ 'In Stock':
      function (aggregatedValue, currentValue) {
          if (currentValue) {
              return aggregatedValue + 1;
          }
          return aggregatedValue;
      }
  }
  

  
  Custom Aggregate which aggregates values from two columns
  

  
  { text: 'Price', dataField: 'price', cellsAlign: 'right', cellsFormat: 'c2', aggregates: [{ 'Total':
              function (aggregatedValue, currentValue, column, record) {
                  var total = currentValue * parseInt(record['quantity']);
                  return aggregatedValue + total;
              }
          }]                  
   }
  

  
  'In Stock' - the aggregate's display name. The function has 2 params - the aggregated value and the current value. It should return an aggregated value.
• aggregatesRenderer - callback function which could be used for customization of the aggregates rendering. It has 1 parameter - the column's aggregates.
• align - string property which determines the alignment of the column's header. Possible values: 'left', 'center' or 'right'
• cellsAlign - string property which determines the alignment of the column's cells. Possible values: 'left', 'center' or 'right'.
• width - numeric property which determines the column's width.
• minWidth - numeric property which determines the column's minimum width. Default value: 25.
• maxWidth - numeric property which determines the column's maximum width.
• resizable - boolean property which determines whether the column is resizable.
• draggable - boolean property which determines whether the column is draggable.
• editable - boolean property which determines whether the column is editable.
• className - string property which sets a custom CSS class for the column's header
• cellClassName - string or function property which sets a custom CSS class for the column's cells. The value could be a "string" or "Function".
• pinned - boolean property which determines whether the column is pinned(frozen).

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets the jqxTreeGrid's column groups.

• parentGroup - string property which determines the parent group's name.
• name - string property which determines the group's name.
• align - string property which determines the column header's alignment. Possible values: 'left', 'center' or 'right'.

<template>
  <JqxTreeGrid ref="myTreeGrid"
  :source="source" :columns="columns" :columnGroups="columnGroups" />
</template>
 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columnGroups: [{ name: 'Group', text: 'Name' }],
        columns: [
          { text: 'FirstName', dataField: 'FirstName', columngroup: 'Group', width: 150 },
          { text: 'LastName', dataField: 'LastName', columngroup: 'Group', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [
          { name: 'EmployeeID', type: 'number' },
          { name: 'FirstName', type: 'string' },
          { name: 'LastName', type: 'string' },
          { name: 'Title', type: 'string' },
          { name: 'children', type: 'array' },
          { name: 'expanded', type: 'bool' }
        ],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
  }
</script>

Sets or gets the jqxTreeGrid's columnsResize.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :columnsResize="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the jqxTreeGrid's columnsReorder.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :columnsReorder="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets whether the jqxTreeGrid is disabled.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :disabled="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets whether the jqxTreeGrid editing is enabled.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :editable="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the jqxTreeGrid's edit settings.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :editable="true" :editSettings="editSettings"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        editSettings: {
            saveOnPageChange: true,
            saveOnBlur: true,
            saveOnSelectionChange: true,
            cancelOnEsc: true,
            saveOnEnter: true,
            editOnDoubleClick: true,
            editOnF2: false
        },
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Determines the Data Export settings used by jqxTreeGrid when exportData is called. See also the exportData method.

• columnsHeader - boolean value. Determines whether the columns header is exported. Note that Stacked Headers are not exported.
• hiddenColumns - boolean value. Determines whether the hidden columns would be exported.
• serverURL - string or Null. Determines the Exporter File's URL.
• characterSet - string value. Determines the character set used by the exporter.
• collapsedRecords - boolean value. Determines whether the collapsed records would be included in the export.
• recordsInView - boolean value. Determines whether the filtered/sorted set of records would be exported. Otherwise, the widget would not take into account the filtering and sorting.
• fileName - string value. Determines the export file's name.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :exportSettings="exportSettings"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        exportSettings: {
            columnsHeader: true,
            collapsedRecords: true,
            hiddenColumns: false
        },
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets whether row highlighting is enabled.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :enableHover="false"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Enables or disables the default text selection of the web browser.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :enableBrowserSelection="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Enables/Disables the filtering feature.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :filterable="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the Filter Element's height.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :filterable="true" :filterHeight="40"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Determines the Filter's mode. Possible values: "default", "simple" and "advanced"

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :filterable="true" :filterMode="'advanced'"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the jqxTreeGrid's height.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :height="200"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Determines whether changing a checkbox state affects the parent/child records check state. Note: "checkboxes" property value is expected to be true.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :checkboxes="true" :hierarchicalCheckboxes="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Determines whether icons are displayed or not.

<template>
  <JqxTreeGrid ref="myTreeGrid"
  :source="source" :columns="columns" :icons="true" />
</template>
 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data, {
          beforeLoadComplete: (records) => {
            this.addIcons(records[0]);
            return records;
          }
        }),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [
          { name: 'EmployeeID', type: 'number' },
          { name: 'FirstName', type: 'string' },
          { name: 'LastName', type: 'string' },
          { name: 'Title', type: 'string' },
          { name: 'children', type: 'array' },
          { name: 'expanded', type: 'bool' }
        ],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    methods: {
      addIcons: function (record) {
        var imgUrl = "https://cdn2.iconfinder.com/data/icons/flat-ui-icons-24-px/24/man-24-16.png";
        record.icon = imgUrl;
        let children = record.children;
        if (children) {
          for (let i = 0; i < children.length; i++) {
            this.addIcons(children[i]);
          }
        }
      }
    }
  }
</script>

Determines whether the incremental search is enabled. The feature allows you to quickly find and select data records by typing when the widget is on focus.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :incrementalSearch="false"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Applies a localization to the jqxTreeGrid's strings.

{           
        // separator of parts of a date (e.g. '/' in 11/05/1955)
	'/': "/",
	// separator of parts of a time (e.g. ':' in 05:44 PM)
	':': ":",
	// the first day of the week (0 = Sunday, 1 = Monday, etc)
	firstDay: 0,
	days: {
		// full day names
		names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
		// abbreviated day names
		namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
		// shortest day names
		namesShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
	},
	months: {
		// full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
		names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""],
		// abbreviated month names
		namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ""]
	},
	// AM and PM designators in one of these forms:
	// The usual view, and the upper and lower case versions
	//      [standard,lowercase,uppercase]
	// The culture does not use AM or PM (likely all standard date formats use 24 hour time)
	//      null
	AM: ["AM", "am", "AM"],
	PM: ["PM", "pm", "PM"],
	eras: [
	// eras in reverse chronological order.
	// name: the name of the era in this culture (e.g. A.D., C.E.)
	// start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
	// offset: offset in years from gregorian calendar
	{ "name": "A.D.", "start": null, "offset": 0 }
	],
	twoDigitYearMax: 2029,
	patterns: {
		// short date pattern
		d: "M/d/yyyy",
		// long date pattern
		D: "dddd, MMMM dd, yyyy",
		// short time pattern
		t: "h:mm tt",
		// long time pattern
		T: "h:mm:ss tt",
		// long date, short time pattern
		f: "dddd, MMMM dd, yyyy h:mm tt",
		// long date, long time pattern
		F: "dddd, MMMM dd, yyyy h:mm:ss tt",
		// month/day pattern
		M: "MMMM dd",
		// month/year pattern
		Y: "yyyy MMMM",
		// S is a sortable format that does not vary by culture
		S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss",
		// formatting of dates in MySQL DataBases
		ISO: "yyyy-MM-dd hh:mm:ss",
		ISO2: "yyyy-MM-dd HH:mm:ss",
		d1: "dd.MM.yyyy",
		d2: "dd-MM-yyyy",
		d3: "dd-MMMM-yyyy",
		d4: "dd-MM-yy",
		d5: "H:mm",
		d6: "HH:mm",
		d7: "HH:mm tt",
		d8: "dd/MMMM/yyyy",
		d9: "MMMM-dd",
		d10: "MM-dd",
		d11: "MM-dd-yyyy"
	},
	percentSymbol: "%",
	currencySymbol: "$",
	currencySymbolposition: "before",
	decimalSeparator: '.',
	thousandsSeparator: ',',
	pagerGoToPagestring: "Go to page:",
	pagerShowRowsstring: "Show rows:",
	pagerRangestring: " of ",
	pagerPreviousButtonstring: "previous",
	pagerNextButtonstring: "next",
	pagerFirstButtonsSring: "first",
	pagerLastButtonstring:"last",
	filterApplystring: "Apply",
	filterCancelstring: "Cancel",
	filterClearstring: "Clear Filter",
	filterstring: "advanced",
	filterSearchstring: "Search:",
	filterstringComparisonOperators: ['empty', 'not empty', 'contains', 'contains(match case)',
	   'does not contain', 'does not contain(match case)', 'starts with', 'starts with(match case)',
	   'ends with', 'ends with(match case)', 'equal', 'equal(match case)', 'null', 'not null'],
	filterNumericComparisonOperators: ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'],
	filterDateComparisonOperators: ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'],
	filterbooleanComparisoOoperators: ['equal', 'not equal'],
	validationstring: "Entered value is not valid",
	emptyDatastring: "No data to display",
	filterSelectstring: "Select Filter",
	loadText: "Loading...",
	clearstring: "Clear",
	todaystring: "Today",
	loadingErrorMessage: "The data is still loading and you cannot set a property or call a method. You can do that once the data binding is completed. jqxTreeGrid raises the 'bindingComplete' event when the binding is completed."           
};

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :localization="localization" :pageable="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        localization: {
          pagerGoToPageString: 'Gehe zu:',
          pagerShowRowsString: 'Zeige Zeile:',
          pagerRangeString: ' von ',
          pagerNextButtonString: 'voriger',
          pagerFirstButtonString: 'first',
          pagerLastButtonString: 'last',
          pagerPreviousButtonString: 'nächster'
        },
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the height of the jqxTreeGrid's Pager(s). Pager(s) is(are) displayed after setting pageable to true.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :pageable="true" :pagerHeight="35"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the rows count per page when paging is enabled.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :pageable="true" :pageSize="5"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the jqxTreeGrid's page size options when paging is enabled and the pagerMode property is set to "advanced".

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :pageable="true" :pagerMode="'advanced'"
    :pageSizeOptions=" ['2', '3', '5'] "
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Determines whether the jqxTreeGrid is in paging mode.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :pageable="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the Pager's position. Possible values: 'top', 'bottom' and 'both'

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :pageable="true" :pagerPosition="'top'"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the Pager's mode. Possible values: "default" and "advanced"

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :pageable="true" :pagerMode="'advanced'"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the Pager Size's mode. Possible values: "default" and "root"

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :pageable="true" :pageSizeMode="'root'"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the count of the buttons displayed on the Pager when pagerMode is set to "default".

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :pageable="true" :pagerButtonsCount="2"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Enables custom rendering of the Pager.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :pageable="true" :pagerRenderer="pagerRenderer"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    methods: {
      pagerRenderer: function () {
        // Do something here and return a HTML Element as a result.
      }
    }
  }
</script>

Callback function which is called when the jqxTreeGrid is rendered and data binding is completed..

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :ready="ready"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    methods: {
      ready: function () {
        alert('Ready!')
      }
    }
  }
</script>

Sets or gets whether the jqxTreeGrid rows have details. See the rowDetailsRenderer for rendering of the row details.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :rowDetails="true" :rowDetailsRenderer="rowDetailsRenderer"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Callback function which is used for rendering of the row's details.

• id/key - row's id/key.
• dataRow - the row as a set of Key/Value pairs.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :rowDetails="true" :rowDetailsRenderer="rowDetailsRenderer"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    methods: {
      rowDetailsRenderer: function (key, dataRow) {
        return 'Record ' + key + ' details';
      }
    }
  }
</script>

Enables custom rendering of the Toolbar.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :renderToolbar="renderToolbar" :showToolbar="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    methods: {
      renderToolbar: function (toolbar) {
        const container = document.createElement('div');
        container.innerHTML = 'Some custom HTML here...';
        toolbar.append(container);
      }
    }
  }
</script>

Enables custom rendering of the Statusbar.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :renderStatusBar="renderStatusBar"
    :showStatusbar="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    methods: {
      renderStatusBar: function (statusbar) {
        const container = document.createElement('div');
        container.innerHTML = 'Some custom HTML here...';
        statusbar.append(container);
      }
    }
  }
</script>

Callback function which is called before the rendering of the jqxTreeGrid's rows.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :rendering="rendering"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    methods: {
      rendering: function () {
        alert('Rendering!');
      }
    }
  }
</script>

Callback function which is called after the rendering of the jqxTreeGrid's row.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :rendered="rendered"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    methods: {
      rendered: function () {
        alert('Rendered!');
      }
    }
  }
</script>

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :rtl="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Determines the jqxTreeGrid's data source. The source property is expected to point to an instance of jqxDataAdapter. For more information about jqxDataAdapter, visit: jquery-data-adapter.htm. To clear the data source, set the source property to null.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Enables/Disables the sorting feature.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :sortable="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Determines whether the jqxTreeGrid's Aggregates bar is visible.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :showAggregates="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Determines whether jqxTreeGrid would calculate summary values for all values within a group of records and would display the result inside footer cell after each group.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :showAggregates="true" :showSubAggregates="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Determines whether the jqxTreeGrid's Toolbar is visible.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :showToolbar="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Determines whether the jqxTreeGrid's Statusbar is visible.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :showStatusbar="true"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the height of the Statusbar. Statusbar is displayed after setting showStatusbar to true.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :statusBarHeight="40"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the size of the scrollbars.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :scrollBarSize="15"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the selection mode. Possible values: "multipleRows", "singleRow" and "custom". In the "custom" mode, rows could be selected/unselected only through the API.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :selectionMode="'singleRow'"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the jqxTreeGrid's columns visibility.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :showHeader="false"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets the widget's theme.

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'material' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />
  
  

• Set the widget's theme property to 'material' when you initialize it.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :theme="'material'"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the height of the Toolbar. Toolbar is displayed after setting showToolbar to true.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :showToolbar="true" :toolbarHeight="40"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

Sets or gets the jqxTreeGrid's width.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns" :width="500"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    }
  }
</script>

By defining that function you can load data into jqxTreeGrid dynamically. For each record only when required, jqxTreeGrid calls virtualModeCreateRecords function and this allows you to provide records on demand. In order to enable the load on demand feature, you should also define the virtualModeRecordCreating function.

• Row Key/ID - unique ID. If null is passed, that the function's result would be the records of the first hierarchy level.
• Done - callback function. Call it when data is loaded and pass the loaded data as an Array.

<template>
  <JqxTreeGrid ref="myTreeGrid"
  :width="600"  :columns="columns"
  :virtualModeCreateRecords="virtualModeCreateRecords"
  :virtualModeRecordCreating="virtualModeRecordCreating"/>
</template>
 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        columns: [
          { text: 'Task', dataField: "task", width: 250 },
          { text: 'Person Name', dataField: "name", width: 200 },
          {
            text: 'Duration',
            dataField: "duration",
            cellsRenderer: function (row, column, value) {
              var hour = value > 1 ? "hours" : " hour";
              return value + hour;
            }
          }
        ]
      }
    },
    methods: {
     generateTasks: function (rowsCount) {
       var rowsCount = !rowsCount ? 1 + Math.floor(Math.random() * 5) : rowsCount;
       var data = new Array();
       var generatekey = function () {
         var S4 = function () {
           return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
         };
         return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
       };
 
       for (var i = 0; i < rowsCount; i++) {
         var row = {};
         var tasks = ["Shopping", "Housewares", "Kitchen supplies", "Groceries", "Cleaning supplies", "Office supplies", "Remodeling", "Paint bedroom", "Paint wall", "Fitness", "Decorate living room",
           "Fix lights", "Fix front door", "Clean kitchen"];
         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"];
         row["id"] = generatekey();
         row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
         row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
         row["name"] = row["firstname"] + "" + row["lastname"];
         var taskindex = Math.floor(Math.random() * tasks.length);
         row["task"] = tasks[taskindex];
         row["duration"] = 1 + Math.floor(Math.random() * 10);
         data.push(row);
       }
       return data;
     },
     virtualModeCreateRecords: function(expandedRecord, done) {
       // expandedRecord is equal to null when the function is initially called, because there is still no record to be expanded.
       var source = {
         dataType: "array",
         dataFields: [
           { name: "id", type: "string" },
           { name: "name", type: "string" },
           { name: "duration", type: "number" },
           { name: "task", type: "number" }
         ],
         localData: expandedRecord === null ? this.generateTasks(10) : this.generateTasks(),
         id: 'id'
       }
       var dataAdapter = new jqx.dataAdapter(source, {
         loadComplete: function () {
           done(dataAdapter.records);
         }
       });
       dataAdapter.dataBind();
     },
     virtualModeRecordCreating: function (record) {
       if (record.level == 2) {
         // by setting the record's leaf member to true, you will define the record as a leaf node.
         record.leaf = true;
       }
     }
   }
 }
</script>

By defining that function you can initialize the dynamic data that you load into jqxTreeGrid. In order to enable the load on demand feature, you should also define virtualModeCreateRecords function.

• Row - object with the following reserved members:
  • checked - boolean value. Determines the row's checked state.
  • expanded - boolean value. Determines the row's expanded state.
  • icon - string value. Determines the row's icon url.
  • leaf - boolean value. Determines whether the row is a leaf in the hierarchy. When you set leaf to true, the expand/collapse button would not be displayed.
  • level - Integer value. Returns the row's hierarchy level.
  • selected - boolean value. Determines the row's selected state.

<template>
  <JqxTreeGrid ref="myTreeGrid"
  :width="600"  :columns="columns"
  :virtualModeCreateRecords="virtualModeCreateRecords"
  :virtualModeRecordCreating="virtualModeRecordCreating"/>
</template>
 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        columns: [
          { text: 'Task', dataField: "task", width: 250 },
          { text: 'Person Name', dataField: "name", width: 200 },
          {
            text: 'Duration',
            dataField: "duration",
            cellsRenderer: function (row, column, value) {
              var hour = value > 1 ? "hours" : " hour";
              return value + hour;
            }
          }
        ]
      }
    },
    methods: {
     generateTasks: function (rowsCount) {
       var rowsCount = !rowsCount ? 1 + Math.floor(Math.random() * 5) : rowsCount;
       var data = new Array();
       var generatekey = function () {
         var S4 = function () {
           return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
         };
         return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
       };
 
       for (var i = 0; i < rowsCount; i++) {
         var row = {};
         var tasks = ["Shopping", "Housewares", "Kitchen supplies", "Groceries", "Cleaning supplies", "Office supplies", "Remodeling", "Paint bedroom", "Paint wall", "Fitness", "Decorate living room",
           "Fix lights", "Fix front door", "Clean kitchen"];
         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"];
         row["id"] = generatekey();
         row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
         row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
         row["name"] = row["firstname"] + "" + row["lastname"];
         var taskindex = Math.floor(Math.random() * tasks.length);
         row["task"] = tasks[taskindex];
         row["duration"] = 1 + Math.floor(Math.random() * 10);
         data.push(row);
       }
       return data;
     },
     virtualModeCreateRecords: function(expandedRecord, done) {
       // expandedRecord is equal to null when the function is initially called, because there is still no record to be expanded.
       var source = {
         dataType: "array",
         dataFields: [
           { name: "id", type: "string" },
           { name: "name", type: "string" },
           { name: "duration", type: "number" },
           { name: "task", type: "number" }
         ],
         localData: expandedRecord === null ? this.generateTasks(10) : this.generateTasks(),
         id: 'id'
       }
       var dataAdapter = new jqx.dataAdapter(source, {
         loadComplete: function () {
           done(dataAdapter.records);
         }
       });
       dataAdapter.dataBind();
     },
     virtualModeRecordCreating: function (record) {
       if (record.level == 2) {
         // by setting the record's leaf member to true, you will define the record as a leaf node.
         record.leaf = true;
       }
     }
   }
 }
</script>

This event is triggered when the jqxTreeGrid binding is completed. *Bind to that event before the jqxTreeGrid's initialization. Otherwise, if you are populating the widget from a local data source and bind to bindingComplete after the initialization, the event could be already raised when you attach an event handler to it.

Code examples

Bind to the bindingComplete event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @bindingComplete="onBindingComplete($event)"
        :columns="columns" />
</template>

<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';

  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };

      
    },
    mounted: function () {
      this.source = new jqx.dataAdapter(this.data);
      this.$refs.myTreeGrid.source = this.source;
    },
    methods: {
      onBindingComplete: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when a cell edit begins. Note: To turn on cell editing, you should set the editSettings property and make sure that its editSingleCell sub property is set to true.

Code examples

Bind to the cellBeginEdit event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @cellBeginEdit="onCellBeginEdit($event)"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.editable = true;
      this.$refs.myTreeGrid.editSettings = {
          editSingleCell: true,
          editOnDoubleClick: true
      };

    },
    methods: {
      onCellBeginEdit: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when a cell edit ends. Note: To turn on cell editing, you should set the editSettings property and make sure that its editSingleCell sub property is set to true.

Code examples

Bind to the cellEndEdit event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @cellEndEdit="onCellEndEdit($event)"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.editable = true;
      this.$refs.myTreeGrid.editSettings = {
        editSingleCell: true,
        editOnDoubleClick: true,
        saveOnSelectionChange: true,
        saveOnEnter: true, 
        saveOnPageChange: true,
        saveOnBlur: true
      };

    },
    methods: {
      onCellEndEdit: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a cell value is changed.

Code examples

Bind to the cellValueChanged event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @cellValueChanged="onCellValueChanged($event)"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.editable = true;

    },
    methods: {
      onCellValueChanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when a column is resized.

Code examples

Bind to the columnResized event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @columnResized="onColumnResized($event)"
         :source="source" :columns="columns" :columnsResize="true"/>
</template>

<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';

  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    methods: {
      onColumnResized: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the column's order is changed.

Code examples

Bind to the columnReordered event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @columnReordered="onColumnReordered($event)"
         :source="source" :columns="columns" :columnsReorder="true"/>
</template>

<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';

  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    methods: {
      onColumnReordered: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the jqxTreeGrid's rows filter is changed.

Code examples

Bind to the filter event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @filter="onFilter($event)"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.filterable = true;

    },
    methods: {
      onFilter: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when the jqxTreeGrid's current page is changed.

Code examples

Bind to the pageChanged event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @pageChanged="onPageChanged($event)"
         :source="source" :columns="columns" :pageable="true" :pageSize="3"/>
</template>

<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';

  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    methods: {
      onPageChanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when the jqxTreeGrid's page size is changed.

Code examples

Bind to the pageSizeChanged event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @pageSizeChanged="onPageSizeChanged($event)"
         :source="source" :columns="columns" :pageable="true" :pageSize="3" :pagerMode="'advanced'"/>
</template>
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    methods: {
      onPageSizeChanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when a row is clicked.

Code examples

Bind to the rowClick event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @rowClick="onRowClick($event)"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    methods: {
      onRowClick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when a row is double-clicked.

Code examples

Bind to the rowDoubleClick event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @rowDoubleClick="onRowDoubleClick($event)"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    methods: {
      onRowDoubleClick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when a row is selected.

Code examples

Bind to the rowSelect event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @rowSelect="onRowSelect($event)"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    methods: {
      onRowSelect: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when a row is unselected.

Code examples

Bind to the rowUnselect event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @rowUnselect="onRowUnselect($event)"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    methods: {
      onRowUnselect: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when a row edit begins.

Code examples

Bind to the rowBeginEdit event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @rowBeginEdit="onRowBeginEdit($event)"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.editable = true;

    },
    methods: {
      onRowBeginEdit: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when a row edit ends.

Code examples

Bind to the rowEndEdit event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @rowEndEdit="onRowEndEdit($event)"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.editable = true;

    },
    methods: {
      onRowEndEdit: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when a row is expanded.

Code examples

Bind to the rowExpand event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @rowExpand="onRowExpand($event)"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    methods: {
      onRowExpand: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when a row is collapsed.

Code examples

Bind to the rowCollapse event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @rowCollapse="onRowCollapse($event)"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    methods: {
      onRowCollapse: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when a row is checked.

Code examples

Bind to the rowCheck event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @rowCheck="onRowCheck($event)"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.checkboxes = true;

    },
    methods: {
      onRowCheck: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This is triggered when a row is unchecked.

Code examples

Bind to the rowUncheck event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @rowUncheck="onRowUncheck($event)"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.checkboxes = true;

    },
    methods: {
      onRowUncheck: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered when the jqxTreeGrid sort order or sort column is changed.

Code examples

Bind to the sort event of jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid" @sort="onSort($event)"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.sortable = true;

    },
    methods: {
      onSort: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Adds a new row. For synchronization with a server, please look also the jqxDataAdapter plug-in's help documentation.

• Row Key/ID - unique ID which identifies the row. If null is passed, the jqxTreeGrid will generate an unique.
• Row Data - object with Key/Value pairs. To add an empty row, pass {}.
• Row Position - string with two possible values - "last" and "first". By default "last" is used.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.addRow(10,{},'first');
    }
  }
</script>

Adds a new filter.

<template>
  <JqxTreeGrid ref="myTreeGrid"
         :source="source" :columns="columns" :filterable="true"/>
</template>

<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';

  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    mounted: function () {
      let filtertype = 'stringfilter';
      // create a new group of filters.
      let filtergroup = new $.jqx.filter();
      let filter_or_operator = 1;
      let filtervalue = "Laura";
      let filtercondition = 'equal';
      let filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
      filtergroup.addfilter(filter_or_operator, filter);
 
      this.$refs.myTreeGrid.addFilter('FirstName', filtergroup);
      this.$refs.myTreeGrid.applyFilters();
    }
  }
</script>

Applies the added/removed filters.

<template>
  <JqxTreeGrid ref="myTreeGrid"
         :source="source" :columns="columns" :filterable="true"/>
</template>

<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';

  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    mounted: function () {
      let filtertype = 'stringfilter';
      // create a new group of filters.
      let filtergroup = new $.jqx.filter();
      let filter_or_operator = 1;
      let filtervalue = "Laura";
      let filtercondition = 'equal';
      let filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
      filtergroup.addfilter(filter_or_operator, filter);
 
      this.$refs.myTreeGrid.addFilter('FirstName', filtergroup);
      this.$refs.myTreeGrid.applyFilters();
    }
  }
</script>

Begins an update and stops all refreshes.

<template>
  <div>
    <JqxTreeGrid ref="myTreeGrid"
           :source="source" :columns="columns"/>
    <jqxButton style="width: 100px;margin-right:100px;" @click="beginUpdate()">Begin Update</jqxButton>
    <jqxButton style="width: 80px;" @click="endUpdate()">End Update</jqxButton>
  </div>
</template>
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxTreeGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    methods: {
      beginUpdate: function () {
        this.$refs.myTreeGrid.beginUpdate();
      },
      endUpdate: function () {
        this.$refs.myTreeGrid.endUpdate();
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Begins a row edit operation when editable is set to true.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.editable = true;

      this.$refs.myTreeGrid.beginRowEdit(8);
    }
  }
</script>

Begins a cell edit operation when editable is set to true.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.editable = true;

      this.$refs.myTreeGrid.beginCellEdit(8,'firstName');
    }
  }
</script>

Clears the selection.

<template>
  <div>
    <JqxTreeGrid ref="myTreeGrid"
           :source="source" :columns="columns" />
    <JqxButton style="width: 100px; margin-top: 20px;" @click="clearSelection()">Clear Selection</JqxButton>
  </div>
</template>
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxTreeGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.selectRow(2);
    },
    methods: {
      clearSelection: function () {
        this.$refs.myTreeGrid.clearSelection();
      }
    }
  }
</script>

Clears the filters.

<template>
  <div>
    <JqxTreeGrid ref="myTreeGrid"
           :source="source" :columns="columns" :filterable="true" />
    <JqxButton style="width: 100px; margin-top: 20px;" @click="clearFilters()">Clear Filters</JqxButton>
  </div>
</template>
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxTreeGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    mounted: function () {
      let filtertype = 'stringfilter';
      // create a new group of filters.
      let filtergroup = new $.jqx.filter();
      let filter_or_operator = 1;
      let filtervalue = "Laura";
      let filtercondition = 'equal';
      let filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
      filtergroup.addfilter(filter_or_operator, filter);

      this.$refs.myTreeGrid.addFilter('FirstName', filtergroup);
      this.$refs.myTreeGrid.applyFilters();
    },
    methods: {
      clearFilters: function () {
        this.$refs.myTreeGrid.clearFilters();
      }
    }
  }
</script>

Clears the jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.clear();
    }
  }
</script>

Checks a row when checkboxes is set to true.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.checkboxes = true;

      this.$refs.myTreeGrid.checkRow(8);
    }
  }
</script>

Collapses a row.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.collapseRow(5);
    }
  }
</script>

Collapses all rows.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.collapseAll();
    }
  }
</script>

Destroys jqxTreeGrid and removes it from the DOM.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.destroy();
    }
  }
</script>

Deletes a row. For synchronization with a server, please look also the jqxDataAdapter plug-in's help documentation.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.deleteRow(7);
    }
  }
</script>

Expands a row.

<template>
  <JqxTreeGrid ref="myTreeGrid"
         :source="source" :columns="columns" />
</template>

<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';

  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.collapseAll();
      this.$refs.myTreeGrid.expandRow(2);
    }
  }
</script>

Expands all rows.

<template>
  <JqxTreeGrid ref="myTreeGrid"
         :source="source" :columns="columns" />
</template>

<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';

  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.collapseAll();
      this.$refs.myTreeGrid.expandAll();
    }
  }
</script>

Ends the update and resumes all refreshes.

<template>
  <div>
    <JqxTreeGrid ref="myTreeGrid"
           :source="source" :columns="columns"/>
    <jqxButton style="width: 100px;margin-right:100px;" @click="beginUpdate()">Begin Update</jqxButton>
    <jqxButton style="width: 80px;" @click="endUpdate()">End Update</jqxButton>
  </div>
</template>
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxTreeGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    methods: {
      beginUpdate: function () {
        this.$refs.myTreeGrid.beginUpdate();
      },
      endUpdate: function () {
        this.$refs.myTreeGrid.endUpdate();
      }
    }
  }
</script>
<style>
  .jqx-button {
    margin-top: 20px;
    display: inline-block;
  }
</style>

Moves the vertical scrollbar to a row.

<template>
  <JqxTreeGrid ref="myTreeGrid"
         :source="source" :columns="columns" :height="100" />
</template>

<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';

  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.ensureRowVisible(6);
    }
  }
</script>

Ends a row edit when editable is set to true.

<template>
  <div>
    <JqxTreeGrid ref="myTreeGrid"
           :source="source" :columns="columns" />
    <JqxButton style="width: 100px; margin-top: 20px;" @click="endRowEdit()">End row edit</JqxButton>
  </div>
</template>
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxTreeGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.beginRowEdit(2);
    },
    methods: {
      endRowEdit: function () {
        this.$refs.myTreeGrid.endRowEdit(2, true);
      }
    }
  }
</script>

Ends a cell edit operation when editable is set to true.

<template>
  <div>
    <JqxTreeGrid ref="myTreeGrid"
           :source="source" :columns="columns" :editSettings="editSettings"/>
    <JqxButton style="width: 100px; margin-top: 20px;" @click="endRowEdit()">End cell edit</JqxButton>
  </div>
</template>
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxTreeGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ],
        editSettings: {
          editSingleCell: true
        }
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.beginCellEdit(2, 'LastName');
    },
    methods: {
      endRowEdit: function () {
        this.$refs.myTreeGrid.endCellEdit(2, 'LastName');
      }
    }
  }
</script>

Exports TreeGrid Data to Excel, HTML, XML, JSON, CSV or TSV. See also the exportSettings property

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      const value = this.$refs.myTreeGrid.exportData('pdf');
    }
  }
</script>

Focus jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.focus();
    }
  }
</script>

Gets a property value of a column.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      const value = this.$refs.myTreeGrid.getColumnProperty('firstName','width');
    }
  }
</script>

Navigates to a page when pageable is set to true.

<template>
  <JqxTreeGrid ref="myTreeGrid"
         :source="source" :columns="columns" :pageable="true" :pageSize="3"/>
</template>

<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';

  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.goToPage(2);
    }
  }
</script>

Navigates to a previous page when pageable is set to true.

<template>
  <JqxTreeGrid ref="myTreeGrid"
         :source="source" :columns="columns" :pageable="true" :pageSize="2" />
</template>
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.goToPage(3);
      this.$refs.myTreeGrid.goToPrevPage();
    }
  }
</script>

Navigates to a next page when pageable is set to true.

<template>
  <JqxTreeGrid ref="myTreeGrid"
         :source="source" :columns="columns" :pageable="true" :pageSize="3"/>
</template>

<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';

  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.goToNextPage();
    }
  }
</script>

Returns an array of selected rows.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      const value = this.$refs.myTreeGrid.getSelection();
    }
  }
</script>

Returns the Row's Key. If the row's key is not found, returns null.

<template>
  <JqxTreeGrid ref="myTreeGrid"
         :source="source" :columns="columns" />
</template>

<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';

  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    mounted: function () {
      let rows = this.$refs.myTreeGrid.getRows();
      let key = this.$refs.myTreeGrid.getKey(rows[0]);
      alert(key);
    }
  }
</script>

Returns an object. If the row is not found, returns null.

• checked - boolean value. Returns the row's checked state.
• expanded - boolean value. Returns the row's expanded state.
• icon - string value. Returns the row's icon url.
• leaf - boolean value. Returns whether the row is a leaf in the hierarchy.
• level - Integer value. Returns the row's hierarchy level.
• parent - object. Returns null for root rows. Otherwise, returns the parent row's object
• records - Array. Returns the row's sub-rows collection.
• selected - boolean value. Returns the row's selected state.
• uid - number/string value. Returns the row's unique ID/Key.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      const value = this.$refs.myTreeGrid.getRow(2);
    }
  }
</script>

Returns an array of all rows loaded into jqxTreeGrid.

• checked - boolean value. Returns the row's checked state.
• expanded - boolean value. Returns the row's expanded state.
• icon - string value. Returns the row's icon url.
• leaf - boolean value. Returns whether the row is a leaf in the hierarchy.
• level - Integer value. Returns the row's hierarchy level.
• parent - object. Returns null for root rows. Otherwise, returns the parent row's object
• records - Array. Returns the row's sub-rows collection.
• selected - boolean value. Returns the row's selected state.
• uid - number/string value. Returns the row's unique ID/Key.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      const value = this.$refs.myTreeGrid.getRows();
    }
  }
</script>

Returns a flat array of all checked rows.

• checked - boolean value. Returns the row's checked state.
• expanded - boolean value. Returns the row's expanded state.
• icon - string value. Returns the row's icon url.
• leaf - boolean value. Returns whether the row is a leaf in the hierarchy.
• level - Integer value. Returns the row's hierarchy level.
• parent - object. Returns null for root rows. Otherwise, returns the parent row's object
• records - Array. Returns the row's sub-rows collection.
• selected - boolean value. Returns the row's selected state.
• uid - number/string value. Returns the row's unique ID/Key.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.checkboxes = true;

      const value = this.$refs.myTreeGrid.getCheckedRows();
    }
  }
</script>

Returns an array of all rows loaded into jqxTreeGrid. The method takes into account the applied Filtering and Sorting.

• checked - boolean value. Returns the row's checked state.
• expanded - boolean value. Returns the row's expanded state.
• icon - string value. Returns the row's icon url.
• leaf - boolean value. Returns whether the row is a leaf in the hierarchy.
• level - Integer value. Returns the row's hierarchy level.
• parent - object. Returns null for root rows. Otherwise, returns the parent row's object
• records - Array. Returns the row's sub-rows collection.
• selected - boolean value. Returns the row's selected state.
• uid - number/string value. Returns the row's unique ID/Key.

<template>
  <JqxTreeGrid ref="myTreeGrid"
         :source="source" :columns="columns" :sortable="true"/>
</template>

<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';

  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new $.jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.sortBy('FirstName', 'desc');
      const view = this.$refs.myTreeGrid.getView();
      console.log(view);
    }
  }
</script>

Returns a value of a cell.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      const value = this.$refs.myTreeGrid.getCellValue(2,'FirstName');
    }
  }
</script>

Hides a column.

• data field - column's data field.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.hideColumn('FirstName');
    }
  }
</script>

Returns whether the binding is completed and if the result is true, this means that you can invoke methods and set properties. Otherwise, if the binding is not completed and you try to set a property or invoke a method, the widget will throw an exception.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      const value = this.$refs.myTreeGrid.isBindingCompleted();
    }
  }
</script>

Locks a row i.e editing of the row would be disabled.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.lockRow(2);
    }
  }
</script>

Performs a layout and updates the HTML elements position and size.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.refresh();
    }
  }
</script>

Renders jqxTreeGrid.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.render();
    }
  }
</script>

Removes a filter.

• data field - column's data field.

<template>
  <div>
    <JqxTreeGrid ref="myTreeGrid"
           :source="source" :columns="columns" :filterable="true" />
    <JqxButton style="width: 200px; margin-top: 20px;" @click="removeFilter()">Remove FirstName Filter</JqxButton>
  </div>
</template>
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';
  export default {
    components: {
      JqxTreeGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    mounted: function () {
      let filtertype = 'stringfilter';
      // create a new group of filters.
      let filtergroup = new $.jqx.filter();
      let filter_or_operator = 1;
      let filtervalue = "Laura";
      let filtercondition = 'equal';
      let filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition);
      filtergroup.addfilter(filter_or_operator, filter);

      this.$refs.myTreeGrid.addFilter('FirstName', filtergroup);
      this.$refs.myTreeGrid.applyFilters();
    },
    methods: {
      removeFilter: function () {
        this.$refs.myTreeGrid.removeFilter('FirstName');
        this.$refs.myTreeGrid.applyFilters();
      }
    }
  }
</script>

Scrolls to a position or gets the scroll position.

<template>
  <JqxTreeGrid ref="myTreeGrid"
         :source="source" :columns="columns" :height="100"/>
</template>

<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';

  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.scrollOffset(40, 0);
    }
  }
</script>

Sets a property of a column. See the columns property for more information.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.setColumnProperty('FirstName','text','New Text');
    }
  }
</script>

Shows a column.

<template>
  <div>
    <JqxTreeGrid ref="myTreeGrid"
           :source="source" :columns="columns" />
    <JqxButton style="width: 200px" @click="showColumn()">Show hidden column</JqxButton>
  </div>
</template>

<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
  import JqxButton from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue';

  export default {
    components: {
      JqxTreeGrid,
      JqxButton
    },
    data: function () {
      return {
        source: new jqx.dataAdapter(this.data),
        columns: [
          { text: 'FirstName', hidden: true, dataField: 'FirstName', width: 150, aggregates: ['count'] },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 200 }
        ]
      }
    },
    beforeCreate: function () {
      let employees = [{
        'EmployeeID': 2,
        'FirstName': 'Andrew',
        'LastName': 'Fuller',
        'Title': 'Vice President, Sales',
        'expanded': 'true',
        children: [{
          'EmployeeID': 8,
          'FirstName': 'Laura',
          'LastName': 'Callahan',
          'Title': 'Inside Sales Coordinator'
        }, {
          'EmployeeID': 5,
          'FirstName': 'Steven',
          'LastName': 'Buchanan',
          'Title': 'Sales Manager',
          'expanded': 'true',
          children: [{
            'EmployeeID': 6,
            'FirstName': 'Michael',
            'LastName': 'Suyama',
            'Title': 'Sales Representative'
          }, {
            'EmployeeID': 7,
            'FirstName': 'Robert',
            'LastName': 'King',
            'Title': 'Sales Representative'
          }]
        }]
      }];
      this.data = {
        dataType: "json",
        dataFields: [{ name: 'EmployeeID', type: 'number' },
        { name: 'FirstName', type: 'string' },
        { name: 'LastName', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'children', type: 'array' },
        { name: 'expanded', type: 'bool' }],
        hierarchy: { root: 'children' },
        id: 'EmployeeID',
        localData: employees
      };
    },
    methods: {
      showColumn: function () {
        this.$refs.myTreeGrid.showColumn('FirstName');
      }
    }
  }
</script>

Selects a row.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.selectRow(2);
    }
  }
</script>

Sets a value of a cell.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.setCellValue(2,'FirstName','New Value');
    }
  }
</script>

Sorts a column, if sortable is set to true.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.sortBy('FirstName','asc');
    }
  }
</script>

Gets a boolean value which determines whether jqxTreeGrid is in update state i.e the beginUpdate method was called and the endUpdate method is not called yet.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      const value = this.$refs.myTreeGrid.updating();
    }
  }
</script>

Performs a data bind and updates jqxTreeGrid with the new data.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.updateBoundData();
    }
  }
</script>

Unselects a row.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.unselectRow(2);
    }
  }
</script>

Unchecks a row when checkboxes is set to true.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.checkboxes = true;

      this.$refs.myTreeGrid.uncheckRow(2);
    }
  }
</script>

Updates the row's data. For synchronization with a server, please look also the jqxDataAdapter plug-in's help documentation.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.updateRow(2,{FirstName: 'Nancy', LastName: 'Davolio'});
    }
  }
</script>

Unlocks a row.

<template>
  <JqxTreeGrid ref="myTreeGrid"
    :source="source" :columns="columns"
  />
</template>

 
<script>
  import JqxTreeGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtreegrid.vue';
 
  export default {
    components: {
      JqxTreeGrid
    },
    data: function () {
      return  {
        source: new jqx.dataAdapter(this.data),
        columns: [
            { text: 'FirstName', dataField: 'FirstName', width: 150, aggregates: ['count'] },
            { text: 'LastName', dataField: 'LastName', width: 120 },
            { text: 'Title', dataField: 'Title', width: 200 }
          ]
      }
    },
    beforeCreate: function () {
      let employees = [{
         'EmployeeID': 2,
         'FirstName': 'Andrew',
         'LastName': 'Fuller',
         'Title': 'Vice President, Sales',
         'expanded': 'true',
         children: [{
             'EmployeeID': 8,
             'FirstName': 'Laura', 
             'LastName': 'Callahan', 
             'Title': 'Inside Sales Coordinator'
         }, { 
             'EmployeeID': 5, 
             'FirstName': 'Steven', 
             'LastName': 'Buchanan', 
             'Title': 'Sales Manager', 
             'expanded': 'true', 
             children: [{ 
                 'EmployeeID': 6, 
                 'FirstName': 'Michael', 
                 'LastName': 'Suyama',
                 'Title': 'Sales Representative'
             }, {
                 'EmployeeID': 7, 
                 'FirstName': 'Robert', 
                 'LastName': 'King', 
                 'Title': 'Sales Representative'
             }]
         }]
      }]; 
     this.data = { 
         dataType: "json", 
         dataFields: [{ name: 'EmployeeID', type: 'number' }, 
             { name: 'FirstName', type: 'string' }, 
             { name: 'LastName', type: 'string' }, 
             { name: 'Title', type: 'string' }, 
             { name: 'children', type: 'array' }, 
             { name: 'expanded', type: 'bool' }], 
         hierarchy: { root: 'children' }, 
         id: 'EmployeeID', 
         localData: employees
      };
    },
    mounted: function () {
      this.$refs.myTreeGrid.unlockRow(2);
    }
  }
</script>