jQuery UI Widgets Forums TreeGrid Expand All in TreeGrid

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 9 years, 9 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Expand All in TreeGrid #70632

    iplan
    Participant

    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>
    Expand All in TreeGrid #70633

    Peter Stoev
    Keymaster

    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.htm

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.