This is a migrated thread and some comments may be shown as answers.

RadTab and Pageview on client side not working .

0 Answers 68 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
nitin
Top achievements
Rank 1
nitin asked on 16 Oct 2015, 09:26 AM

Hi 

I have to create multiple Tab and Pageview at client side. My requirement is to create tabs on link click and show the one URL inside the tab in pageview. Also functionality to close the tab and ‚Äčopen again. 

I am using the below code but i am facing few issues

1. When I set the pageview id to the tab then pageview content is not showing.  When i use tabStrip1.get_tabs().findTabByText(title).set_pageViewID(title); this code my pageview did not show any controls. why ?

 2. When i close the tab i need to remove the pageview also how can i do this ?

<telerik:RadTabStrip ID="rtsMenu" runat="server" SelectedIndex="0" OnClientTabSelecting="onClientTabSelecting"
                    ScrollChildren="true" MultiPageID="RadMultiPage1" Skin="Windows7" OnTabClick="rtsMenu_TabClick"
                    OnClientLoad="OnClientLoad" BorderColor="Green" BorderWidth="3">
                </telerik:RadTabStrip>
                <telerik:RadMultiPage ID="RadMultiPage1" runat="server" BorderWidth="2" BorderColor="Red"
                    SelectedIndex="0">
                </telerik:RadMultiPage>
var tabStrip1;
       var multiPage;
 
 
       function onClientTabSelecting(sender, args) {
           var tab = args.get_tab();
           var pg = tab.get_pageView();
           //alert(pg);
           if (tab.get_pageView()) {
               tab.set_postBack(false);
           }
       }
 
       function OnClientLoad() {
           tabStrip1 = $find('<%= rtsMenu.ClientID %>');
           multiPage = $find('<%= RadMultiPage1.ClientID %>');
           
       }
 
       function addtab(title, contenturl) {
           var oldtab = tabStrip1.findTabByText(title);
           if (oldtab != null) {
               oldtab.select();
               return;
           }
           // alert(contenturl);
           var tab = new Telerik.Web.UI.RadTab(title);
           tab.set_text(title);
           tabStrip1.trackChanges();
           tabStrip1.get_tabs().add(tab);
           tabStrip1.commitChanges();
 
           //tab.get_element().innerHTML = "<iframe src=\"" + contenturl + "\" frameBorder=\"1\" style=\"width: 1000px; height: 600px;\"></iframe>";
           AttachCloseImage(tab, "delete.png");
 
           multiPage = $find('<%= RadMultiPage1.ClientID %>');
 
           multiPage.trackChanges();
 
           var pageView = new Telerik.Web.UI.RadPageView();
           pageView.set_id(title);
           //pageView.set_contentUrl(contenturl);
           multiPage.get_pageViews().add(pageView);
           //pageView.get_element().id = title;
           //tabStrip1.get_tabs().findTabByText(title).set_pageViewID(title);
 
 
           pageView.get_element().innerHTML = "<iframe src=\"" + contenturl + "\" frameBorder=\"1\" style=\"width: 1000px; height: 600px;\"></iframe>";
 
           multiPage.commitChanges();
           //tab.set_pageViewID(title);
           tab.select();
 
 
       }
 
       function CreateCloseImage(closeImageUrl) {
           var closeImage = document.createElement("img");
           closeImage.src = closeImageUrl;
           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) {
 
 
           tab.select();
           var pageView = new Telerik.Web.UI.RadPageView();
           //pageView = tab.get_pageView();
           pageView = tabStrip1.get_selectedPageView();
           alert(pageView);
           alert(pageView.get_index());
           if (pageView) {
               pageView.hide();
           }
           //                   
           var tabToSelect = tab.get_nextTab();
           if (!tabToSelect)
               tabToSelect = tab.get_previousTab();
 
           tabStrip1.get_tabs().remove(tab);
 
           if (tabToSelect)
               tabToSelect.set_selected(true);
 
           pageView = tabToSelect.get_pageView();
           if (pageView) {
               pageView.select();
           }
           //tabStrip1.repaint();
       }

 

No answers yet. Maybe you can help?

Tags
TabStrip
Asked by
nitin
Top achievements
Rank 1
Share this question
or