Issues with Close Images

[Jim]

Hi,

I'm currently migrating our application from RadControls for ASP.NET to RadControls for ASP.NET AJAX and am having an issue with the TabStrip.

We used to be able to add close images to our tabstrip using the following:

        function OnTabStripLoad(sender)
        {
            AttachTabCloseImages();
        }
        function AttachTabCloseImages()
        {
            var tabStrip = RadTabStrip1;
                for (var i = 0; i < tabStrip.AllTabs.length; i++)

                for (var i = 0; i < tabStrip.get_tabs().get_count(); i++)
                {
                    var tab = tabStrip.AllTabs[i];

                    var closeImage = document.createElement("img");
                    closeImage.alt = "Close this tab";
                    closeImage.src = "Images/tabclose.gif";
                    closeImage.style.position = "absolute";
                    closeImage.style.marginTop = "3px";
                    closeImage.style.left ="3px";
                    closeImage.AssociatedTab = tab;
                    closeImage.onmouseover = function(e)
                    {
                         this.src = "Images/tabclosehover.gif";
                         this.style.marginTop = "3px";
                         this.style.left ="3px";
                    }
                    closeImage.onmouseout = function(e)
                    {
                         this.src = "Images/tabclose.gif";
                         this.style.marginTop = "3px";
                         this.style.left ="3px";
                    }
                    closeImage.onclick = function(e)
                    {
                        //this.AssociatedTab.Select();
                        if(this.AssociatedTab.Text == "Welcome")
                        {
                            //SI06353 if(confirm("Are you sure you want to logout?"))
                            //SI06353 {
                            Logout();
                            //SI06353 window.parent.close();
                            //SI06353}
                        }
                        else
                        {
                            RemoveIndexedTab(this.AssociatedTab.Index);
                        }
                    }
                    tab.DomElement.firstChild.appendChild(closeImage);
            }
        }

<radTS:RadTabStrip ID="RadTabStrip1" runat="server" ScrollChildren="true"
   ScrollButtonsPosition="Middle" PerTabScrolling="true" Width="90%"
   OnClientLoad="OnTabStripLoad" OnClientTabSelected="OnTabSelected">
</radTS:RadTabStrip>

But after converting the code over to the new version, at the begining of the AttachTabCloseImages() function, $find("<%= RadTabStrip1.ClientID %>"); returns null.

How can I get around this?

I have also attempted to put the following, but since we build our tabs on the server-side code, it doesn't seem to have access to the "Text" value.

<TabTemplate>
    <img style="margin-left: 10px" src="Images/tabclose.gif" alt="delete" onclick="Logout();" />
    <%# DataBinder.Eval(Container, "Text") %>
</TabTemplate>

[Paul]

Hello Jim,

You can try renaming your function to pageLoad. pageLoad is a shortcut for the Sys.Application.load event. For details on the matter please refer to the following ASP.NET article. 

Greetings,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jim]

I was able to resolve this issue by updating RadAjax to the ASP.NET AJAX version.