title: ASP.Net MVC : How to customize webgrid pager UI
body: <p>I need to add some html tag into <code>webgrid</code> pager. <code>webgrid</code> pager is a <code>tfoot</code> tag.</p>
  
  <p>My current grid UI looks like below picture.
  <a href="https://i.stack.imgur.com/vtA8Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vtA8Q.png" alt="enter image description here"></a></p>
  
  <p>but i want my pager look like below picture.
  <a href="https://i.stack.imgur.com/uTwkm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uTwkm.png" alt="enter image description here"></a></p>
  
  <p>I want to add some image and text along with pager links.</p>
  
  <p>I took help from this website <a href="http://www.creativebloq.com/web-design/create-custom-tables-webgrid-9134626" rel="nofollow noreferrer">http://www.creativebloq.com/web-design/create-custom-tables-webgrid-9134626</a></p>
  
  <p>They just replace some tag with more tag this below way</p>
  
  <pre><code>.ToString().Replace("&lt;tfoot&gt;&lt;tr&gt;&lt;td","&lt;tfoot&gt;&lt;tr class='footstuff'&gt;&lt;td&gt;&lt;/td&gt;&lt;td style='color: black;'&gt;Records " + firstRecord + " to " + lastRecord + " of " + grid.TotalRowCount  + "&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td")
  </code></pre>
  
  <p>their full grid code look like.</p>
  
  <pre><code>@MvcHtmlString.Create(
  grid.GetHtml(mode: WebGridPagerModes.All, tableStyle: "tranlist", headerStyle: "headerstyle",  firstText: "First", lastText: "Last",   
  columns: grid.Columns(
  grid.Column("TranDate", header: "Trans Date", format: @&lt;text&gt;@item.TranDate.ToShortDateString()&lt;/text&gt;),
  grid.Column("Description", header: "Transaction Description", style: "bigcolumn"), grid.Column("Units", header: "Units", style: "smallcolumn"),
  grid.Column("UnitPrice", header: "Unit Price", format: @&lt;text&gt;@item.UnitPrice.ToString("$0.00")&lt;/text&gt;, style: "medcolumn"),
  grid.Column("Total", canSort: false, header: "Total Price", format: @&lt;text&gt;@{double q = (item.Units * item.UnitPrice);} @q.ToString("$0.00")&lt;/text&gt;, style: "medcolumn"),
  grid.Column("TransactionID", header: "Action", style: "linkcolumn", canSort: false,
  format: @&lt;text&gt; @Html.ActionLink("Edit", "Edit", new { id = item.TransactionID })
  | @Html.ActionLink("Delete", "Delete", new { id = item.TransactionID })&lt;/text&gt;)))
  .ToString().Replace("&lt;tfoot&gt;&lt;tr&gt;&lt;td","&lt;tfoot&gt;&lt;tr class='footstuff'&gt;&lt;td&gt;&lt;/td&gt;&lt;td style='color: black;'&gt;Records " + firstRecord + " to " + lastRecord + " of " + grid.TotalRowCount  + "&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td")
  )
  </code></pre>
  
  <p>So I restructured my webgrid code as below but it did not work. In my case nothing has been added in pager area. see my code below and tell me where i made the mistake.</p>
  
  <pre><code>@MvcHtmlString.Create(
  grid.GetHtml(
          tableStyle: "webgrid-table",
          headerStyle: "webgrid-header",
          footerStyle: "webgrid-footer",
          alternatingRowStyle: "webgrid-alternating-row",
          selectedRowStyle: "webgrid-selected-row",
          rowStyle: "webgrid-row-style",
          mode: WebGridPagerModes.All,
          firstText: "&lt;&lt;",
          previousText: "&lt;",
          nextText: "&gt;",
          lastText: "&gt;&gt;",
          numericLinksCount: 5,
          columns:
              grid.Columns
              (
              grid.Column(columnName: "ID", header: "ID", format: @&lt;text&gt;@item.ID&lt;/text&gt;,style:"SmallCols"),
              grid.Column(columnName: "FirstName", header: "First Name", format: @&lt;text&gt;@item.FirstName&lt;/text&gt;,style:"NameColWidth" ),
              grid.Column(columnName: "LastName", header: "Last Name", format: @&lt;text&gt;@item.LastName&lt;/text&gt;,style:"NameColWidth"),
  
              grid.Column(columnName: "StateName", header: "State Name", format: @&lt;text&gt;@item.StateName&lt;/text&gt;,style:"NameColWidth"),
              grid.Column(columnName: "CityName", header: "City Name", format: @&lt;text&gt;@item.CityName&lt;/text&gt;,style:"NameColWidth"),
              grid.Column(header: "IsActive",
              format: @&lt;text&gt;&lt;input id="select" class="box" name="select" 
              type="checkbox" @(item.IsActive ? "checked='checked'" : "") value="@item.IsActive" /&gt;&lt;/text&gt;
              , style: "text-center checkbox-width SmallCols")
              ))
  .ToString().Replace("&lt;tfoot&gt;&lt;tr&gt;&lt;td", "&lt;tfoot&gt;&lt;tr class='footstuff'&gt;&lt;td&gt;&lt;/td&gt;&lt;td style='color: black;'&gt;Records 1 to 2 of 5 &lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;td")
  )            
  </code></pre>
  
  <p>looking for help. thanks</p>