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

event driven tooltip from gridview

11 Answers 459 Views

ToolTip

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

JK asked on 24 Jan 2008, 04:32 PM

Hi,

I have a gridview which uses the following row databound event

    
             protected void gvSubJobs_RowDataBound(object sender, GridViewRowEventArgs e)  
        
                {  
        
                    if (e.Row.RowType == DataControlRowType.DataRow)  
        
                    {  
        
                        e.Row.Attributes["onmouseover"] = "this.style.backgroundColor='lightblue';";  
        
                        e.Row.Attributes["onmouseout"] = "this.style.backgroundColor='transparent';";  
        
                        e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(gvSubJobs, "Select$" + e.Row.RowIndex);  
        
                    }  
        
                }

After the user clicks on the row the selected_index_changed event redirects the user to another page by passing the parameter value of the gridview.

What I want to do now is when the user clicks on the row it displays a rad tooltip with two options:
1. View (redirect to another page using the selected value of the gridview)
2. Remove (remove the record from the gridview)

I cannot just simply put the show event (on click) on the gridview as this then also appears if you click on the headings.

How can achieve this context sensitive menu with the use of tooltips?

Summary
I need a tooltip to appear to give the user a list of options when they click on a specific row on the gridview. The options provided on the tooltip relate to the specific row the user has selected. This operation needs to work on the entire row not just a button. I am looking for a means to "show" the tooltip and cannot see the option anywhere...

11 Answers, 1 is accepted

Accepted

answered on 25 Jan 2008, 08:51 PM

Hi JK,

I've made a sample project with your needs (I hope):

It includes:
default.aspx
ucOptions.ascx (user control)

Try it, and let me know if it solves your problem.

Fernandes

default.aspx code:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <%@ Register Src="~/ucOptions.ascx" TagName="Options" TagPrefix="uc1" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
                    <telerik:radtooltipmanager id="RadToolTipManager1" Sticky="true" runat="server" ShowEvent="OnClick" OnAjaxUpdate="OnAjaxUpdate"></telerik:radtooltipmanager> 
        
                    <div> 
        
                        <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" OnRowDataBound="GridView1_RowDataBound" AutoGenerateColumns="False" DataKeyNames="EmployeeID">  
        
                            <Columns> 
        
                                <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False" 
        
                                    ReadOnly="True" SortExpression="EmployeeID" Visible="False" /> 
        
                                <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> 
        
                                <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" /> 
        
                                <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" /> 
        
                                <asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country" /> 
        
                            </Columns> 
        
                        </asp:GridView> 
        
                    </div> 
        
                    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
        
                        SelectCommand="select top 50 EmployeeID, FirstName, LastName, City, Country from employees"></asp:SqlDataSource> 
        
                </form> 
        
            </body> 
        
            </html>

default.aspx.cs code:

    
            using System;  
        
            using System.Data;  
        
            using System.Configuration;  
        
            using System.Web;  
        
            using System.Web.Security;  
        
            using System.Web.UI;  
        
            using System.Web.UI.WebControls;  
        
            using System.Web.UI.WebControls.WebParts;  
        
            using System.Web.UI.HtmlControls;  
        
            using Telerik.Web.UI;  
        
            public partial class _Default : System.Web.UI.Page   
        
            {  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                }  
        
                protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)  
        
                {  
        
                }  
        
                protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  
        
                {  
        
                    if (e.Row.RowType == DataControlRowType.DataRow)  
        
                    {  
        
                        DataRowView drvRowDetails = (DataRowView)e.Row.DataItem;  
        
                        // This is used to get the row ID.  
        
                        e.Row.ID = e.Row.ID + drvRowDetails["EmployeeID"].ToString();  
        
                        RadToolTipManager1.TargetControls.Add(e.Row.ClientID, true);              
        
                    }  
        
                }  
        
                protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)  
        
                {  
        
                    int index = args.TargetControlID.LastIndexOf("_");  
        
                    string elementID = args.TargetControlID.Substring(index + 1);  
        
                    this.UpdateToolTip(elementID, args.UpdatePanel);  
        
                }  
        
                private void UpdateToolTip(string elementID, UpdatePanel panel)  
        
                {  
        
                    Control ctrl = Page.LoadControl("ucOptions.ascx");  
        
                    panel.ContentTemplateContainer.Controls.Add(ctrl);  
        
                    ucOptions options = (ucOptions)ctrl;  
        
                    options.RowID = elementID;  
        
                }   
        
            }

ucOptions.ascx code:

    
            <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucOptions.ascx.cs" Inherits="ucOptions" %> 
        
            <table> 
        
            <tr> 
        
            <td><asp:HyperLink ID="hlkView" runat="server">View</asp:HyperLink></td>  
        
            </tr> 
        
            <tr> 
        
            <td><asp:LinkButton ID="lkbDelete" runat="server" OnClick="lkbDelete_Click">Delete</asp:LinkButton></td>  
        
            </tr> 
        
            </table>

