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
?
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:
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" />