ASP.NET MVC 3 WebGrid Sort Order Image

Question

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.

How can I do this?

This is the code of one of my Webgrids:

<div id="contenedor-gridACTIVIDAD">

    @{    
        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: "<<",
                 previousText: "<",
                 nextText: ">",
                 lastText: ">>",





         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) =>
                                {
                                    return item.fecha.ToString("dd/MM/yyyy");
                                }

                            ),
                            gridACTIVIDAD.Column("", 
                            header: "ESTADO",                            
                            format: (item) =>
                            {                                                
                                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")

                            }


                        )

</div>

Answer 1

I just did a google search on "webgrid sort indicator" and came back with a result from http://prokofyev.blogspot.com/2011/01/sort-indicator-in-systemwebhelperswebgr.html

Basically, the person uses jQuery to add in the sort direction image.

<script type="text/javascript">
    $('thead > tr > th > a[href*="sort=@grid.SortColumn"]').parent()
    .append('@(grid.SortDirection == SortDirection.Ascending ? "U" : "D")');
</script>

(As an added bonus, I just tested it myself, so you can copy and paste this code (the link one is a picture instead of a code sample :( ...) just replace the U and D with whatever you want to display instead.

Hope that helps.