GridView - How to create a custom tooltip for cells to display long text

This example demonstrates how to create a custom tooltip for data cells using the  PopupControl. The main idea is to assign a delegate method to the GridViewSettings.HtmlDataCellPrepared  property and handle the mouseover event to display a popup window.

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

[VB.NET]
    settings.HtmlDataCellPrepared = Sub(s, e)
         e.Cell.Attributes.Add("onmouseover", String.Format("OnMouseMove(this, event, '{0}');", e.KeyValue))EndSub

[JScript]
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]);}}

The GridViewSettings.CustomJSProperties  property is used to pass data to the client side. 

[C#]
settings.CustomJSProperties=(s,e)=>{MVCxGridViewgrid=sasMVCxGridView;intstartIndex=grid.VisibleStartIndex;intendIndex=grid.VisibleStartIndex+grid.SettingsPager.PageSize;varclientData=newDictionary<int,object>();for(inti=startIndex;i<endIndex;i++){varrowValues=grid.GetRowValues(i,newstring[]{"ID","Description"})asobject[];clientData.Add(Convert.ToInt32(rowValues[0]),rowValues[1]);}e.Properties.Add("cpTooltipList",clientData);};

[VB.NET]
   settings.CustomJSProperties = Sub(s, e)Dim grid As MVCxGridView = TryCast(s, MVCxGridView)Dim startIndex AsInteger = grid.VisibleStartIndexDim endIndex AsInteger = grid.VisibleStartIndex + grid.SettingsPager.PageSizeDim clientData = New Dictionary(OfInteger, Object)()For i AsInteger = startIndex To endIndex - 1Dim rowValues = TryCast(grid.GetRowValues(i, NewString() {"ID", "Description"}), Object())
                  clientData.Add(Convert.ToInt32(rowValues(0)), rowValues(1))Next i
             e.Properties.Add("cpTooltipList", clientData)EndSub