html5 gantt chart row selecting

The Gantt chart allows selecting rows:

  • Row selecting is enabled by default. However, the default RowClickHandling value is "Enabled" which doesn't do any specific action. If you want the row to be selected on click you need to set RowClickHandling to "Select".
  • You can select/deselect multiple rows using Ctrl+click.

ASP.NET MVC

1. To make row selecting accessible to the users, you need to map row header click to "select" action:

@Html.DayPilotGantt("gantt", new DayPilotGanttConfig {
    BackendUrl = Url.Action("Backend", "Gantt"),
    // ..
    RowClickHandling = DayPilot.Web.Mvc.Events.Gantt.RowClickHandlingType.Select,
})

2. The default RowSelectHandling value is set to DayPilot.Web.Mvc.Events.Gantt.RowSelectHandlingType.Update. This means the row will be highlighted on client side without any server-side request.

The RowSelectHandling options are:

  • Update
  • CallBack (server-side RowSelect event will be fired when the row selection is changed by the user)
  • Disabled (row selecting is disabled)

3. You can handle the selection event on the client side using RowSelectJavaScript and RowSelectedJavaScript. You can cancel the default action (Update by default) in RowSelectJavaScript by calling args.preventDefault():

@Html.DayPilotGantt("gantt", new DayPilotGanttConfig {
    BackendUrl = Url.Action("Backend", "Gantt"),
    // ..
    RowClickHandling = DayPilot.Web.Mvc.Events.Gantt.RowClickHandlingType.Select,
    RowSelectJavaScript = "if (args.task.start() < DayPilot.Date.today()) { args.preventDefault(); gantt.message('You cannot select a task that started before today.');"
})

4. You can use the client-side API to read and modify the selection.

Select the row that shows task with id "1":

<script>
var task = gantt.tasks.find("1");
gantt.rows.selection.add(task);
</script>

Clear the selection:

<script>
gantt.rows.selection.clear();
</script>

Get the current selection:

<script>
var selectedTasks = gantt.rows.selection.get();
</script>

5. You can read the selected rows on the server side using SelectedRows property. This example invokes Command event on the server side using a hyperlink:

MVC View

<div><a href="javascript:gantt.commandCallBack('showSelectedRows');">Show selected rows</a></div>

@Html.DayPilotGantt("gantt", new DayPilotGanttConfig {
    BackendUrl = Url.Action("Backend", "Gantt"),
    // ...
    RowClickHandling = DayPilot.Web.Mvc.Events.Gantt.RowClickHandlingType.Select,
})

MVC Controller

using System;
using System.Web.Mvc;
using DayPilot.Web.Mvc;
using DayPilot.Web.Mvc.Events.Gantt;
using DayPilot.Web.Mvc.Json;

namespace MvcApplication1.Controllers
{
    [HandleError]
    public class GanttController : Controller
    {
        // ...
    
        public ActionResult RowSelecting()
        {
            return View();
        }

        public ActionResult Backend()
        {
            return new Gantt().CallBack(this);
        }

        class Gantt : DayPilotGantt
        {
            protected override void OnInit(InitArgs e)
            {
                Tasks = new TaskManager(Controller, "default").TaskData;
                Links = new TaskManager(Controller).LinkData;                

                ScrollTo(DateTime.Today);
                UpdateWithMessage("Welcome!");
            }
            
            // ...

            protected override void OnCommand(CommandArgs e)
            {
                switch (e.Command)
                {
                    case "showSelectedRows":
                        UpdateWithMessage("Number of selected rows: " + SelectedRows.Count);    
                        break;
                }
            }

        }
    }
}