Simple Demo Request - ToolTip From Grid

3 posts, 0 answers
  1. Aron
    Aron avatar
    80 posts
    Member since:
    Dec 2005

    Posted 19 Dec 2008 Link to this post

    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. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 22 Dec 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Aron
    Aron avatar
    80 posts
    Member since:
    Dec 2005

    Posted 22 Dec 2008 Link to this post

    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> 

Back to Top