Skip to main content
All docs
V24.2

ASPxClientGantt.TaskShowing Event

Occurs before a task is displayed.

#Declaration

TypeScript
TaskShowing: ASPxClientEvent<ASPxClientGanttTaskShowingEventHandler<ASPxClientGantt>>

#Event Data

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.

#Remarks

Use the TaskShowing event to specify custom content for the processed task or cancel the task display (the cancel argument).

DevExpress ASP.NET Task Template

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()

#Concepts

See Also