Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

event driven tooltip from gridview

11 Answers 397 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
JK
Top achievements
Rank 1
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

Sort by
0
Accepted
Fernandes
Top achievements
Rank 1
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");  
    }  
}  
 

0
JK
Top achievements
Rank 1
answered on 28 Jan 2008, 09:14 AM
Fernandes,

Thank you so much!  the code works like a charm!  I will now implement into my coding.

Cannot thank you enough!

JK
0
JK
Top achievements
Rank 1
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

0
Tsvetie
Telerik team
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
0
Fernandes
Top achievements
Rank 1
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
0
JK
Top achievements
Rank 1
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


0
JK
Top achievements
Rank 1
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
0
Tsvetie
Telerik team
answered on 31 Jan 2008, 02:27 PM
Hi JK,
You code looks correct and I am really not sure what might be causing the described problem. If you could prepare and send us a running project, demonstrating it, we will do our best to help you get the desired result.

Regards,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
JK
Top achievements
Rank 1
answered on 31 Jan 2008, 03:58 PM
the old saying, "if you can't beat em, join em".  I changed the code to handle the post back, so the issue for the moment can be put to bed.  The solution is not ideal but does work.  I will revisit this at a later date if the page goes into full blown production.

Thanks for your time and insight into user controls with tooltips.

JK
0
Carlos
Top achievements
Rank 1
answered on 13 Apr 2011, 09:03 PM
Hello, mi control don´t load in the RadTooltipManager, why?, i don´t now, but i follow each sentence in Fernandes example in the first answer, mi email is czacariasvelez@gmail.com, contact with me please. Thank you. Bye
0
Marin Bratanov
Telerik team
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.

Tags
ToolTip
Asked by
JK
Top achievements
Rank 1
Answers by
Fernandes
Top achievements
Rank 1
JK
Top achievements
Rank 1
Tsvetie
Telerik team
Carlos
Top achievements
Rank 1
Marin Bratanov
Telerik team
Share this question
or