ASP.NET MVC
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Selection in ASP.NET MVC Gantt control

Selection provides an option to highlight a row or a cell. It can be done using arrow keys or by scrolling down the mouse. To disable selection in the Gantt control, set the AllowSelection to false.

The Gantt control supports two types of selection that can be set by using the SelectionSettings.Type property. They are:

  • Single: Sets a single value by default and allows only selection of a single row or a cell.
  • Multiple: Allows you to select multiple rows or cells. To perform the multi-selection, press and hold the CTRL key and click the desired rows or cells.

Selection mode

The Gantt control supports three types of selection modes that can be set by using the SelectionSettings.Mode. They are:

  • Row: Allows you to select only rows, and the row value is set by default.
  • Cell: Allows you to select only cells.
  • Both: Allows you to select rows and cells at the same time.
razor
bothType.cs
@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts =>
     ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
     ).SelectionSettings(ss=>ss.Mode(Syncfusion.EJ2.Grids.SelectionMode.Both)).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Row selection

The row selection in the Gantt control can be enabled or disabled using the AllowSelection property. You can get the selected row object using the getSelectedRecords method. The following code example shows how to disable the row selection in Gantt.

razor
disableSelection.cs
@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").AllowSelection(false).TaskFields(ts => ts.Id(
        "TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Row selection is the default type of Gantt selection mode.

Selecting a row on initial load

You can select a row at the time of loading by setting the index of the row to the SelectedRowIndex property. Find the following code example for details.

razor
initialLoadSelection.cs
@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").AllowSelection(
        true).SelectedRowIndex(3).TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration(
            "Duration").Progress("Progress").Child("SubTasks")).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Selecting a row dynamically

You can also select a row dynamically using the selectRow method. The following code demonstrates how to select a row dynamically by clicking the custom button.

razor
selectRow.cs
@Html.EJS().Button("selectRow").Content("Select Row").CssClass("e-primary").Render()

        @Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").AllowSelection(true).TaskFields(ts =>
         ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
         ).Render()
        
		
	<script>
        document.getElementById('selectRow').addEventListener('click', function (args) {
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            ganttObj.selectionModule.selectRow(2); // passing the record index to select the row
        });
    </script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Multiple row selection

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

razor
multipleRowSelection.cs
@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id(
      "TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
      ).SelectionSettings(ss=>ss.Mode(Syncfusion.EJ2.Grids.SelectionMode.Row).Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Selecting multiple rows dynamically

You can also select rows dynamically using the selectRows method. The following code demonstrates how to select rows dynamically by clicking the custom button.

razor
selectRows.cs
@Html.EJS().Button("selectRows").Content("Select Rows").CssClass("e-primary").Render()

        @Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").AllowSelection(true).SelectionSettings(ss =>
         ss.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate(
             "EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Render()
		
	<script>
        document.getElementById('selectRows').addEventListener('click', function (args) {
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            ganttObj.selectionModule.selectRows([1, 2, 3]); // passing the record index as array collection
        });
    </script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Customize row selection action

While selecting a row in Gantt, the RowSelecting and RowSelected events will be triggered. The the RowSelecting event will be triggered on initialization of row selection, and you can get the previously selected row and current selecting row’s information, which is used to prevent selection of a particular row. The RowSelected event will be triggered on completion of row selection action, and you can get the current selected row’s information through this event. The following code example demonstrates how to prevent the selection of a row using the RowSelecting event.

razor
rowSelectingEvent.cs
@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").AllowSelection(true).RowSelecting(
     "rowSelecting").TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration(
         "Duration").Progress("Progress").Child("SubTasks")).Render()
    <script>
        function rowSelecting(args) {
            if (args.rowIndex == 3) {
                args.cancel = true;
            }
        }
    </script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

In the Gantt control, when you click an already selected row, selection will be cleared. While deselecting a row in Gantt, the RowDeselecting and RowDeselected events will occur. The RowDeselecting event will occur on initialization of deselecting row, and you can get the current deselecting row’s information to prevent the deselection of particular row. The RowDeselected event will occur on completion of row deselection action, and you can get the current deselected row’s information.

Toggle selection

The toggle selection allows you to select and deselect a specific row or cell. To enable toggle selection, set the enableToggle property of the selectionSettings to true. If you click the selected row or cell, then it will be deselected and vice versa. By default, the enableToggle property is set to false.

razor
toggleselection.cs
@Html.EJS().Button("toggle").Content("Disable Toggle").CssClass("e-primary").Render()

        @Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").AllowSelection(true).SelectionSettings(ss =>
         ss.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple).EnableToggle(true)).TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate(
             "StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Render()
		
	<script>
        document.getElementById('toggle').addEventListener('click', function (args) {
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            ganttObj.selectionSettings.enableToggle = false;
        });
    </script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Clear selection

You can clear the selected cells and selected rows by using a method called clearSelection. The following code example demonstrates how to clear the selected rows in Gantt Chart.

razor
clearselection.cs
@Html.EJS().Button("selectRows").Content("Select Rows").CssClass("e-primary").Render()
  @Html.EJS().Button("clearSelection").Content("Clear Selection").CssClass("e-primary").Render()

        @Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").AllowSelection(true).SelectionSettings(ss =>
         ss.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate(
             "EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Render()
		
	<script>
        document.getElementById('selectRows').addEventListener('click', function (args) {
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            ganttObj.selectionModule.selectRows([1, 2, 3]); // passing the record index as array collection
        });

        document.getElementById('clearSelection').addEventListener('click', function (args) {
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            ganttObj.clearSelection(); // Clear the selected rows
        });
    </script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}
Previous
Next