Set the focus for 'x' (close) image button

[Kishan Gandikota]

Hi,

I have implemented a RAD tooltip manager to a hyperlink inside a grid. Onclick of the hyperlink, tooltip pop-ups properly. But how will you set the focus to the 'X' button inside the tooltip? The 'X' (close) button gets added to the tooltip because we used Hideevent as "ManualClose".

<telerik:RadToolTipManager ID="radToolTipDetail" runat="server" Width="220" OffsetY="-7"
                                OffsetX="10" RelativeTo="Element" Position="BottomCenter" HideEvent="ManualClose"
                                OnAjaxUpdate="OnAJAXUpdate" ShowEvent="OnClick" Height="30px">
</telerik:RadToolTipManager>

Is this possible? Also does this tooltip come under accessibility standards? Thanks.

Regards,
Kishan G K

[Kishan Gandikota]

Hi Telerik Team,

Could you please help me in this regard? Is this possible to achieve with what I have said below? Is there is a way to set the focus to 'X' button on open to tooltip? This is to ensure when user uses keyboard, on click of enter, user can close the tooltip and perform his next operation.

I would really appreciate if someone could respond to this.

Regards,

Kishan G K

[Svetlina Anati]

Hello Kishan,

I prepared for you sample code which achieves what you requested - you can find it below:

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <script type="text/javascript">

        document.getElementsByClassName = function(cl)
        {
            var retnode = [];
            var myclass = new RegExp('\\b'+cl+'\\b');
            var elem = this.getElementsByTagName('*');
            for (var i = 0; i < elem.length; i++) {
            var classes = elem[i].className;
            if (myclass.test(classes)) retnode.push(elem[i]);
            }
        return retnode;
        };

        function OnClientShow()
        {
          var closeButton = document.getElementsByClassName("rtCloseButton")[0];
          closeButton.focus();
        }

        </script>

        <asp:HyperLink ID="HyperLink1" runat="server">Show ToolTip</asp:HyperLink>
        <telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="HyperLink1"
            Width="200" Height="200" HideEvent="ManualClose" OnClientShow="OnClientShow">
        </telerik:RadToolTip>
    </form>

On a side note, forums are considered community resources and we do not garantee a timely reponse in them - if you want to ensure that you will receive  faster and guaranteed replies to your questions you should open support threads instead of forum ones.

I hope that the code I prepared for you is helpful, let me know whether it meets your requirements.

Kind regards,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Kishan Gandikota]

Hi Svetlina,

Amazing...this is what I was looking for... Another question: I have RAD Grid inside which I have some hyperlinks...these hyperlinks have some tooltip implemented... so my question is is there a way that I can return the focus to hyperlink (selected hyperlink) on close of tooltip? I tried looking at OnClientHide()...that didn't help me...Is there any server event, that I can use to set the focus back to the hyperlink that I had selected? If there is only client side event on close of tooltip, I have to think of putting the selected hyperlink to session/view state and access it. If you have any other thoughts, I would appreciate it....again thanks for your solution... :)

On a side note, sorry for pressing it hard...i didn't intend to hurt anyone...

Regards,

Kishan G K

[Georgi Tunev]

Hi Kishan,

Indeed, you could use the OnClientHide event handler, but please make sure that your hyperlink has a href attribute - otherwise the browser will treat it as an anchor and you will not be able to focus it.

Here is a modified version of the code that shows how to achieve the desired result - I have highlighted the changes I made:

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <script type="text/javascript">

        document.getElementsByClassName = function(cl)
        {
            var retnode = [];
            var myclass = new RegExp('\\b' + cl + '\\b');
            var elem = this.getElementsByTagName('*');
            for (var i = 0; i < elem.length; i++)
            {
                var classes = elem[i].className;
                if (myclass.test(classes)) retnode.push(elem[i]);
            }
            return retnode;
        };

        function OnClientShow(sender, args)
        {
            var closeButton = document.getElementsByClassName("rtCloseButton")[0];
            closeButton.focus();
        }

        function OnClientHide(sender, args)
        {
            var targetElement = sender.get_targetControl();
            targetElement.focus();
        }

    </script>


    <asp:HyperLink

    NavigateUrl="#"

    ID="HyperLink1" Text="Show ToolTip" runat="server"></asp:HyperLink>
    <telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="HyperLink1"
        Width="200" Height="200" HideEvent="ManualClose"

        OnClientHide="OnClientHide"

        OnClientShow="OnClientShow">
    </telerik:RadToolTip>
