jQuery UI Widgets › Forums › TreeGrid › Arrow keys not working after clicking on collapse/expand triangle
Tagged: collapseRow, expandRow, focus, jqxTreeGrid, ready, rowcollapse, rowexpand, selectrow, treegrid
This topic contains 3 replies, has 2 voices, and was last updated by Nadezhda 9 years, 5 months ago.
Viewing 4 posts - 1 through 4 (of 4 total)
-
Author
-
Hello,
I’ve seen that the focus is somehow lost (selected row is maintained) after clicking on the expand/colapse traingles and you can no longer move with the arrow keys until you click again somewhere.
Qill there be a solution for this? Is there a workaround?
Hello dpibt,
Here is an example which works correctly on our side. If it doesn’t help you fix the issue, please make sure you are using the latest version of jQWidgets (3.7.1).
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> </head> <body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var employees = [{ "EmployeeID": 1, "FirstName": "Nancy", "LastName": "Davolio", "ReportsTo": 2, "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": 2, "FirstName": "Andrew", "LastName": "Fuller", "ReportsTo": null, "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" }, { "EmployeeID": 3, "FirstName": "Janet", "LastName": "Leverling", "ReportsTo": 2, "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", "ReportsTo": 2, "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", "ReportsTo": 2, "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" }, { "EmployeeID": 6, "FirstName": "Michael", "LastName": "Suyama", "ReportsTo": 5, "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", "ReportsTo": 5, "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": 8, "FirstName": "Laura", "LastName": "Callahan", "ReportsTo": 2, "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": 9, "FirstName": "Anne", "LastName": "Dodsworth", "ReportsTo": 5, "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: 'ReportsTo', 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: 'BirthDate', type: 'date' } ], hierarchy: { keyDataField: { name: 'EmployeeID' }, parentDataField: { name: 'ReportsTo' } }, id: 'EmployeeID', localData: employees }; var dataAdapter = new $.jqx.dataAdapter(source); // create Tree Grid $("#treeGrid").jqxTreeGrid( { width: 850, source: dataAdapter, editable: true, ready: function () { $("#treeGrid").jqxTreeGrid('expandRow', '2'); $("#treeGrid").jqxTreeGrid('selectRow', '2'); // focus jqxTreeGrid. $("#treeGrid").jqxTreeGrid('focus'); }, columns: [ { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 }, { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 150 }, { 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', width: 200 } ] }); $('#treeGrid').on('rowExpand', function (event) { var args = event.args; var row = args.row; $("#treeGrid").jqxTreeGrid('selectRow', row.uid); $("#treeGrid").jqxTreeGrid('focus'); }); $('#treeGrid').on('rowCollapse', function (event) { var args = event.args; var row = args.row; $("#treeGrid").jqxTreeGrid('selectRow', row.uid); $("#treeGrid").jqxTreeGrid('focus'); }); }); </script> <div id='jqxWidget'> <div id='treeGrid'> </div> <div style="font-family: Verdana; font-size: 12px; width: 670px;"> <ul> <li><b>Left Arrow</b> key - on an expanded record, collapses the record.</li> <li><b>Left Arrow</b> key - on a collapsed or end record moves focus to the record's parent.</li> <li><b>Right Arrow</b> key - on a collapsed record expands the record.</li> <li><b>Right Arrow</b> key - on an expanded record, moves to the first child record, or does nothing on an end record.</li> <li><b>Up Arrow</b> key is pressed - Selects the row above.</li> <li><b>Down Arrow</b> key is pressed - Selects the row below.</li> <li><b>Page Up/Down</b> is pressed - Navigate Up or Down with one page.</li> <li><b>Home/End</b> is pressed - Navigate to the first or last row on the current page.</li> <li><b>Enter</b> key is pressed - Saves the Edited Row.</li> <li><b>Esc</b> key is pressed - Closes all Editors and Cancels the changes.</li> <li><b>F2</b> key is pressed - Enters edit mode for the currently selected row.</li> <li><b>Shift+Arrow</b> key extends the selection.</li> <li><b>Shift</b> extends the selection when an end user clicks on a row.</li> <li><b>Ctrl</b> key is pressed - extends the selection when an end user clicks on a row. </li> <li><b>Space</b> key is pressed - Checks/Unchecks the selected record(s). </li> </ul> </div> </div> </div> </body> </html>Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/The solution of invoking the selectRow method when colapsing or exapnding is not very clean as it changes the behaviour.
If you select the row 1 and expand row 2 by mouse, row 1 is still selected, with this workaround if you select row 1 and expand row 2 by mouse, row 2 is selected and rowselect event is launched.
Is there a real solution that doesn’t change the behaviour?
Thanks
Hi dpibt,
The ‘ready’ callback function is called when the jqxTreeGrid is rendered and data binding is completed. The above code is just an example and ‘selectRow ‘method is not obligatory. You may only use the following part of code for ready function:
ready: function () { // focus jqxTreeGrid. $("#treeGrid").jqxTreeGrid('focus'); },Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
Viewing 4 posts - 1 through 4 (of 4 total)
You must be logged in to reply to this topic.