Update tabs after delete

4 posts, 1 answers
  1. cyfirst
    cyfirst avatar
    11 posts
    Member since:
    Sep 2009

    Posted 23 Dec 2009 Link to this post

    Hi,
    I am adding and deleting tacs via client code as documented in various examples.  I have two issues that I could use some help with.
    1. I use the CreateCloseImage function to add an image to the tab.  Is there a way to define an image for when the tab is active or inactive (i.e. on mouseover )? 
    2. When I delete a tab and its associated pageview and then add a new tab, I get the pageview that was just removed. 
     for (j = 0; i < 5 && j < selectedItems.length; i++, j++) {  
                  //create an new page view  
                  pageView = new Telerik.Web.UI.RadPageView();  
                  pageView.set_id(("DocView" + i));  
     
                  multiPage.trackChanges();  
                  multiPage.get_pageViews().add(pageView);  
                                 
                  multiPage.commitChanges();  
     
                  tabStripItem = new Telerik.Web.UI.RadTab();  
                  tabStripItem.set_text("new tab");  
     
                  tabStripItem.set_pageViewID("DocView" + i);  
                  tabStripItem.set_selected();  
                    
                  tabStrip.trackChanges();  
                  tabStrip.get_tabs().add(tabStripItem);  
                  AttachCloseImage(tabStripItem, "Images/delete.gif");  
                                  
                  tabStrip.commitChanges();  
                    
                  tabStrip.set_selectedIndex(i);  
              }  
          }  
     
     function CreateCloseImage(closeImageUrl) {  
            debugger  
                var closeImage = document.createElement("img");  
                closeImage.src = closeImageUrl;  
                closeImage.style.marginTop = "2px";  
                closeImage.style.position = "relative";  
                closeImage.style.border = "none";  
                closeImage.style.right = "-10px";  
                closeImage.alt = "Close this tab";  
                return closeImage;     
     
            }  
     
            function AttachCloseImage(tab, closeImageUrl) {  
                var closeImage = CreateCloseImage(closeImageUrl);  
                closeImage.AssociatedTab = tab;  
                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 deleteTab(tab) {  
                var tabStrip = $find("<%= RadTabStrip1.ClientID %>");             
                var pageView = tab.get_pageView();  
                var tabToSelect = tab.get_nextTab();  
                var multiPage = $find("<%= RadMultiPage1.ClientID %>");  
                  
                if (!tabToSelect)  
                    tabToSelect = tab.get_previousTab();  
                tabStrip.trackChanges();  
                  
                multiPage.trackChanges();   
     
                tabStrip.get_tabs().remove(tab);  
                multiPage.get_pageViews().remove(pageView);             
     
                if (tabToSelect)  
                    tabToSelect.set_selected(true);  
     
                multiPage.commitChanges();   
                tabStrip.commitChanges();   
            }  
             
    So what is happening is if I remove tab2/pageView2 and then add a new tab2/pageView2, the contents of the first pageView is shown and I don't know where the new pageView is.

    Thanks for your assistance.
  2. cyfirst
    cyfirst avatar
    11 posts
    Member since:
    Sep 2009

    Posted 11 Jan 2010 Link to this post

    Hi,
    I have solved my second issue with getting the wrong pageview but I haven't found a solution for changing the image on the tab that is created via the CreateCloseImage function.  I want to be able to have the image be gey when the tab is created and red when the user does a mouseover (just like the tabs in IE or FF).  Can anyone help me with this?
    Thanks,
  3. Answer
    Vesko
    Vesko avatar
    122 posts
    Member since:
    Mar 2009

    Posted 14 Jan 2010 Link to this post

    Have you tried to hook on the onmouseover event of the image? Just like you did with the onclick event. Then you should just change the src attribute of the image.
  4. cyfirst
    cyfirst avatar
    11 posts
    Member since:
    Sep 2009

    Posted 14 Jan 2010 Link to this post

    Thanks!  That was what I needed to do.
Back to Top