title: Adding data-* attributes to a DevExpress MVC gridview cell
body: <p>I have a standard DevExpress MVCxGridView bound to a DataTable, which is just a bunch of boolean values with the first column "SS" being a string code which is the datakey.  I loop through all the columns and dynamically create the gridview columns.  The grid that is displayed is a bunch of checkboxes which are options that can be configured. </p>
  
  <p>I have a jquery js file that requires the data-* attributes to be set for these cells in order to inject the necessary functionality.  I want to know how to add "data-*" attributes to each of the TD cells.  "data-ss" being the datakey in the first column, and "data-wm" being the workmode in the column. </p>
  
  <p>My Razor view code is as follows:</p>
  
  <pre><code>@model System.Data.DataTable
  @{
      var gv = Html.DevExpress().GridView(
          settings =&gt;
          {
              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();
  }
  </code></pre>
  
  <p>Thank you Mikhail.  </p>
  
  <p>Using this I was able to add a settings configuration to set the data-* attributes:</p>
  
  <pre><code>        settings.HtmlDataCellPrepared = (sender, e) =&gt;
          {
              e.Cell.Attributes.Add(
                  "data-wm", 
                  e.DataColumn.Caption
              );
              e.Cell.Attributes.Add(
                  "data-ssco",
                  e.KeyValue.ToString()
              );
          };
  </code></pre>