If enabled using the rowClickHandling property, clicking a row header in the Gantt Chart component triggers the onRowClick and onRowClicked handlers.

You can use these events to open a dialog for task editing, add the task to the selection, or perform any other custom action.

Example

Gantt Chart config:

{
  rowClickHandling: "Enabled",
  onRowClick: args => {
    console.log("Row clicked", args.task);
  },
  // ...
}

ASP.NET WebForms

The row click event default action can be specified using the RowClickHandling property.

Supported RowClickHandling values:

  • "Enabled" - row clicking is enabled, client-side event handlers will be fired (default)

  • "Disabled" - row clicking is disabled

  • "CallBack" - server-side RowClick event handler will be fired

  • "Select" - the row will be selected upon click

ASP.NET MVC

Client-side redirect example

  • The default value of RowClickHandling is used ("Enabled").

  • The client-side RowClickJavaScript event handler is used to redirect the user to another page ("/Detail/taskId").

@Html.DayPilotGantt("gantt", new DayPilotGanttConfig {
    BackendUrl = Url.Action("Backend", "Gantt"),
    // ...
    RowClickJavaScript = "document.location.href = '/Detail/' + args.task.id();"
})

Server-side redirect example

  • RowClickHandling is set to "CallBack". This means the row click will fire OnRowClick event on the server side.

  • The client-side event handlers will also be fired - RowClickJavaScript is called before the callback, RowClickedJavaScript is called after the callback

MVC View

@Html.DayPilotGantt("gantt", new DayPilotGanttConfig {
    BackendUrl = Url.Action("Backend", "Gantt"),
    // ...
    RowClickHandling = DayPilot.Web.Mvc.Events.Gantt.RowClickHandlingType.CallBack,
    RowClickJavaScript = "window.console && console.log(args);"
})

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 RowClicking()
        {
            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 OnRowClick(RowClickArgs e)
            {
                Redirect("~/Gantt/RowSelecting");
            }

        }

    }
}