如何在Devexpress Gantt中添加cellClick或RowClick点击事件？

问题解答 #

DevExpress 的 ASPxGantt 控件原生支持任务列表的行点击、单元格点击事件，你可以根据需求选择客户端或服务端事件配置，具体用法如下：

1. 客户端事件配置（前端处理点击逻辑）

你可以在控件声明中添加 ClientSideEvents 节点绑定对应事件，修改后的控件代码示例：

<dx:ASPxGantt ID="Gantt" runat="server" Height="700" Width="100%" >
    <ClientSideEvents 
        TaskListRowClick="function(s, e) {
            // 行点击逻辑，e.key 可以拿到当前行对应任务的ID
            console.log('点击的行任务ID：', e.key);
        }"
        TaskListCellClick="function(s, e) {
            // 单元格点击逻辑，e.column 可以拿到当前点击的列信息，e.key 是任务ID
            console.log('点击的列字段名：', e.column.fieldName, '任务ID：', e.key);
        }"
    />
    <SettingsTaskList Width="40%">
        <Columns>
            <dx:GanttTextColumn FieldName="FleetNo" Caption="Fleet No" Width="100" />
        </Columns>
    </SettingsTaskList>
</dx:ASPxGantt>

2. 服务端事件配置（后端处理点击逻辑）

如果需要在后端处理点击事件，需要先开启控件回调，绑定服务端 TaskListRowClick 事件：

<dx:ASPxGantt ID="Gantt" runat="server" Height="700" Width="100%" 
    OnTaskListRowClick="Gantt_TaskListRowClick" EnableCallbacks="true">
    <SettingsTaskList Width="40%">
        <Columns>
            <dx:GanttTextColumn FieldName="FleetNo" Caption="Fleet No" Width="100" />
        </Columns>
    </SettingsTaskList>
</dx:ASPxGantt>

对应的后端C#处理逻辑示例：

protected void Gantt_TaskListRowClick(object sender, DevExpress.Web.ASPxGantt.GanttTaskListRowClickEventArgs e)
{
    // e.TaskKey 可以获取点击行对应任务的主键
    var taskId = e.TaskKey;
    // 你的后端处理逻辑
}

内容的提问来源于stack exchange，提问作者Ramani