在 GridView 单元格单击时调用 JavaScript 函数

Question

我有一个具有以下设置的DevExpress网格视图。

settings.Name = "DetailGridView";
// this calls DetailGridView.StartEditRow() on client side
settings.ClientSideEvents.RowClick = "Fn.startEditingRow";
settings.SettingsEditing.Mode = DevExpress.Web.GridViewEditingMode.Inline;

为了简单起见，我删除了许多其他设置，但询问您是否认为我需要显示一些其他相关的设置。

现在我想在每次单元格单击时调用一个 JavaScript 函数。为此，我根据此SO答案和此DevExpress线程添加了此设置

settings.HtmlDataCellPrepared += (sender, e) =>
{
    string onClickFunctionJS = "Fn.DetailOnlyOnCellClick({0},'{1}');";
    e.Cell.Attributes.Add("onclick", String.Format(onClickFunctionJS, e.VisibleIndex, e.DataColumn.FieldName));
};

JS 函数Fn.DetailOnlyOnCellClick()打印字段名称的值(第二个参数(。但它仅在第一次单击行时打印单击单元格的字段名称。之后，单击所选行中的其他单元格不会再触发该功能Fn.DetailOnlyOnCellClick()。我观察到，如果我关闭ClientSideEvents.RowClick，它可以正常工作，但由于其他原因我无法关闭它。如何获取用户在保持ClientSideEvents.RowClick打开的同时单击的单元格？

Answer 1

我已经解决了我的问题，这要归功于 DevExpress 支持中心。首先，我无法使用settings.HtmlDataCellPrepared因为，正如我在问题中提到的，网格视图在单击行时进入编辑模式，而在编辑模式下，settings.HtmlDataCellPrepared不应该按照我需要的方式工作。所以我开始使用这段代码：

settings.CellEditorInitialize = (s, e) =>
{
    var elementEditor = e.Editor;
    string onClickFunctionJS = "DetailOnlyOnCellClick({0},'{1}');";
    DevExpress.Web.Rendering.GridViewTableInlineEditorCell cell = 
        elementEditor.Parent as DevExpress.Web.Rendering.GridViewTableInlineEditorCell;
    cell.Attributes.Add("onclick",
        String.Format(onClickFunctionJS, e.VisibleIndex, e.Column.FieldName));
};

此代码适用于每个不同的控件。唯一的问题是当字段是复选框并且单元格被禁用时。为了解决这个问题，我将此代码用于复选框控件：

string func = String.Format(
    "ASPxClientUtils.AttachEventToElement(s.GetMainElement(), 'click', function() {{ {0} }} )",
        String.Format(onClickFunctionJS, e.VisibleIndex, e.Column.FieldName));
(elementEditor as ASPxCheckBox).ClientSideEvents.Init = String.Format("function(s,e){{ {0}; }}", func);

此代码完美运行。

指向使用的两种方法的链接：

• ASPxClientUtils.AttachEventToElement
• ASPxClientControlBase.GetMainElement

---

_{PS：我在这里展示的这两种方法都来自DevExpress专家，我从DevExpress的支持中心得到了这些答案。一旦我可以解决许可证问题并且票证公开，我将提供指向我的问题的链接。}