將data- *屬性添加到DevExpress MVC gridview單元

Question

我有一個綁定到DataTable的標准DevExpress MVCxGridView，它只是一堆布爾值，第一列“ SS”是作為數據鍵的字符串代碼。 我遍歷所有列並動態創建gridview列。 顯示的網格是一堆復選框，這些復選框是可以配置的選項。

我有一個jQuery js文件，需要為這些單元格設置data- *屬性，以便注入必要的功能。 我想知道如何向每個TD單元添加“ data- *”屬性。 “ data-ss”是第一列中的數據鍵，“ data-wm”是該列中的工作模式。

我的Razor視圖代碼如下：

@model System.Data.DataTable
@{
    var gv = Html.DevExpress().GridView(
        settings =>
        {
            settings.Name = "gv";
            settings.Enabled = true;
            settings.KeyFieldName = "SS";
            settings.CallbackRouteValues = new { Controller = "Test", Action = "DataBindingPartial" };
            settings.Settings.HorizontalScrollBarMode = ScrollBarMode.Auto;
            settings.Settings.VerticalScrollBarMode = ScrollBarMode.Auto;
            settings.Settings.VerticalScrollableHeight = 200;
            settings.SettingsPager.Mode = DevExpress.Web.ASPxGridView.GridViewPagerMode.ShowAllRecords;

            MVCxGridViewBandColumn currentBand = null;

            foreach (System.Data.DataColumn c in Model.Columns)
            {
                if (c.ColumnName == "SS")
                {
                    DevExpress.Web.ASPxGridView.GridViewColumn column = settings.Columns.Add(c.ColumnName);
                    column.Caption = "SS";
                    column.CellStyle.CssClass = "ss_head";
                    column.HeaderStyle.CssClass = "ss_head_caption";
                    column.HeaderStyle.Cursor = "pointer";
                }
                else
                {
                    // Get Column Definition retreives information based on the column name
                    //   definition.ActivityType = "act" if activity or "dg" if DataGathering
                    //   definition.WorkMode = abbreviated name of activity
                    //   definition.Description = long description of activity
                    var definition = 
                        TestModel.DefinitionColumn.GetColumnDefinition(c.ColumnName);

                    if (currentBand == null || currentBand.Name != definition.ActivityType)
                    {
                        currentBand = settings.Columns.AddBand();

                        currentBand.Name = definition.ActivityType;
                        currentBand.Caption = definition.ActivityType == "act" ? "Activity" : "Data Gathering";
                        currentBand.HeaderStyle.CssClass = String.Format("workmode_col workmode_{0}", definition.ActivityType);
                    }
                    DevExpress.Web.ASPxGridView.GridViewColumn column =                     
                            currentBand.Columns.Add(c.ColumnName, MVCxGridViewColumnType.CheckBox);
                    column.Caption = definition.WorkMode;
                    column.ToolTip = definition.Description;
                    column.Visible = true;
                    column.HeaderStyle.Cursor = "pointer";
                    column.CellStyle.CssClass = String.Format("workmode_{0} workmode_selectable workmode_col", definition.ActivityType);
                    column.HeaderStyle.CssClass = String.Format("workmode_{0} workmode_col", definition.ActivityType);
                    column.Width = 35;
                }
            }
        });
    var gvBound = gv.Bind(Model);
    gvBound.Render();
}

謝謝米哈伊爾。

使用這個，我能夠添加一個設置配置來設置data- *屬性：

        settings.HtmlDataCellPrepared = (sender, e) =>
        {
            e.Cell.Attributes.Add(
                "data-wm", 
                e.DataColumn.Caption
            );
            e.Cell.Attributes.Add(
                "data-ssco",
                e.KeyValue.ToString()
            );
        };

Answer 1

可以使用GridViewSettings.HtmlDataCellPrepared事件來分配所需的屬性。 檢查此 SO線程。