removing "tab close" button image on ClientTabUnselected

[Felipe]

I am attempting to create  a tabstrip which has various buttons, but only for the selected tab...

the only way i can see of doing that is doing something similar to this tutorial here:

http://www.telerik.com/help/aspnet-ajax/create-closable-tabs-client-side.html

I have done essentially the same thing, however I have added the function RemoveImage(tab, divName) which is being called from the ClientTabUnselected event of the tabstrip.

The relevant javascript is shown below:

var tabStrip1;

        function OnClientLoad() {
            tabStrip1 = $find('<%= RadTabStrip1.ClientID %>');

            for (var i = 0; i < tabStrip1.get_tabs().get_count(); i++) {
                if (tabStrip1.get_tabs().getItem(i).get_value() != "addTab") {
                    AttachCloseImage(tabStrip1.get_tabs().getItem(i), "Images/TabStrip/toggle.png", i);
                }
            }
        }

        function CreateTabImage(ImageUrl) {
            var closeImage = document.createElement("img");
            closeImage.src = ImageUrl;
            closeImage.alt = "close";
            return closeImage;
        }

        function AttachCloseImage(tab, closeImageUrl, index) {
            var closeImage = CreateTabImage(closeImageUrl);
            closeImage.AssociatedTab = tab;
            closeImage.setAttribute("id", "_closeImageDiv_" + index);
            closeImage.onclick = function (e) {
                if (!e) e = event;
                if (!e.target) e = e.srcElement;

                deleteTab(tab);

                e.cancelBubble = true;
                if (e.stopPropagation) {
                    e.stopPropagation();
                }

                return false;
            }
            tab.get_innerWrapElement().appendChild(closeImage);
        }

        function RemoveImage(tab, divName) {
            var element = tab.get_innerWrapElement();
            var img = element.getElementById(divName);
            element.removeChild(img);
        }

        function TabUnselected(sender, eventArgs) {
            RemoveImage(eventArgs.get_tab(), "_closeImageDiv_" + tabStrip1.get_tabs().indexOf(eventArgs.get_tab()));
        }

the RemoveImage() function does not work for some reason... and I am not sure what it is.

as far as i can tell, the parameters are correct, I think perhaps it has to do with me finding the right parent container.

any help would be much appreciated! thanks.

[Helen]

Hi Leland,

The image has no id in the mentioned example. Therefore the line below fails:
var img = element.getElementById(divName);
Did you explicitly set the id of the image?

Greetings,
Helen
the Telerik team

[Felipe]

I was under the impression I was setting it with this line in AttachCloseImage()

closeImage.setAttribute("id", "_closeImageDiv_" + index);

let me know if this is incorrect - i am not very experienced with modifying html elements with javascript

[Felipe]

fixed it!

if anyone is trying to do the same thing, here is the javascript:

var tabStrip1;

            function TabStripOnClientLoad() {
                tabStrip1 = $find('<%= RadTabStrip1.ClientID %>');

                for (var i = 0; i < tabStrip1.get_tabs().get_count(); i++) {
                    if (tabStrip1.get_tabs().getItem(i).get_selected() == true) {
                        AttachCloseImage(tabStrip1.get_tabs().getItem(i), "Images/TabStrip/toggle.png", i);
                    }
                }
            }

            function CreateTabImage(ImageUrl) {
                var closeImage = document.createElement("img");
                closeImage.src = ImageUrl;
                closeImage.alt = "close";
                return closeImage;
            }

            function AttachCloseImage(tab, closeImageUrl, index) {
                var closeImage = CreateTabImage(closeImageUrl);
                closeImage.AssociatedTab = tab;
                closeImage.setAttribute("id", "_closeImageDiv_" + index);
                closeImage.onclick = function (e) {
                    if (!e) e = event;
                    if (!e.target) e = e.srcElement;

                    deleteTab(tab);

                    e.cancelBubble = true;
                    if (e.stopPropagation) {
                        e.stopPropagation();
                    }

                    return false;
                }
                tab.get_innerWrapElement().appendChild(closeImage);
            }

            function RemoveImage(tab, divName) {
                var element = tab.get_innerWrapElement();
                var img = document.getElementById(divName);
                element.removeChild(img);
            }

            function deleteTab(tab) {
                var tabStrip = $find("<%= RadTabStrip1.ClientID %>");

                var tabToSelect = tab.get_previousTab();
                if (!tabToSelect)
                    tabToSelect = tab.get_nextTab();

                tabStrip.get_tabs().remove(tab);

                if (tabToSelect)
                    tabToSelect.select();
            }

            function TabSelecting(sender, eventArgs) {
                if (eventArgs.get_tab().get_value() == "addTab") {
                    addTab();
                    eventArgs.set_cancel(true);
                }
                else {
                    AttachCloseImage(eventArgs.get_tab(), "Images/TabStrip/toggle.png", tabStrip1.get_tabs().indexOf(eventArgs.get_tab()));
                }

//                if (args.get_tab().get_pageViewID()) {
//                    args.get_tab().set_postBack(false);
//                }
            }

            function TabUnselected(sender, eventArgs) {

                RemoveImage(eventArgs.get_tab(), "_closeImageDiv_" + tabStrip1.get_tabs().indexOf(eventArgs.get_tab()));
            }

            function addTab() {
                var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
                tabStrip.trackChanges();
                var tab = new Telerik.Web.UI.RadTab();
                tab.set_text("new tab");
                tab.set_imageUrl("Images/TabStrip/script-excel.png");
                tabStrip.get_tabs().insert(tabStrip.get_tabs().get_count() - 1, tab)
                tabStrip.commitChanges();

                //AttachCloseImage(tab, "Images/TabStrip/toggle.png");

                tab.select();
            }