jQuery UI Widgets › Forums › TreeGrid › Expand All in TreeGrid
Tagged: angular treegrid, grid events, onblur event, treegrid
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 9 years, 9 months ago.
-
AuthorExpand All in TreeGrid Posts
-
Hi,
I have facing the two below problem 1. When page load expand all the records in treegrid 2. “onblur” event for cell (i.e., in the below code i have edit the rank. After i enter the rank am leave in the textcolumn which event is fire?….
<!DOCTYPE html> <html ng-app="jqxgridAngular"> <head> <title></title> <script src="js/jquery.js"></script> <script src="angular.min.js"></script> <link href="jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" /> <script src="jqwidgets/jqx-all.js"></script> <script type="text/javascript"> var app = angular.module('jqxgridAngular', ["jqwidgets"]); app.controller('StoryboardController', function ($scope) { var data = [ { "sciden": 49, "scname": "Scene 1", "sctag": "SCN_1", "scrank": 1, "scstatus": "D", "scwork": 60, "sclevel": 1, "plugin1": true, "plugin2": false, "scparent": 0 }, { "sciden": 50, "scname": "Scene 1.1", "sctag": "SCN_11", "scrank": 1, "scstatus": "D", "scwork": 30, "sclevel": 2, "plugin1": false, "plugin2": true, "scparent": 49 }, { "sciden": 51, "scname": "Scene 2", "sctag": "SCN_2", "scrank": 2, "scstatus": "D", "scwork": 4, "sclevel": 1, "plugin1": true, "plugin2": true, "scparent": 0 }, { "sciden": 52, "scname": "Scene 3", "sctag": "SCN_3", "scrank": 3, "scstatus": "D", "scwork": 15, "sclevel": 1, "plugin1": false, "plugin2": false, "scparent": 0 }, { "sciden": 53, "scname": "Scene 4", "sctag": "SCN_4", "scrank": 4, "scstatus": "D", "scwork": 30, "sclevel": 1, "plugin1": false, "plugin2": true, "scparent": 0 }, { "sciden": 54, "scname": "Scene 4.1", "sctag": "SCN_41", "scrank": 1, "scstatus": "D", "scwork": 15.5, "sclevel": 2, "plugin1": true, "plugin2": true, "scparent": 53 }, { "sciden": 55, "scname": "Scene 4.1.1", "sctag": "SCN_411", "scrank": 1, "scstatus": "D", "scwork": 8, "sclevel": 3, "plugin1": true, "plugin2": false, "scparent": 53 }, { "sciden": 56, "scname": "Scene 4.1.2", "sctag": "SCN_411", "scrank": 2, "scstatus": "D", "scwork": 8, "sclevel": 3, "plugin1": false, "plugin2": false, "scparent": 53 }, { "sciden": 57, "scname": "Scene 5", "sctag": "SCN_411", "scrank": 5, "scstatus": "D", "scwork": 2, "sclevel": 1, "plugin1": true, "plugin2": false, "scparent": 0 } ]; $scope.sceneGrid = data; $scope.sceneGridSettings = { height: 250, icons: true, width: "637px", editable: true, source: new $.jqx.dataAdapter({ dataType: "json", dataFields: [ { name: 'sciden', type: 'number' }, { name: 'scname', type: 'string' }, { name: 'sctag', type: 'string' }, { name: 'scrank', type: 'number' }, { name: 'scstatus', type: 'string' }, { name: 'scwork', type: 'number' }, { name: 'sclevel', type: 'number' }, { name: 'scparent', type: 'number' } ], hierarchy: { keyDataField: { name: 'sciden' }, parentDataField: { name: 'scparent' } }, id: 'sciden', localData: $scope.sceneGrid }), sortable: true, filterable: true, filterMode: 'advanced', ready: function () { $("#jqxSceneTreeGrid").jqxTreeGrid('expandRow', '1'); //$("#jqxSceneTreeGrid").jqxTreeGrid('expandRow', '2'); //$("#jqxSceneTreeGrid").jqxTreeGrid('expandRow', '3'); //$("#jqxSceneTreeGrid").jqxTreeGrid('expandRow', '4'); var rows = $("#jqxSceneTreeGrid").jqxTreeGrid('getRows'); console.log(rows); var traverseTree = function (rows) { for (var i = 0; i < rows.length; i++) { console.log('inside it'); $("#jqxSceneTreeGrid").jqxTreeGrid('expandRow', rows[i - 1].UNIQUEID); } }; var idColumn = $("#jqxSceneTreeGrid").jqxTreeGrid('source')._source.id; traverseTree(rows); }, columns: [ { text: 'Scene ID', dataField: 'sciden', editable: false, width: 110, hidden: true }, { text: 'Scene Name', dataField: 'scname', editable: false, width: 110 }, { text: 'Scene Tag', dataField: 'sctag', editable: false, width: 110, hidden: true }, { text: 'Rank', datafield: 'scrank', width: 50, editable: true, align: 'right', cellsalign: 'right' }, { text: 'Status', dataField: 'scstatus', editable: false, width: 110 }, { text: 'Work (in Hrs)', dataField: 'scwork', editable: false, width: 70, cellsalign: 'right' }, { text: 'Level', dataField: 'sclevel', editable: false, width: 110, hidden: true, cellsalign: 'right' }, { text: '', dataField: 'stiden', sortable: false, editable: false, filterable: false, width: 300 } ] }; }); </script> </head> <body ng-controller="StoryboardController"> <jqx-tree-grid jqx-settings="sceneGridSettings" id="jqxSceneTreeGrid" jqx-instance="jqxSceneTreeGrid"> </jqx-tree-grid> </body> </html>
Hi iplan,
1. We do not have expandAll method in jqxTreeGrid. There is expandRow method which you can use for expanding a row by its ID.
2. The events raised by jqxTreeGrid while editing are documented on the TreeGrid’s API page – http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtreegrid/jquery-treegrid-api.htmBest Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.