Selection

Row selection

The row selection in Gantt can be enabled or disabled, by using the allowSelection property. You can able to get the selected row object using the selectedItem property from the Gantt model. The following code example shows how to disable the row selection in Gantt.

  • javascript
  • $("#GanttContainer").ejGantt({
    
        //...
    
        allowSelection: false,
    
    });

    Selecting a row on initial load

    You can select a row on load time by setting the index of the row to the selectedRowIndex property. Find the following code example for details.

  • javascript
  • $("#GanttContainer").ejGantt({
    
        //...
    
        selectedRowIndex: 3,
    
    });

    Selecting a row programmatically

    You can also select a row programmatically by setting index of the row value to the selectedRowIndex property. The following code shows to select a row programmatically with a custom button click action.

  • html
  • <body>
    
        <button id="selectRow">SelectRow</button> //...
    
    </body>
  • javascript
  • $("#GanttContainer").ejGantt({
    
        //...
    
    });
    
    $("#selectRow").click(function(args) {
    
        $("#GanttContainer ").ejGantt("option", "selectedRowIndex", 4);
    
    })

    Multiple row selection

    It is also possible to select multiple rows by setting selectionType as multiple. You can select more than one row by holding down CTRL key while selecting multiple rows.
    The following code example explains how to enable multiple selection in Gantt.

  • js
  • $("#GanttContainer").ejGantt({            
                         selectionType: "multiple",
                         selectionMode: "row",					 
            });

    The output of the Gantt with multiple row selection is as follows.

    To enable multiple selection, you can set the selectionType property either as multiple or enumeration value ej.Gantt.SelectionType.Multiple.

    Selecting multiple rows programmatically

    You can also select multiple rows programmatically by using the selectMultipleRows public method. The following code example explains how to enable multiple selection in Gantt.

  • html
  • <body>
    
        <button id="selectMultipleRow">SelectMultipleRows</button> //...
    
    </body>
  • javascript
  • $("#GanttContainer").ejGantt({
            selectionType: "multiple",
            selectionMode: "row",
        //...
    
    });
    
    $("#selectMultipleRow").click(function(args) {
    
         //create Gantt object
    
        var ganttObj = $("#GanttContainer").data("ejGantt"),
    
        multipleRowIndex = [1,0,5,7];     
    
        ganttObj.selectMultipleRows(multipleRowIndex);
    
    })

    Customize row selection action

    While selecting a row in Gantt, rowSelecting and rowSelected event will be triggered. Row selecting event will be triggered on initialization of row selection action. In rowSelecting event we can get the previously selected row and current selecting row’s information, using this information we can prevent selection of particular row. The rowSelected event will be triggered on completion of row selection action, in this event we can get the current selected row’s information. The following code example shows how to prevent the selection of particular row using rowSelecting event.

  • javascript
  • $("#GanttContainer").ejGantt({
            allowSelection: true,
            selectionMode: "row",
            selectionType: "single",
            rowSelecting: function(args) {
                if(args.data.taskId == 5) // prevent selection of Task id 5
                    args.cancel = true;
            },
            //...
        });

    You can find the JS playground sample for this here.

    Cell selection

    You can select a cell in Gantt by setting the selectionMode property as cell. And you can able to get the selected cell information using the selectedCellIndexes property from the Gantt object. The selectedCellIndexes is an object collection, which has the cellIndex and rowIndex information of the selected cells.

    Find the code example below to enable the cell selection in Gantt.

  • javascript
  • $("#GanttContainer").ejGantt({
    
        //...
    
        selectionMode: "cell",
    
    });

    The following screen shots shows you cell selection.

    Selecting multiple cells

    You can also select multiple cells by setting the selectionType property as multiple while the selectionMode property is set to cell. Multiple cells can be selected by holding the ctrl key and to click on the cells. The following code example shows you to select multiple cells.

  • javascript
  • $("#GanttContainer").ejGantt({
    
        //...
    
        selectionMode: "cell",
    
        selectionType: "multiple",
    
    });

    Select cells programmatically

    You can select the cells programmatically using the selectCells public method. Find the code example below for details.

  • html
  • <body>
    
        <button id="selectCells">SelectCells</button> //…
    
    </body>
  • javascript
  • $("#GanttContainer").ejGantt({
    
    
        //...
    
    });
    
    $("#selectCells").click(function(args) {
    
        //create Gantt object
    
        var ganttObj = $("#GanttContainer").data("ejGantt");
    
        cellIndex = [{
            rowIndex: 2,
            cellIndex: 1
        }, {
            rowIndex: 3,
            cellIndex: 1
        }];
    
        ganttObj.selectCells(cellIndex);
    
    })

    Customize cell selection action

    While selecting a cell in Gantt, cellSelecting and cellSelected event will be triggered. Cell selecting event will be triggered on initialization of cell selection action. In cellSelecting event we can get the current selecting cell information, using this information we can prevent selection of particular cell in particular row. The cellSelected event will be triggered on completion of cell selection action, in this event we can get the current selected cell’s information. The following code example shows how to prevent the selection of particular cell using cellSelecting event.

  • javascript
  • $("#GanttContainer").ejGantt({
            allowSelection: true,
            selectionMode: "cell",
            selectionType: "single",
            cellSelecting: function(args) {
                if(args.data.taskId == 5 && args.cellIndex == 1) // prevent selection of Task Name cell of Task id 5
                    args.cancel = true;
            },
            //...
        });

    You can find the JS playground sample for this here.

    Multiple Selection – Touch Option

    It is possible to select rows using touch action in Gantt. Gantt provides support for both single selection and multiple row selection using touch action. For multiple row selection, when we tap on a cell, a helper icon will be displayed using that multiple rows can be selected.

    The following code example describes how to enable multiple selection in Gantt.

  • js
  • $("#GanttContainer"). ejGantt ({
          selectionType: "multiple",
          selectionMode: "row",
       //..
    });

    The following output displays the result of multiple selection in touch device environment.