This is a migrated thread and some comments may be shown as answers.

Simple Demo Request - ToolTip From Grid

2 Answers 81 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Aron
Top achievements
Rank 2
Aron asked on 19 Dec 2008, 10:58 AM
Hello,
I have a RadGrid with a column that is too large to display.
I would like a link where on mouse over a ToolTip will display the information.
The link would need to pass the row's value so the tool tip can load the right data.

Very similar to: http://demos.telerik.com/aspnet-ajax/ToolTip/Examples/ToolTipTreeView/DefaultCS.aspx
Not so much like: http://demos.telerik.com/aspnet-ajax/Controls/Examples/Integration/ToolTipGrid/DefaultCS.aspx?product=tooltip

Please show me a simple demo for this, thanks!

2 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 22 Dec 2008, 12:19 PM
Hello Kansa,

You can save the datafield to display for that column as the DataKeyName for the grid and then hovering over the linkbutton attach the tooltip as demonstrated in this link.
aspx:
 <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" OnItemDataBound="RadGrid1_ItemDataBound">          
          <MasterTableView DataKeyNames="ProductName" DataSourceID="SqlDataSource1"
                <Columns>               
                   <telerik:GridTemplateColumn UniqueName="ProductDetail"
                   <ItemTemplate> 
                       <asp:LinkButton ID="LinkButton1" runat="server">View Details</asp:LinkButton>                        
                   </ItemTemplate> 
                 ...... 

cs:
 protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e) 
    { 
        if(e.Item is GridDataItem)  
        { 
            GridDataItem dataItem=(GridDataItem)e.Item;             
            string strtxt = dataItem.GetDataKeyValue("ProductName").ToString(); 
            LinkButton linkbtn = (LinkButton)dataItem["ProductDetail"].FindControl("LinkButton1"); 
            linkbtn.Attributes.Add("onMouseOver", "return tooltip('" + strtxt + "');"); 
 
        } 
    } 

js:
<script type="text/javascript"
    function tooltip(detail) 
    { 
       alert(detail) 
       // then attach the tooltip here as shown in the demo referred by you 
    } 
    </script> 

Thanks
Princy.
0
Aron
Top achievements
Rank 2
answered on 22 Dec 2008, 01:57 PM
Hello Princy

I'm lost on the js part.

Currenlty each link button the grid looks like this:

<a href="javascript:__doPostBack('ctl00$conMain$RadGrid1Codes$ctl00$ctl08$LinkButton1','')" onmouseover="return tooltip('5');" id="ctl00_conMain_RadGrid1Codes_ctl00_ctl08_LinkButton1" onclick="return false;">View Details</a>

I created the ascx similar the demos. The ascx have a public string of CodeId.

<script type="text/javascript"
    function tooltip(detail) 
    { 
       alert(detail) 
       // then attach the tooltip here as shown in the demo referred by you 
    } 
    </script> 

Tags
ToolTip
Asked by
Aron
Top achievements
Rank 2
Answers by
Princy
Top achievements
Rank 2
Aron
Top achievements
Rank 2
Share this question
or