JQuery TreeGrid

Set the altRows property of the jqxTreeGrid. Author: http://jqwidgets.com

by shubham sharma

HTML

<script src="//jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="//jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="//jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="treeGrid"></div>

JavaScript

var employees = [{
         "EmployeeID": '1',
         'title' : '1',
         'action' : 'action',
         "expanded": "true",
         children: [{
           "EmployeeID": '11',
           'title' : '1.1',
           'action' : 'action',
           "expanded" : "true",
           children: [{
             "EmployeeID": '111',
             'title' : '1.1.1',
             'action' : 'action',
           }]
         },{
           "EmployeeID": '12',
           'title' : '1.2',
           'action' : 'action',
           "expanded" : "true",           
           children: [{
             "EmployeeID": '121',
             'title' : '1.2.1',
             'action' : 'action',
           }]
         }]
     }];

     //// prepare the data
     var source = {
         dataType: "json",
         dataFields: [{
             name: 'EmployeeID',
             type: 'number'
         }, {
             name: 'title',
             type: 'string'
         }, {
             name: 'action',
             type: 'string'
         }, {
             name: 'children',
             type: 'array'
         }, {
             name: 'expanded',
             type: 'bool'
         }, {
             name: 'BirthDate',
             type: 'date'
         }],
         hierarchy: {
             root: 'children'
         },
         id: 'EmployeeID',
         localData: employees
     };
     var dataAdapter = new $.jqx.dataAdapter(source);
     // create Tree Grid
     $("#treeGrid").jqxTreeGrid({
         width: '100%',
         source: dataAdapter,
         sortable: true,
         altRows:true,
         theme:'energyblue',
         rendered: function () {
             $(".comments").click(function (event) {
               // end edit and cancel changes.
               var rowKey = event.target.getAttribute('data-row');
             });
             $(".descriptiom").click(function (event) {
               // end edit and cancel changes.
               var rowKey =...