ASP.NET MVC 3 Razor WebGrid tooltip and sorting marker

Question

I have developed a webapplication in ASP.NET MVC 3 Razor. I´ve bee using a WebGrid to list tabular data and would like to do xxx things with the webgrid.

1. I would like for the WebGrid to show which column is the sorting column and if it is sorting ascending or descending. I can´t find any property of the WebGrid that seems to handle my wishes. And i cant find anything on the internet...

2. I would like to add a tooltip to all the column headers (different tooltip for each header). Obviously there are loads of javascript tooltips out there but i haven´t found anything that i can use in the WebGrid...

score 1 · Answer 1 · answered Oct 08 '12 at 09:55

1

For q2: Give your WebGrid helper an ID

htmlAttributes:new{id="GridID"}

Then with Jquery put title for all headers $('table#GridID th').each(function() { $(this).attr('title', $(this).text()); });

answered Oct 08 '12 at 09:55

patricgh

403
4
15

Thanks! I solved q2 by using jQuery more or less as you suggested! :-) – Ebbe Oct 08 '12 at 11:43

Leniel Maccaferri · Answer 2 · 2012-10-08T15:01:46.970

For the sorting thingy you can take a look at this post:

Sort indicator in System.Web.Helpers.WebGrid

In the view you can do this:

// Force a descending sort only when no user specified sort is present
if (Request.QueryString[grid.SortDirectionFieldName].IsEmpty())
{
    grid.SortDirection = SortDirection.Descending;
}

and then a custom JavaScript:

displaySortIndicators('@grid.SortColumn', '@grid.SortDirection');

displaySortIndicators = function (column, sortDirection) {

    if (column != '') {

        var th = $('thead > tr > th > a[href*="sort=' + column + '"]');

        th.append((sortDirection == 'Ascending') ? "&#9650;" : "&#9660;");
    }
}

For the tooltip thingy, you can use qTip2.

NOTE: I use both approaches from links above with the WebGrid helper and they work as expected.

The 'Sordirection.Ascending'... does not work for some reason. Instead i solved it with a js workaround. Maybe not the cleanest fix, but it works. Not sure why 'Sordirection.Ascending' doesn't work though... — Ebbe, Oct 08 '12 at 11:49

ASP.NET MVC 3 Razor WebGrid tooltip and sorting marker

2 Answers2