Grid View for ASP.NET MVC - How to create a custom tooltip to display a long text string

This example demonstrates how to use a popup control to display a custom tooltip.

Overview

The main idea is to assign a delegate method to the grid's HtmlDataCellPrepared property and handle the mouseover event to display a pop-up window.

settings.HtmlDataCellPrepared = (s, e) => {
    e.Cell.Attributes.Add("onmouseover", String.Format("OnMouseMove(this, event, '{0}');", e.KeyValue));
};

var oldKey = null;
function OnMouseMove(element, event, key) {
    if (typeof GridView.cpTooltipList[key] != "undefined" && oldKey != key) {
        oldKey = key;
        PopupControl.ShowAtPos(event.clientX, event.clientY);
        ToolTipLabel.SetText("Item " + key + "<br/>" + GridView.cpTooltipList[key]);
    }   
}

Use the grid's CustomJSProperties property to get information about row values and pass it to the client.

settings.CustomJSProperties = (s, e) => {
    MVCxGridView grid = s as MVCxGridView;
    int startIndex = grid.VisibleStartIndex;
    int endIndex = grid.VisibleStartIndex + grid.SettingsPager.PageSize;
    var clientData = new Dictionary<int, object>();
    for (int i = startIndex; i < endIndex; i++) {
        var rowValues = grid.GetRowValues(i, new string[] { "ID", "Description" }) as object[];
        clientData.Add(Convert.ToInt32(rowValues[0]), rowValues[1]);
    }
    e.Properties.Add("cpTooltipList", clientData);
};

Files to Review

• HomeController.cs (VB: HomeController.vb)
• SimpleModel.cs (VB: SimpleModel.vb)
• GridViewPartial.cshtml
• Index.cshtml

Documentation

• Passing Values Between Server and Client Sides