Tootips for radgrid buttons

[Sawula]

<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!

 

[Shinu]

Hello,

Check the following demo.
ToolTip / Tooltipified RadGrid

-Shinu.

[Sawula]

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 />

[Marin Bratanov]

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