</form>

Regards,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Kishan Gandikota]

Hi Georgi,

Big thank-you for your solution. 

Svetlina/Georgi,

I am facing in slight glitch with the shared code. I am trying to fix this problem last couple of days but it went in vain. 

As I said already, I have RAD Grid which has hyperlink (Item template) with tooltip functionality implemented to it.

When I click the tooltip for the first time, things went good. Focus was set to 'x' button as expected. 

Problem starts next time we click on the different hyperlink in the grid. This time the code document.getElementsByClassName("rtCloseButton") returns 2 items with rtcloseButton. So I can't say to get the focus of 0th element and set the focus because user might have selected any of those items from the grid. I tried to see if 1st and next occurences of this rtClosebutton has any difference (like style none or something). But I couldn't find a mechanism to figure out the difference. Is there a way to do this.




Sample code for ex: 

<telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Width="100" Height="100"
                    OffsetY="-7" OffsetX="7" RelativeTo="Element" Position="MiddleRight" HideEvent="ManualClose"
                    OnAjaxUpdate="OnAjaxUpdate" ShowEvent="OnClick" OnClientShow="OnClientShow" OnClientHide="OnClientHide">
                </telerik:RadToolTipManager>
                <telerik:RadGrid ID="RadGrid1" runat="server" EnableEmbeddedSkins="True" AllowPaging="True"
                    AllowSorting="True" PageSize="10" GridLines="None" OnItemDataBound="RadGrid1_ItemDataBound"
                    ShowFooter="true">
                    <ClientSettings AllowGroupExpandCollapse="true">
                        <Selecting AllowRowSelect="true" />
                    </ClientSettings>
                    <MasterTableView AutoGenerateColumns="False">
                        <NoRecordsTemplate>
                            <div>
                                <asp:Localize ID="locNoRecordsinGrid" runat="server" Text="No Records" />
                            </div>
                        </NoRecordsTemplate>
                        <Columns>
                            <telerik:GridBoundColumn HeaderText="Account" UniqueName="AccountNumber" DataField="AccountNumber"
                                AllowSorting="true">
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn HeaderText="Short Name" UniqueName="Short Name" DataField="ShortName"
                                AllowSorting="true">
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn HeaderText="HyperLink Reason Description">
                                <ItemTemplate>
                                    <asp:HyperLink ID="hypReason" runat="server" Text="Reason" NavigateUrl="#">
                                    </asp:HyperLink>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="ReasonCode" HeaderText="Reason Code" Visible="false"
                                DataType="System.String">
                            </telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>

In aspx.cs:

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
            Control target = e.Item.FindControl("hypReason");
            if (!Object.Equals(target, null))
            {
                if (!Object.Equals(this.RadToolTipManager1, null))
                {
                    Account currentRow = (Account)e.Item.DataItem;
                    //Add the button (target) id to the tooltip manager
                    this.RadToolTipManager1.TargetControls.Add(target.ClientID, currentRow.AccountNumber.ToString(), true);
                }
            }
        }

        protected void OnAjaxUpdate(object sender, ToolTipUpdateEventArgs args)
        {
            this.UpdateToolTip(args.Value, args.UpdatePanel);
        }
        private void UpdateToolTip(string elementID, UpdatePanel panel)
        {
            foreach (GridDataItem gridVal in RadGrid1.MasterTableView.Items)
            {
                if (gridVal["AccountNumber"].Text.Equals(elementID))
                {
                    Control ctrl = Page.LoadControl("Tooltip.ascx");
                    ((Tooltip)ctrl).AccountNumberLabel = elementID;
                    ((Tooltip)ctrl).ReasonDescription = gridVal["ReasonCode"].Text;
                    panel.ContentTemplateContainer.Controls.Add(ctrl);
                    break;
                }
            }

        }




