Selection

The tree grid control provides support for row and cell selections. 

Row selection

You can enable or disable the row selection in tree grid using the e-allowselection property. By default, row selection is enabled in tree grid.
The following code example shows how to disable the row selection in tree grid.

  • js
  • <body ng-controller="TreeGridCtrl">
        <!--Add  treegrid control here-->
        <div id="TreeGridContainer" ej-treegrid //... e-allowselection="false">
        </div>
    </body>

    The output of the tree grid with row selection is as follows:

    Selecting a row at initial load

    You can select a row at initial load by setting the index of row to the e-selectedrowindex property. This is demonstrated as follows.

  • js
  • <body ng-controller="TreeGridCtrl">
        <!--Add  treegrid control here-->
        <div id="TreeGridContainer" ej-treegrid //... e-selectedrowindex="3">
        </div>
    </body>

    Multiple row selection

    You can also select multiple rows by setting the e-selectionsettings.selectionType to multiple. More than one row can be selected by holding down CTRL key and clicking the rows.
    The following code example explains how to enable multiple selection in tree grid.

  • js
  • <body ng-controller="TreeGridCtrl">
        <!--Add  treegrid control here-->
        <div id="TreeGridContainer" ej-treegrid //... 
        e-selectionsettings= "selectionSettings"
        >
        </div>
        <script>
             var selectionSettings= {
                         selectionType: "ej.TreeGrid.SelectionType.Multiple"                                 
                   }
        angular.module('listCtrl', ['ejangular'])
            .controller('TreeGridCtrl', function($scope) {
                //...
                $scope.selectionSettings = "selectionSettings";
            });
    </script>
    </body>

    The output of the tree grid with multiple row selection is as follows:

    To enable multiple selection, set the e-selectionsettings.selectionType property to multiple or enumeration value ej.TreeGrid.SelectionType.Multiple.

    Selecting a row programmatically

    You can select a row programmatically by setting the row index value to the e-selectedrowindex property.
    The following code shows how to select a row programmatically with button click action.

  • html
  • <html>
            <body>
            <button id="selectRow">SelectRow</button>
            //...
             <div id="TreeGridContainer" ej-treegrid //...
        >
        </div>
            </body>
        </html>
  • js
  • $("#selectRow").click(function (args) {
             $("#TreeGridContainer ").ejTreeGrid("option", "selectedRowIndex", 4);           
         })

    Cell selection

    You can select cells in tree grid by setting the e-selectionsettings.selectionMode property to cell.
    The following code sample helps you to enable the cell selection in tree grid.

  • html
  • <body ng-controller="TreeGridCtrl">
        <!--Add  treegrid control here-->
        <div id="TreeGridContainer" ej-treegrid //... 
        e-selectionsettings= "selectionSettings"
        >
        </div>
        <script>
             var selectionSettings=  {
               selectionMode: "ej.TreeGrid.SelectionType.Cell",                                 
             }
        angular.module('listCtrl', ['ejangular'])
            .controller('TreeGridCtrl', function($scope) {
                //...
                $scope.selectionSettings = "selectionSettings";
            });
    </script>
    </body>

    The output of the tree grid with cell selection is as follows:

    Multiple cell selection

    You can also select multiple cells by setting the e-selectionsettings.selectionType property to multiple.
    Multiple selection can be done by holding the CTRL key and clicking required cells.
    The following code example shows you to select multiple cells.

  • js
  • <body ng-controller="TreeGridCtrl">
        <!--Add  treegrid control here-->
        <div id="TreeGridContainer" ej-treegrid //... 
        e-selectionsettings= "selectionSettings"
        >
        </div>
        <script>
             var selectionSettings=  {
                selectionType: "ej.TreeGrid.SelectionType.Multiple",
                selectionMode: "ej.TreeGrid.SelectionType.Cell",
            }
        angular.module('listCtrl', ['ejangular'])
            .controller('TreeGridCtrl', function($scope) {
                //...
                $scope.selectionSettings = "selectionSettings";
            });
    </script>
    </body>

    The output of the tree grid with multiple cell selection is as follows:

    Selecting cells programmatically

    You can select the cells programmatically using the selectCells public method. This is demonstrated as follows.

  • html
  • <html>
            <body>
             <button id="selectCells">SelectCells</button>
             //...
             <div id="TreeGridContainer" ej-treegrid //... >
             </div>
            </body> 
        </html>
  • js
  • $("#selectCells").click(function (args) {
                //create TreeGrid object
                var TreeGridObj = $("#TreeGridContainer").data("ejTreeGrid");
                cellIndex = [{ rowIndex: 2, cellIndex: 1 }, {rowIndex:3,cellIndex:1}];
                TreeGridObj.selectCells(cellIndex);
         })

    Checkbox selection

    Tree grid supports checkbox selection. To enable the checkbox selection, set the e-selectionsettings.selectionType property to checkbox and the e-selectionsettings.selectionMode property to row. When checkbox selection is enabled, the checkbox column will be displayed as the left most column by default.

    Column header checkbox

    You can select or unselect all the tree grid rows using column header checkbox. To enable this, set the e-selectionsettings.enableSelectAll property to true. The following code sample explains how to enable the column header checkbox.

  • js
  • <body ng-controller="TreeGridCtrl">
        <!--Add  treegrid control here-->
        <div id="TreeGridContainer" ej-treegrid //... 
        e-selectionsettings= "selectionSettings"
        >
        </div>
        <script>
             var selectionSettings=  {
                         selectionType: "ej.TreeGrid.SelectionType.Checkbox",
                         selectionMode: "ej.TreeGrid.SelectionType.Row",
                         enableSelectAll: true,                        
                     },
        angular.module('listCtrl', ['ejangular'])
            .controller('TreeGridCtrl', function($scope) {
                //...
                $scope.selectionSettings = "selectionSettings";
            });
    </script>
    </body>

    The output of the tree grid with checkbox enabled in column header is as follows:

    Hierarchy selection

    You can select the rows hierarchically using checkboxes in tree grid by enabling the e-selectionsettings.enableHierarchySelection property.
    In this selection the hierarchy between the records will be retained, where the child records are selected by selecting its parent record’s checkbox and parent record checkbox is selected by checking all of its child items.

    The following code sample explains enabling hierarchy selection in tree grid.

  • js
  • <body ng-controller="TreeGridCtrl">
        <!--Add  treegrid control here-->
        <div id="TreeGridContainer" ej-treegrid //... 
        e-selectionsettings= "selectionSettings"
        >
        </div>
        <script>
        var selectionSettings = {
                selectionType: "ej.TreeGrid.SelectionType.Checkbox",
                selectionMode: " ej.TreeGrid.SelectionType.Row",
                enableHierarchySelection: true,
            },
            angular.module('listCtrl', ['ejangular'])
            .controller('TreeGridCtrl', function($scope) {
                //...
                $scope.selectionSettings = "selectionSettings";
            });
    </script>
    </body>

    The output of the tree grid with hierarchy selection enabled is as follows:

    Checkbox column

    You can change the default index of the checkbox column and display the checkboxes in any of the existing column. To enable the checkbox in any of the column, set the showCheckbox property to true in the column object.

  • js
  • <body ng-controller="TreeGridCtrl">
        <!--Add  treegrid control here-->
        <div id="TreeGridContainer" ej-treegrid //... 
        e-selectionsettings= "selectionSettings"
        e-columns= "columns"
        >
        </div>
        <script>
        var selectionSettings = {
                selectionType: "ej.TreeGrid.SelectionType.Checkbox",
                selectionMode: " ej.TreeGrid.SelectionType.Row",
            },
            var columns = [{
                    field: "taskID",
                    headerText: "Task Id",
                    editType: "numericedit"
                },
                {
                    field: "taskName",
                    headerText: "Task Name",
                    editType: "stringedit",
                    showCheckbox: true
                },
            ]
        angular.module('listCtrl', ['ejangular'])
            .controller('TreeGridCtrl', function($scope) {
                //...
                $scope.selectionSettings = "selectionSettings";
                $scope.columns = "columns";
            });
    </script>
    </body>

    The output of the tree grid with checkbox enabled in task name column is as follows: