aspnet-js-aspxclientgantt-ed3c778a.md
Occurs before a task is displayed.
TaskShowing: ASPxClientEvent<ASPxClientGanttTaskShowingEventHandler<ASPxClientGantt>>
The TaskShowing event's data class is ASPxClientGanttTaskShowingEventArgs. The following properties provide information specific to this event:
| Property | Description |
|---|---|
| cancel | Specifies whether to cancel the related action (for example, row edit, export). Inherited from ASPxClientCancelEventArgs. |
| container | Returns a container for the task’s content. |
| item | Contains information about a task object and its settings. |
Use the TaskShowing event to specify custom content for the processed task or cancel the task display (the cancel argument).
Run Demo: ASPxGantt - Client-Side Events Run Demo: MVCxGantt - Client-Side Events
Web Forms:
<dx:ASPxGantt ID="Gantt" >
<ClientSideEvents TaskShowing="function(s, e) {
var customContainer = document.createElement("div");
customContainer.classList.add("custom-task");
customContainer.setAttribute("style", "width:" + e.item.taskSize.width + "px;");
customContainer.textContent = e.item.taskData["Subject"];
e.container.appendChild(customContainer);
}" />
</dx:ASPxGantt>
MVC:
@Html.DevExpress().Gantt(settings => {
settings.Name = "gantt";
settings.ClientSideEvents.TaskShowing = "function (s, e) {
var customContainer = document.createElement("div");
customContainer.classList.add("custom-task");
customContainer.setAttribute("style", "width:" + e.item.taskSize.width + "px;");
customContainer.textContent = e.item.taskData["Subject"];
e.container.appendChild(customContainer);
}";
...
}).Bind(
GanttDataProvider.Tasks, GanttDataProvider.Dependencies,
GanttDataProvider.Resources, GanttDataProvider.ResourceAssignments
).GetHtml()
See Also