Regards,

Kishan G K

[Kishan Gandikota]

Hello Svetlina/Georgi,

I am able to find a pattern/mechanism to identify the appropriate rtCloseButton by looking at it's <div> tag.

This is HTML generated: for every click event on each row of the RAD Grid. When we click on 2nd hyperlink on the grid, the below mentioned DIV (for the 1st row's tooltip) applies the style as Visibility:Hidden  and for the current tooltip (2nd row's tooltip), it generates another DIV. This pattern helped me to modify existing method getelementbyclassname. I have shared the updated code below.

<div id="RadToolTipWrapper_RadToolTipManager11011256155820679" class="RadToolTip_Default rtVisibleCallout" unselectable="on" style="position: absolute; z-index: 8000; visibility: visible; left: 677px; top: 7px; width: 100px;">
<div class="rtCallout rtCalloutMiddleLeft" style="visibility: visible; top: 60px;"> </div>
<table class="rtWrapper" style="width: 100px; height: 100px;">
<tbody>
<tr>
<td class="rtWrapperTopLeft"> </td>
<td class="rtWrapperTopCenter">
<div class="rtTitlebar" style="display: none;"/>
<a class="rtCloseButton" href="javascript: void(0);" title="Close">
<span>Close</span>
</a>
</td>
<td class="rtWrapperTopRight"> </td>
</tr>
<tr>
<td class="rtWrapperLeftMiddle"> </td>
<td class="rtWrapperContent" valign="top">
<div id="RadToolTipManager1RTMPanel" style="">
<span id="ctl04_Label1">Account Number: </span>
<span id="ctl04_lblAccountNumberValue">123</span>
<br/>
<br/>
<span id="ctl04_Label3">ReasonCode Description: </span>
<span id="ctl04_ReasonCodeDescriptionValue">Both Server & Database is down.</span>
<br/>
<br/>
<br/>
<input id="ctl04_Close" type="submit" onclick="CloseActiveToolTip();" value="Close" name="ctl04$Close"/>
<p>  </p>
</div>
</td>
<td class="rtWrapperRightMiddle"> </td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>

Updated method getElementByClassName  in aspx file:  

I just added a extra check 

"if(elem[i-8].style.visibility == 'visible')"

which ensures that, only if the tooltip's <div> has visibility as VISIBLE, add it to the retNode. So all the time, retNode will be having only one element. 

I am not a master of Javascript but I would like to get feedback from Telerik team if I can proceed with this approach? If there any other better approach, please let me know.

One Final Question: Is this RAD tooltip fall under "web accessbility" standards? If yes, I assume screen reader would be in a position to read the details on the tooltip.

document.getElementByClassName = function(c1)
        {
            var retnode = [];
            var myClass = new RegExp('\\b' + c1 + '\\b');
            var elem = this.getElementsByTagName('*');
            for(var i = 0; i < elem.length; i++)
            {
                var classes = elem[i].className;
                if(myClass.test(classes))
                {
                    if(elem[i-8].style.visibility == 'visible')
                    {
                        retnode.push(elem[i]);
                        break;
                    }
                }
            }
            return retnode;
        }

Thanks. I am looking forward for your feedback on this.

Regards,

Kishan G K

[Svetlina Anati]

Hello Kishan,

Please, accept my sincere apologies for not testing in this more complex and absolutely valid scenario. Indeed, you are correct that an additional check should be applied to determine teh exact tooltip since the others are already added to the page and their HTML is present.

I am glad to inform you that we implemented a client - side method called getManualCloseButton and it will be available in the upcoming Q3 release. When it comes out you can simply use it in the OnClientShow handler and you should not have to take care about indexes but you will be able to reference the particular button out of the box. For the time being I recommend to stick to the solution you found yourself.


Kind regards,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Kishan Gandikota]

Hi Svetlina,

Thanks for the response. I went ahead and implemented the java script. And thanks for creating a client side method getManualCloseButton.

We can close this post now. thanks for assisting me in achieving my requirement.

Regards,
Kishan G K