title: Rendering HTML in a data table
body: <p>I have a data table I am rendering to a web page. I want to display a checkbox on each row. However when I try to display it is shows the html. Is there any way around this?</p>
  
  <p>Class definition:</p>
  
  <pre><code>    public int analysisId { get; set; }
      public string heatName { get; set; }
      public DateTime analysisTime { get; set; }
      public string sampleType { get; set; }
      public string grade { get; set; }
      public string productId { get; set; }
      public string element { get; set; }
      public float value { get; set; }
  </code></pre>
  
  <p>The code in my model is below:</p>
  
  <pre><code>        DataTable GridData = new DataTable();
          GridData.Columns.Add("CheckBoxes");
          GridData.Columns.Add("Analysis ID");
          GridData.Columns.Add("Analysis Time");
          GridData.Columns.Add("Sample Type");
          GridData.Columns.Add("Product ID");
  
          foreach (var item in elementheaders)
          {
              GridData.Columns.Add(item.Trim());
          }
  
          int gridend = GridData.Columns.Count;
          int gridrow = 0;//x
          int listrow = 0;//z
          int checknum = 0;
  
  foreach (int analysis in ChemList.Select(d =&gt; d.analysisId).Distinct())
  {
      DataRow dr = GridData.NewRow();
      GridData.Rows.Add(dr);
      GridData.Rows[gridrow][0] = System.Web.HttpUtility.HtmlDecode("&lt;input type='checkbox' id="+checknum+"&gt;");
      GridData.Rows[gridrow][1] = ChemList[listrow].analysisId;
      GridData.Rows[gridrow][2] = ChemList[listrow].analysisTime;
      GridData.Rows[gridrow][3] = ChemList[listrow].sampleType;
      GridData.Rows[gridrow][4] = ChemList[listrow].productId;
  }
  </code></pre>
  
  <p>In my view:</p>
  
  <pre><code>&lt;div id="grid"&gt;
      &lt;table id="example"  class ="gridTable"&gt;
          &lt;thead class="gridHead"&gt;
              &lt;tr&gt;
                  @Html.DisplayFor(x =&gt; x.Columns)
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
                  @Html.DisplayFor(x =&gt; x.Rows)
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Display Template for cells:</p>
  
  <pre><code>@model TheManhattanProject.Models.CellValueViewModel
  
  &lt;td&gt;
      @Html.DisplayFor(x =&gt; x.Value)
  &lt;/td&gt;
  </code></pre>
  
  <p>Display Template for Rows:</p>
  
  <pre><code>@model TheManhattanProject.Models.RowViewModel
  
  &lt;tr&gt;
      @Html.DisplayFor(x =&gt; x.Values)
  &lt;/tr&gt;
  </code></pre>
  
  <p>Display Template for Columns:</p>
  
  <pre><code>@model TheManhattanProject.Models.ColumnViewModel
  
  &lt;th&gt;
      @Html.DisplayFor(x =&gt; x.Name)
  &lt;/th&gt;
  </code></pre>
  
  <p>I have two view models for rendering this. One for each cell and row. The row is composed of a list of cell values.</p>