Tootips for radgrid buttons

4 posts, 0 answers
  1. Sawula
    Sawula avatar
    4 posts
    Member since:
    Aug 2009

    Posted 29 Feb 2012 Link to this post

    <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Position="BottomCenter"
                    RelativeTo="Element" Width="400" Height="400" Animation="Resize" HideEvent="LeaveTargetAndToolTip"
                    OnAjaxUpdate="OnAjaxUpdate" OnClientHide="OnClientHide" RenderInPageRoot="true" AnimationDuration="200">
                  
    <TargetControls>
    <telerik:ToolTipTargetControlTargetControlID="Complain_btn" IsClientID="true"/>
    </TargetControls>
    </telerik:RadToolTipManager>
    <Columns>
           <telerik:GridTemplateColumn  HeaderText="Complains"   UniqueName="TemplateColumn1">
            <ItemTemplate>
            <telerik:RadButton ID="Complain_btn"  Text="Complain Details"  runat="server" >
            </telerik:RadButton>
              </ItemTemplate>
              </telerik:GridTemplateColumn>
    </Columns>
     
     protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
            {
                this.UpdateToolTip(args.Value, args.UpdatePanel);
            }
     
            private void UpdateToolTip(string elementID, UpdatePanel panel)
            {
                Control ctrl = Page.LoadControl("Complains.ascx");
                panel.ContentTemplateContainer.Controls.Add(ctrl);
                Complains c = (Complains)ctrl;
                 c.CompID = elementID;
            }
    I have a radgrid with a radbuttons added to the master table view. And I want to use tooltip manager and add tooltips from the database dynamically. Can any one tell me how to add tooltips step by step . This is my radgrid code. Please help Me!


     


  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Feb 2012 Link to this post

    Hello,

    Check the following demo.
    ToolTip / Tooltipified RadGrid

    -Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sawula
    Sawula avatar
    4 posts
    Member since:
    Aug 2009

    Posted 01 Mar 2012 Link to this post

    Finally I was able to execute tooltips. But now only the tooltips for the first button column displays for all rows. Please help me ! Following are the codes.
    //////////////////////////////////////data.ascx.cs/////////////////////
     public string Error_Details
            {
                get
                {
                    if (ViewState["Error_Details"] == null)
                    {
                        return "";
                    }
                    return (string)ViewState["Error_Details"];
                }
                set
                {
     
                    ViewState["Error_Details"] = value;
                }
            }
     
            protected override void OnPreRender(EventArgs e)
            {
                base.OnPreRender(e);
                this.SqlDataSource2.SelectParameters["Error_Details"].DefaultValue = this.Error_Details;
                this.DataBind();
            }
     
           
            protected void FormView2_DataBound(object sender, EventArgs e)
            {
                System.Web.UI.WebControls.Label lb = (System.Web.UI.WebControls.Label)FormView2.FindControl("Error_DetailsLabel");
                if (lb == null) return;
            }
     
    /////////////////////////////////////////////////data.ascx////////////////////////
    <asp:SqlDataSource ID="SqlDataSource2" runat="server"
        ConnectionString="<%$ ConnectionStrings:tooltiptest %>"
        SelectCommand="SELECT * FROM [Comp_Human1] WHERE ([UserID] = @UserID)">
        <SelectParameters>
            <asp:Parameter DefaultValue="sss" Name="UserID" Type="String" />
            <asp:Parameter   Name="Error_Details" Type="String" />
        </SelectParameters>
    </asp:SqlDataSource>
     
    <asp:FormView ID="FormView2" runat="server" DataKeyNames="UserID"
        DataSourceID="SqlDataSource2" ondatabound="FormView2_DataBound"
        <ItemTemplate>
            Error_Details:
            <asp:Label ID="Error_DetailsLabel" runat="server"
                Text='<%# Bind("Error_Details") %>' />
            <br />
            <br />
        </ItemTemplate>
    </asp:FormView>
    /////////////////////////////////////////////default.aspx.cs//////////////////////////////
     
    protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
        {
            this.UpdateToolTip(args.Value, args.UpdatePanel);
        }
     
        private void UpdateToolTip(string elementID, UpdatePanel panel)
        {
            Control ctrl = Page.LoadControl("data.ascx");
            panel.ContentTemplateContainer.Controls.Add(ctrl);
            data d = (data)ctrl;
            d.Error_Details = elementID;
         
             
        }
     
        protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
        {
            if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
            {
                Control target = e.Item.FindControl("comp_ctl");
                if (!Object.Equals(target, null))
                {
                    if (!Object.Equals(this.RadToolTipManager1, null))
                    {
                        //Add the button (target) id to the tooltip manager
                        this.RadToolTipManager1.TargetControls.Add(target.ClientID, (e.Item as GridDataItem).GetDataKeyValue("UserID").ToString(), true);
     
                    }
                }
            }
     
        }
     
    /////////////////////////////////////////////default.aspx///////////////////////////
     <telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0"
                DataSourceID="SqlDataSource1" OnItemDataBound="RadGrid1_ItemDataBound"
                GridLines="None">
    <MasterTableView AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyNames="UserID">
    <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
     
    <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
    <HeaderStyle Width="20px"></HeaderStyle>
    </RowIndicatorColumn>
     
    <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
    <HeaderStyle Width="20px"></HeaderStyle>
    </ExpandCollapseColumn>
     
        <Columns>
            <telerik:GridTemplateColumn HeaderText="Complain Details" >
            <ItemTemplate>
             <telerik:RadButton ID="comp_ctl" runat="server" Text="Complain Details">
            </telerik:RadButton>
             
            </ItemTemplate>
             
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn DataField="HM" DataType="System.Int32"
                FilterControlAltText="Filter HM column" HeaderText="HM" SortExpression="HM"
                UniqueName="HM">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="HM1" DataType="System.Int32"
                FilterControlAltText="Filter HM1 column" HeaderText="HM1" SortExpression="HM1"
                UniqueName="HM1">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="TC" DataType="System.Int32"
                FilterControlAltText="Filter TC column" HeaderText="TC" SortExpression="TC"
                UniqueName="TC">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="TC1" DataType="System.Int32"
                FilterControlAltText="Filter TC1 column" HeaderText="TC1" SortExpression="TC1"
                UniqueName="TC1">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Error_Type"
                FilterControlAltText="Filter Error_Type column" HeaderText="Error_Type"
                SortExpression="Error_Type" UniqueName="Error_Type">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Date_time" DataType="System.DateTime"
                FilterControlAltText="Filter Date_time column" HeaderText="Date_time"
                SortExpression="Date_time" UniqueName="Date_time">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="UserID"
                FilterControlAltText="Filter UserID column" HeaderText="UserID"
                SortExpression="UserID" UniqueName="UserID">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Settle"
                FilterControlAltText="Filter Settle column" HeaderText="Settle"
                SortExpression="Settle" UniqueName="Settle">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Engineer"
                FilterControlAltText="Filter Engineer column" HeaderText="Engineer"
                SortExpression="Engineer" UniqueName="Engineer">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Error_Details"
                FilterControlAltText="Filter Error_Details column" HeaderText="Error_Details"
                SortExpression="Error_Details" UniqueName="Error_Details">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Solution"
                FilterControlAltText="Filter Solution column" HeaderText="Solution"
                SortExpression="Solution" UniqueName="Solution">
            </telerik:GridBoundColumn>
        </Columns>
     
    <EditFormSettings>
    <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
    </EditFormSettings>
    </MasterTableView>
     
    <FilterMenu EnableImageSprites="False"></FilterMenu>
     
    <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>
            </telerik:RadGrid>
     
    /////////////////////////////////////////////////////////////////////////////////////////////////////
      <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" OffsetX="-1" HideEvent="LeaveToolTip"
             Width="300" Height="300" OnAjaxUpdate="OnAjaxUpdate" RelativeTo="Element"
                Position="BottomCenter" Animation="Resize" AnimationDuration="100"
                AutoTooltipify="True" EnableShadow="True" Skin="Black"></telerik:RadToolTipManager>
            
             <asp:SqlDataSource ID="SqlDataSource1" runat="server"
                ConnectionString="<%$ ConnectionStrings:tooltiptest %>"
                SelectCommand="SELECT * FROM [Comp_Human1] WHERE ([UserID] = @UserID)">
                 <SelectParameters>
                     <asp:Parameter Name="UserID" Type="String" DefaultValue="sss" />
                     <asp:Parameter Name="Error_Details" Type="String" DefaultValue="sss"  />
                 </SelectParameters>
        </asp:SqlDataSource><br />

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 05 Mar 2012 Link to this post

    Hi Sawula,

    In the code you pasted there is only one column that has a RadButton and the code-behind seems ok. In case you need to tooltipify other columns (bound columns, for example, that do not have controls inside) you can add the entire cell as a target controls for the tooltip in the ItemDatabound event handler, e.g:
    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
        {
            if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
            {
                 RadToolTipManager1.TargetControls.Add(((e.Item as GridDataItem)["ColumnUniqueName"] as TableCell).ClientID, "the needed value", true);
                 //more logic here
            }
        }
    }

    How to access cells and rows in a RadGrid depending on the column is explained in this help article: http://www.telerik.com/help/aspnet-ajax/grid-accessing-cells-and-rows.html.

    The general logic is that you need to add a target control entry for each control you want to attach a tooltip tip. This means that when each row is databound you can attach more than one target, not just for the first column.

    Kind regards,
    Marin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top