locked
WebGrid Sort Arrows RRS feed

  • Question

  • User1250082194 posted

    How to add sort direction arrows to the WebGrid column headers.

    Took me a while to figure this out so I thought I would post it for anyone else thinking of this feature.

    First the Helper:

            public static MvcHtmlString SortDirection(this HtmlHelper helper, ref WebGrid grid, String columnName)
            {
                String html = "";
    
                if (grid.SortColumn == columnName && grid.SortDirection == System.Web.Helpers.SortDirection.Ascending)
                {
                    html = "▼";
                }
                else if (grid.SortColumn == columnName && grid.SortDirection == System.Web.Helpers.SortDirection.Descending)
                {
                    html = "▲";
                }
                else
                {
                    html = "";
                }
    
                return MvcHtmlString.Create(html);
            }

    Now how to use it:

     var grid = new WebGrid(Model, ajaxUpdateContainerId: "user-list", defaultSort: "UserName");
    
            @grid.GetHtml(
                tableStyle: "gridview",
                alternatingRowStyle: "gridview-row-alt",
                columns:
                grid.Columns(
                    grid.Column(
                        "UserName",
                        header: "User Name " + Html.SortDirection(ref grid,"UserName"),
                        style: "gridview-column-wide",
                        format: @<text>
                                    @item.UserName.ToLower()
                                </text>
                    )
            )

    This will display the direction arrow only on the column that was sorted.

    Enjoy : )

    Thursday, October 25, 2012 10:05 AM

All replies

  • User200755113 posted

    Where you have created the

    public static MvcHtmlString SortDirection(

    I am trying but missing the reference of "Html.SortDirection"

    Here is the Error

    Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

    Compiler Error Message: CS0121: The call is ambiguous between the following methods or properties: 'WebGridSorting.SortDirection(System.Web.Mvc.HtmlHelper, ref System.Web.Helpers.WebGrid, string)' and 'WebGridSorting.SortDirection(System.Web.Mvc.HtmlHelper, ref System.Web.Helpers.WebGrid, string)'

    Source Error:

    Line 22: grid.Column("LastName", "Last Name", canSort: true,style:"EmailClass"),
    Line 23: grid.Column("LastName",
    Line 24: header: "User Name " + Html.SortDirection(ref grid,"LastName"),
    Line 25: style: "gridview-column-wide",
    Line 26: format: @<text>

    Many Thanks

    Thursday, October 25, 2012 12:17 PM
  • User1250082194 posted

    I've created a custom helper class file to house all my custom HTML helpers. 

    for example:

    My MVC project name is "SMART".   I create a new directory in SMART called "Helpers" and then the following new class in the directory:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Helpers;
    using System.Web.Mvc;
    
    namespace SMART.Helpers
    {
        public static class Html
        {
            /// <summary>
            /// Displays the sort direction arrow depending on a grids current column state. 
            /// </summary>
            /// <param name="helper"></param>
            /// <param name="grid"></param>
            /// <param name="columnName"></param>
            /// <returns></returns>
            public static MvcHtmlString SortDirection(this HtmlHelper helper, ref WebGrid grid, String columnName)
            {
                String html = "";
    
                if (grid.SortColumn == columnName && grid.SortDirection == System.Web.Helpers.SortDirection.Ascending)
                {
                    html = "▼";
                }
                else if (grid.SortColumn == columnName && grid.SortDirection == System.Web.Helpers.SortDirection.Descending)
                {
                    html = "▲";
                }
                else
                {
                    html = "";
                }
    
                return MvcHtmlString.Create(html);
            }
        }
    }

    Build your program and the helper will become available in Intellesense.

    Check out the "custom helpers" section in the Pluralsite MVC toutorials video.

    Hope that helps.

     

    Thursday, October 25, 2012 12:46 PM
  • User200755113 posted

    Thanks Mate,

    Friday, October 26, 2012 5:54 AM
  • User-1245385425 posted

    Great code !

    I made a little change just to have the sort item for the first time if we declare a default one.

    Like this:

    string html = "";

    if (grid.SortColumn == columnName && grid.SortDirection == System.Web.Helpers.SortDirection.Ascending)
    {
    html = "▲";

    }
    else if (grid.SortColumn == columnName && grid.SortDirection == System.Web.Helpers.SortDirection.Descending)
    {
    html = "▼";

    }
    //Here the change from the default declaration
    else if (grid.SortColumn == "MyDefaultColumn DESC" && columnName == "MyDefaultColumn")
    {
    html = "▼";
    }
    else
    html = "";

    Thursday, January 30, 2014 3:55 AM