and finally ucOptions.ascx.cs code:

    
            using System;  
        
            using System.Data;  
        
            using System.Configuration;  
        
            using System.Collections;  
        
            using System.Web;  
        
            using System.Web.Security;  
        
            using System.Web.UI;  
        
            using System.Web.UI.WebControls;  
        
            using System.Web.UI.WebControls.WebParts;  
        
            using System.Web.UI.HtmlControls;  
        
            public partial class ucOptions : System.Web.UI.UserControl  
        
            {  
        
                private string rowID;  
        
                public string RowID  
        
                {  
        
                    get { return rowID; }  
        
                    set { rowID = value; }  
        
                }  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                    hlkView.NavigateUrl = "viewDetails.aspx?id=" + RowID;  
        
                }  
        
                protected void lkbDelete_Click(object sender, EventArgs e)  
        
                {  
        
                    // Your delete code goes here.  
        
                    Response.Redirect("~/Default.aspx");  
        
                }  
        
            }

answered on 28 Jan 2008, 09:43 AM

Fernandes,

I have put this in my code and works like a charm. a couple of final questions (the answer should be a lot shorter than the questions ;o)),
1. How can you change the title of the tooltip dependant of which row they click on. E.g. in your sample, I would like to show the tooltip title to display the last name of the selected row.

I think this has to happen on the "RowDataBound" event of the gridview (where you add the new tooltip) but I do not know the code to implement. Do you know?

EDITED

2. The delete option. Once the user clicks on the button I have code there which will update the row and mark it as deleted (i.e. not physically deleted just marked). I then need the usercontrol to close and the main page to be refreshed to update the gridview.

Because its AJAX. I dont really want the page to be fully reloaded. So how do you close the usercontrol once the user has clicked on the button?
thanks,

JK

answered on 28 Jan 2008, 01:46 PM

Hi JK,
Please refer to this online example that demonstrates how you can have a button in the Tooltip, that will close the tooltip and refresh the RadGrid. The example uses an UpdatePanel to ajaxify the RadGrid - you can use the example as a base on which to build your page, using a GridView.

Regarding your question about setting the Title of the RadToolTip - you cannot do this in the RowDataBound handler. You are using a RadToolTipManager, and the manager creates the RadToolTips on the client on demand - as soon as you mouseover a target element. That means you cannot access the RadToolTIps on the server in this case. In order to set the Title of the RadToolTips, you can use the OnClientBeforeShow client event of the manager. For example:

    
            <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" 
        
                RelativeTo="Element" Width="350px" Height="250px" Position="BottomLeft" Sticky="true" 
        
                Title="Products" OnClientBeforeShow="SetTitle">

    
            <script type="text/javascript">  
        
            function SetTitle(sender, args)  
        
            {  
        
                var tooltip = sender;  
        
                tooltip.set_title(tooltip.get_targetControlID());  
        
            }  
        
            </script>

All the best,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 28 Jan 2008, 02:25 PM

Hi,

I didn't realize Telerik has already answered your question, when I started to modify "our" sample. So, anyway, here it goes how I would do.

1st- Create an hidden field on the main aspx page:

    
            <input id="hidLastName" runat="server" type="hidden" />

2nd- On the rowDataBound event, set this hidden field value whenever you click one of the gridview rows:

    
            protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)  
        
                {  
        
                    if (e.Row.RowType == DataControlRowType.DataRow)  
        
                    {  
        
                        DataRowView drvRowDetails = (DataRowView)e.Row.DataItem;  
        
                        // This is used to get the row ID.  
        
                        e.Row.ID = e.Row.ID + drvRowDetails["EmployeeID"].ToString();  
        
                        e.Row.Attributes.Add("onClick", "document.getElementById('hidLastName').value = '" + drvRowDetails["LastName"].ToString() + "'"); //   
        
                        RadToolTipManager1.TargetControls.Add(e.Row.ClientID, true);              
        
                    }  
        
                }

3rd- Pass the value to the user control:

    
            private void UpdateToolTip(string elementID, UpdatePanel panel)  
        
                {  
        
                    Control ctrl = Page.LoadControl("ucOptions.ascx");  
        
                    panel.ContentTemplateContainer.Controls.Add(ctrl);  
        
                    ucOptions options = (ucOptions)ctrl;  
        
                    options.RowID = elementID;  
        
                    options.LastName= hidLastName.Value;  
        
                }

4th- Update your user control so that it starts receiving the new property:

    
            <%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucOptions.ascx.cs" Inherits="ucOptions" %> 
        
            <table> 
        
            <tr> 
        
            <td><asp:Label ID="lblLastName" runat="server"></asp:Label></td>  
        
            </tr> 
        
            <tr> 
        
            <td><asp:HyperLink ID="hlkView" runat="server">View</asp:HyperLink></td>  
        
            </tr> 
        
            <tr> 
        
            <td><asp:LinkButton ID="lkbDelete" runat="server" OnClick="lkbDelete_Click">Delete</asp:LinkButton></td>  
        
            </tr> 
        
            </table>

