title: ASP.NET MVC 3 WebGrid Sort Order Image
body: <p>I am working with a WebGrid, and I would like to have an image or character like "^" "v" in the header showing the column with the sort order.</p>
  
  <p>How can I do this?</p>
  
  <p>This is the code of one of my Webgrids:</p>
  
  <pre><code>&lt;div id="contenedor-gridACTIVIDAD"&gt;
  
      @{    
          WebGrid gridACTIVIDAD = new WebGrid(Model.actividadDiaria, ajaxUpdateContainerId: "contenedor-gridACTIVIDAD", rowsPerPage: 20);
  
  
  
      }
      @gridACTIVIDAD.GetHtml(
  
  
                   fillEmptyRows: true,
                   alternatingRowStyle: "fila-alternativa",
                   headerStyle: "encabezado-grid",
                   footerStyle: "pie-grid",
                   mode: WebGridPagerModes.All,
                   firstText: "&lt;&lt;",
                   previousText: "&lt;",
                   nextText: "&gt;",
                   lastText: "&gt;&gt;",
  
  
  
  
  
           columns: new[]     {
                              gridACTIVIDAD.Column("contrato", header: "Contrato"),                            
                              gridACTIVIDAD.Column("Observacion", header: "Observación"),
                              gridACTIVIDAD.Column("DESCR", header: "Tarea"),                            
                              gridACTIVIDAD.Column("FECHA", header: "Fecha",
                              format: (item) =&gt;
                                  {
                                      return item.fecha.ToString("dd/MM/yyyy");
                                  }
  
                              ),
                              gridACTIVIDAD.Column("", 
                              header: "ESTADO",                            
                              format: (item) =&gt;
                              {                                                
                                  if (item.estado == "VC")
                                  {
                                      return Html.Image("/Imagenes/vc.gif","Validado correcto", new { @border = "0"});
                                  }
                                  else if (item.estado == "VI")
                                  {
                                      return Html.Image("/Imagenes/vi.gif", "Validado incorrecto", new { @border = "0" });
                                  }
                                  else if (item.estado == "NV")
                                  {
                                      return Html.Image("/Imagenes/vp.gif", "No validado", new { @border = "0" });
                                  }
                                  else
                                  {
                                      return Html.Image("/Imagenes/nv.png", "Pendiente validar", new { @border = "0" });
                                  }
  
                              }                           
                              ),
                              gridACTIVIDAD.Column("JDP", header: "JDP")
  
                              }
  
  
                          )
  
  &lt;/div&gt;
  </code></pre>