jqxTreeGrid rowClick and rowDoubleClick vs rowSelect

Question

Why would the rowDoubleClick or rowClick event return a more robust object than the rowSelect?

For example rowDoubleClick

   $('#tree01').on('rowDoubleClick', function (event){
        var args = event.args;
        var row = args.row;
        var key = args.key;
        var dataField = args.dataField;
        var clickEvent = args.originalEvent;
    });

While rowSelect returns a "thinner" object.

    $('#tree01').on('rowSelect', function (event) {
        var args = event.args;
        var row = args.row;
        var key = args.key;
    });

As illustrated in the image below, the rowSelect excludes the parent object which includes records (its peers) and its parent.

My question is this...

How can I get the same object with a rowSelect as I do with rowClick? Can I programmatically force a rowClick via a rowSelect?

Answer 1

At the moment I didn't get any issue. After reading documentation and studying samples I never got a thinner object. I wish to share my little snippet in order to better understand your issue.

The sequence of events is:

1. rowClick
2. rowDoubleClick
3. rowSelect

From the online documentation you can see that each event returns a row object. Such an object is null if the row is the root otherwise its value is the parent row's object. In any case you can always use the method:

$("#treeGrid").jqxTreeGrid('getRow', event.args.key);

The dataField instead is the column name so this value cannot be available in the select event.

var employees = [
    {
        "EmployeeID": 2,
        "FirstName": "Andrew",
        "LastName": "Fuller",
        "Country": "USA",
        "Title": "Vice President, Sales",
        "HireDate": "1992-08-14 00:00:00",
        "BirthDate": "1952-02-19 00:00:00",
        "City": "Tacoma",
        "Address": "908 W. Capital Way",
        "expanded": "true",
        children: [
            {
                "EmployeeID": 8,
                "FirstName": "Laura",
                "LastName": "Callahan",
                "Country": "USA",
                "Title": "Inside Sales Coordinator",
                "HireDate": "1994-03-05 00:00:00",
                "BirthDate": "1958-01-09 00:00:00",
                "City": "Seattle",
                "Address": "4726 - 11th Ave. N.E."
            },
            {
                "EmployeeID": 1,
                "FirstName": "Nancy",
                "LastName": "Davolio",
                "Country": "USA",
                "Title": "Sales Representative",
                "HireDate": "1992-05-01 00:00:00",
                "BirthDate": "1948-12-08 00:00:00",
                "City": "Seattle",
                "Address": "507 - 20th Ave. E.Apt. 2A"
            },
            {
                "EmployeeID": 3,
                "FirstName": "Janet",
                "LastName": "Leverling",
                "Country": "USA",
                "Title": "Sales Representative",
                "HireDate": "1992-04-01 00:00:00",
                "BirthDate": "1963-08-30 00:00:00",
                "City": "Kirkland",
                "Address": "722 Moss Bay Blvd."
            },
            {
                "EmployeeID": 4,
                "FirstName": "Margaret",
                "LastName": "Peacock",
                "Country": "USA",
                "Title": "Sales Representative",
                "HireDate": "1993-05-03 00:00:00",
                "BirthDate": "1937-09-19 00:00:00",
                "City": "Redmond",
                "Address": "4110 Old Redmond Rd."
            },
            {
                "EmployeeID": 5,
                "FirstName": "Steven",
                "LastName": "Buchanan",
                "Country": "UK",
                "Title": "Sales Manager",
                "HireDate": "1993-10-17 00:00:00",
                "BirthDate": "1955-03-04 00:00:00",
                "City": "London",
                "Address": "14 Garrett Hill",
                "expanded": "true",
                children: [
                    {
                        "EmployeeID": 6,
                        "FirstName": "Michael",
                        "LastName": "Suyama",
                        "Country": "UK",
                        "Title": "Sales Representative",
                        "HireDate": "1993-10-17 00:00:00",
                        "BirthDate": "1963-07-02 00:00:00",
                        "City": "London",
                        "Address": "Coventry House Miner Rd."
                    },
                    {
                        "EmployeeID": 7,
                        "FirstName": "Robert",
                        "LastName": "King",
                        "Country": "UK",
                        "Title": "Sales Representative",
                        "HireDate": "1994-01-02 00:00:00",
                        "BirthDate": "1960-05-29 00:00:00",
                        "City": "London",
                        "Address": "Edgeham Hollow Winchester Way"
                    },
                    {
                        "EmployeeID": 9,
                        "FirstName": "Anne",
                        "LastName": "Dodsworth",
                        "Country": "UK",
                        "Title": "Sales Representative",
                        "HireDate": "1994-11-15 00:00:00",
                        "BirthDate": "1966-01-27 00:00:00",
                        "City": "London",
                        "Address": "7 Houndstooth Rd."
                    }
                ]
            }
        ]
    }
];
// prepare the data
var source =
{
    dataType: "json",
    dataFields: [
        {name: 'EmployeeID', type: 'number'},
        {name: 'FirstName', type: 'string'},
        {name: 'LastName', type: 'string'},
        {name: 'Country', type: 'string'},
        {name: 'City', type: 'string'},
        {name: 'Address', type: 'string'},
        {name: 'Title', type: 'string'},
        {name: 'HireDate', type: 'date'},
        {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: 550,
    height: 200,
    theme: "arctic",
    source: dataAdapter,
    sortable: true,
    columns: [
        {text: 'FirstName', dataField: 'FirstName', width: 200},
        {text: 'LastName', dataField: 'LastName', width: 120},
        {text: 'Title', dataField: 'Title', width: 160},
        {text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120},
        {text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120},
        {text: 'Address', dataField: 'Address', width: 250},
        {text: 'City', dataField: 'City', width: 120},
        {text: 'Country', dataField: 'Country'}
    ]
});

$('#treeGrid').on('rowDoubleClick', function (event) {
    var row = event.args.row;
    var parent = event.args.row.parent;
    var dataField = event.args.dataField;
    console.log('rowDoubleClick: (dataField is: ' +  dataField + ') row: ' + ((row != null) ? 'not null' : 'null') + ' parent: '  + ((parent != null) ? 'not null' : 'null'));
});
$('#treeGrid').on('rowClick', function (event) {
    var row = event.args.row;
    var parent = event.args.row.parent;
    var dataField = event.args.dataField;
    console.log('rowClick: (dataField is: ' +  dataField + ') row: ' + ((row != null) ? 'not null' : 'null') + ' parent: '  + ((parent != null) ? 'not null' : 'null'));
});
$('#treeGrid').on('rowSelect', function (event) {
    var row = event.args.row;
    var parent = event.args.row.parent;
    if (parent == null) {
        var parent = $("#treeGrid").jqxTreeGrid('getRow', event.args.key);
    }
console.log('rowSelect: row: ' + ((row != null) ? 'not null' : 'null') + ' parent: '  + ((parent != null) ? 'not null' : 'null'));
});
$("#jqxbutton").jqxButton({
    theme: 'energyblue',
    height: 30
});
$('#jqxbutton').click(function () {
    $("#treeGrid").jqxTreeGrid('selectRow', 1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>

<div id="treeGrid"></div>
<input type="button" style="margin: 20px;" id="jqxbutton" value="Select row" />