And

    
            using System;  
        
            using System.Data;  
        
            using System.Configuration;  
        
            using System.Collections;  
        
            using System.Web;  
        
            using System.Web.Security;  
        
            using System.Web.UI;  
        
            using System.Web.UI.WebControls;  
        
            using System.Web.UI.WebControls.WebParts;  
        
            using System.Web.UI.HtmlControls;  
        
            public partial class ucOptions : System.Web.UI.UserControl  
        
            {  
        
                private string rowID;  
        
                public string RowID  
        
                {  
        
                    get { return rowID; }  
        
                    set { rowID = value; }  
        
                }  
        
                private string lastName;  
        
                public string LastName  
        
                {  
        
                    get { return lastName; }  
        
                    set { lastName = value; }  
        
                }  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                    lblLastName.Text = lastName;  
        
                    hlkView.NavigateUrl = "viewDetails.aspx?id=" + RowID;  
        
                }  
        
                protected void lkbDelete_Click(object sender, EventArgs e)  
        
                {  
        
                    // Your delete code goes here.  
        
                    Response.Redirect("~/Default.aspx");  
        
                }  
        
            }

I thinks thats all

Fernandes

answered on 28 Jan 2008, 03:39 PM

Fernandes,

Yet again, Thanks for the update. Thanks this will work, I will use this option as it sticks with the structure you already kindly setup. I was looking to use the "title" property on the tooltip. Looks like you cannot do it as the tooltip manager creates the tooltips on the fly. Although it looks like it can be achieved by Javascript I want to try and avoid javascript as much as possible.

Also, I edited my post (1/28/2008 3:43:37 AM) to ask another question which (if you have the time) you could help with?

It was point 2:

The delete option. Once the user clicks on the button I have code there which will update the row and mark it as deleted (i.e. not physically deleted just marked). I then need the usercontrol to close and the main page to be refreshed to update the gridview.

I followed the solution provided by Tsvetie but it doesn't work correctly. At the moment I am not worried so much about the ajax refresh, rather the ability to use the tooltips (explaination below) On the usercontrol code I have done the following:

    
             protected void btCancel_Click(object sender, EventArgs e)  
        
                {  
        
                    ScriptManager.RegisterClientScriptBlock(  
        
                        this.Page,  
        
                        this.GetType(),  
        
                        "WebUserControlSript",  
        
                        "CloseActiveToolTip()",  
        
                        true);  
        
                }

On the main page I put in the following javascript:

    
            <script language="javascript" type="text/javascript">  
        
            function CloseActiveToolTip()  
        
                {  
        
                    var controller = Telerik.Web.UI.RadToolTipController.getInstance();  
        
                    var tooltip = controller.get_ActiveToolTip();          
        
                    if (tooltip) tooltip.hide();  
        
                }      
        
            </script>

What happens is the tooltip closes, but I can then no longer click on any of the other rows to bring up thier tooltips. In addition I have 2 tooltip managers (I have 2 gridviews in use) and niether of them work after I have used it once. I suspect the javascript shuts the whole control down rather than that specific tooltip. Any ideas?

Thanks,

JK

answered on 28 Jan 2008, 04:24 PM

all,

forget the above, i was able to fix it using a radajaxpanel (Q3) I switched on "enable out of panel javascript" and that fixed it, even though the Javascript was inside the radajaxpanel!

One final hurdle, it works until you click on a second row to remove. When I click on the next row to remove from the grid, the tooltip pops up empty for about a tenth of a second then performs a full postback. For this example I will stick with the cancel button as this should do nothing apart from hide the tooltip but it does perform the postback problem on the second click

The javascript on main page:

    
            function CloseActiveToolTip()  
        
                {  
        
                    var controller = Telerik.Web.UI.RadToolTipController.getInstance();  
        
                    var tooltip = controller.get_ActiveToolTip();          
        
                    if (tooltip) tooltip.hide();  
        
                    setTimeout(  
        
                        function()  
        
                            {  
        
                                __doPostBack("gvSubJobs", "");  
        
                            }  
        
                    , 100);  
        
                }      
        
            </script>

code on the user control:

    
            protected void btCancel_Click(object sender, EventArgs e)  
        
                {  
        
                    ScriptManager.RegisterClientScriptBlock(  
        
                        this.Page,  
        
                        this.GetType(),  
        
                        "WebUserControlSript",  
        
                        "CloseActiveToolTip()",  
        
                        true);  
        
                }

Any ideas?

Thanks

JK

answered on 15 Apr 2011, 01:55 PM

Hi Carlos,

Please note that this thread is very old and the control has changed substantially since then.

That being said please take a look at the following demo that explains how to load a user control in the RadToolTipManager: http://demos.telerik.com/aspnet-ajax/tooltip/examples/targetcontrolsandajax/defaultcs.aspx. The general approach is to handle the OnAjaxUpdate event and add your user control to the tooltip's update panel (in the DefaultCS.aspx.cs see the OnAjaxUpdate method).

If this does not help you resolve the issue please start a new thread with more precise information on your setup and difficulties.

Regards,
Marin
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.