Cell selection action in gantt control

18 Dec 20256 minutes to read

You can select a cell in the Gantt control by setting the selectionSettings.mode property to cell. You can get the selected cell information using the getSelectedRowCellIndexes method. This method returns the result as an object collection, which has cellIndexes and rowIndex information of the selected cells.

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

CSHTML

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" allowSelection="false">
                    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                         endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
                    </e-gantt-taskfields>
                    
</ejs-gantt>

CellSelection.cs

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Selecting multiple cells

You can select multiple cells by setting the SelectionSettings.Type property to Multiple. You can select more than one cell by holding down the CTRL key while selecting multiple cells. The following code example explains how to enable multiple selection in Gantt.

CSHTML

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" allowSelection="true">
                    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                         endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
                    </e-gantt-taskfields>
                    <e-gantt-selectionSettings mode="Cell" type="Multiple"></e-gantt-selectionSettings>
                </ejs-gantt>

MultipleCellSelection.cs

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Selecting a cell dynamically

You can select a cell dynamically using the selectCell method. Refer to the following code example for details.

CSHTML

<ejs-button id="selectCell" content="Select Cell" cssClass="e-primary"></ejs-button>

        <ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" allowSelection="true">
                <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                    endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
        </e-gantt-taskfields>
                    
 </ejs-gantt> 
 
   <script>
        document.getElementById('selectCell').addEventListener('click', function (args) {
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            ganttObj.selectionModule.selectCell(2); // passing the record index to select the cell
        });
    </script>

SelectCell.cs

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Customize cell selection action

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

CSHTML

<ejs-gantt id='Gantt' dataSource="ViewBag.dataSource" height="450px" allowSelection="true" cellSelecting="cellSelecting">
                    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
                            endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
                    </e-gantt-taskfields>
					</ejs-gantt>
					
		<script>
		  function cellSelecting(args) {
            if (args.cellIndex == 3) {
                args.cancel = true;
            }
	      }
        </script>

CellSelectingEvent.cs

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Limitations for cell selection

• Cell-based selection is not supported when virtualization is enabled.