event driven tooltip from gridview

12 posts, 1 answers
  1. JK
    JK avatar
    123 posts
    Member since:
    Sep 2007

    Posted 24 Jan 2008 Link to this post

    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...
  2. Answer
    Fernandes
    Fernandes avatar
    33 posts
    Member since:
    Mar 2005

    Posted 25 Jan 2008 Link to this post

    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");  
        }  
    }  
     

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. JK
    JK avatar
    123 posts
    Member since:
    Sep 2007

    Posted 28 Jan 2008 Link to this post

    Fernandes,

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

    Cannot thank you enough!

    JK
  5. JK
    JK avatar
    123 posts
    Member since:
    Sep 2007

    Posted 28 Jan 2008 Link to this post

    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

  6. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 28 Jan 2008 Link to this post

    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
  7. Fernandes
    Fernandes avatar
    33 posts
    Member since:
    Mar 2005

    Posted 28 Jan 2008 Link to this post

    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.LastNamehidLastName.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
  8. JK
    JK avatar
    123 posts
    Member since:
    Sep 2007

    Posted 28 Jan 2008 Link to this post

    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


  9. JK
    JK avatar
    123 posts
    Member since:
    Sep 2007

    Posted 28 Jan 2008 Link to this post

    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
  10. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 31 Jan 2008 Link to this post

    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
  11. JK
    JK avatar
    123 posts
    Member since:
    Sep 2007

    Posted 31 Jan 2008 Link to this post

    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
  12. Carlos
    Carlos avatar
    1 posts
    Member since:
    Apr 2011

    Posted 13 Apr 2011 Link to this post

    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
  13. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 15 Apr 2011 Link to this post

    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.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017