This project is read-only.

How to create a custom attribute on the MvcGrid column


To enable tooltips, I have a "title" attribute followed by the tooltip string (using the jQueryTools).

I would like to add tooltips to a Grid Column, by adding that custom "text" attribute.

I am using MVC3 with Razor views and .NET4 in C#.
My View page has this bit of code
                @Html.Grid(@Model.DocumentList).Columns(c => {
                    c.For(d => d.FileName).Named("File Name");
                    c.For(d => d.LibraryName).Named("Lib");
                    c.For(d => d.LibraryUrl).Named("URL");
Which displays the 3 columns. So far so good.

Requirement #1
Have "URL" column as the tooltip for column 2 (hence grid only has 2 columns).
Ideally something like
                @Html.Grid(@Model.DocumentList).Columns(c => {
                    c.For(d => d.FileName).Named("File Name");
                    c.For(d => d.LibraryName).Named("Lib").Attributes(new { title = d.LibraryUrl});
But I have no idea how to make that happen.

Requirement #2
Ideally would like just 1 column that really consists of 2 "rows" of data with a tooltip.
Each data item would have a different font (name, size, bold, colour).
Example a single row & column would appear as (imagine first line being larger bold font than 2nd line).
Acme FirstDraft.pdf

And tooltip would be data in the LibraryUrl property.

//something like
                @Html.Grid(@Model.DocumentList).Columns(c => {
                    //c.For(d => d.FileName).Named("File Name");
                    //c.For(d => d.LibraryName).Named("Lib");
                    //c.For(d => d.LibraryUrl).Named("URL");
                    c.Custom(d => Html.TextArea("custom", d.FileName + "\r\n" + d.LibraryName, new { @readonly = "readonly", title = d.LibraryUrl }));
That code above works in that I see the two column data items appear one below the other and the tooltip works. But how can I style each data item?

Anyone has any ideas on #1 or #2?


sheir wrote Apr 10, 2012 at 6:23 PM

Manage to find a solution to my two requirements after reading some google entry about using Partial views.

The grid code now looks like:
                @Html.Grid(@Model.DocumentList).Columns(c => {
               c.For(d => Html.Partial("_DocumentGridRow", d)).Named("Document Info");
And the shared partial view looks like.
@model My.Models.Document
<div id="gridRow" title='@Model.LibraryUrl'> <span class="filename">@Html.DisplayTextFor(model => model.FileName)</span><br /> <span class="fileDetail" >@Html.DisplayTextFor(model => model.LibraryName) </span> </div> The Div tag has the “title” attribute which is for the tooltip.
The Span tag has a css class that does the text formatting (font styling etc..).


Nitya wrote Aug 26, 2013 at 10:18 PM

If anyone is looking for providing tooltip for one column text alone, it can be done using HTML helper classes. write your own class to return an MvcHtmlString and then use it in your Grid.

Sample code :

In the view for Grid :
@using YourHelperClass
@Html.Grid(@Model.YourModel).Columns(c => {
           c.For(d => @Html.LabelExtended(null,d.value,d.tooltipValue,"yourcssClass");
In YourHelperClass

public static partial class YourHelperClass
public static MvcHtmlString LabelExtended(this HtmlHelper htmlHelper,object htmlAttributes, string text,string tooltip,string cssClass)
    StringBuilder output = new StringBuilder();
    output.Append(@"<label ");                        
    output.Append("\" title=\"");
    output.Append("\" >");
    return MvcHtmlString.Create(output.ToString());