How to add/remove a Tab from TabStrip control, by clicking a button from an iFrame page which is reference in the MultiPage View

[Adnan Ahmed]

Hi,

I am working on a SharePoint 2010 based project and most of the look & feel and customisation will be done by Telerik Controls. I am using Telerik TabStrip control in conjunction with MultiPage View control to dynamically generate Tabs and their associated Pages. Most of the MultiPage View pages will be referenced as Iframe.

So on the home page of SP 2010 web site, you will see header, footer and TabStrip control on the left instead of Quick Launch menu and content on the middle screen will be rendered by a referenced Page View i.e. iFrame. The iFrame will be a SharePoint page that will render content and Ribbon control.

I want to provide a button called “Add this page to Tab” on the iFrame page. On the click of “Add this page to Tab”, I want to add a new Tab on the TabStrip control on the client side without any post back. So far, I can access the TabStrip control object from JavaScript by using the following code.

var tabStrip = parent.document.getElementbyId(“ct100_PlaceHolderMain_RadTabStrip1”);

I can also access the Rad MultipPage View control DIV by using the following JavaScript.

var pageView = parent.document.getElementbyId(“ct100_PlaceHolderMain_RadMultiPage1”);

I looked at the code of adding a new tab in the TabStrip control on client side at http://www.telerik.com/community/forums/aspnet-ajax/tabstrip/how-to-set-pageview-to-a-tab-using-client-method.aspx

See code below, which is mentioned in the URL above.

var multiPage = $find("<%=RadMultiPage1.ClientID %>");              multiPage.trackChanges();              var pageView = new Telerik.Web.UI.RadPageView();                          multiPage.get_pageViews().add(pageView);              pageView.get_element().innerHTML = "<iframe src='http://www.google.com' width='100%' height='600px'></iframe>";                          multiPage.commitChanges();              var tabStrip =  $find("<%= RadTabStrip1.ClientID %>");              var tab = new Telerik.Web.UI.RadTab();              tab.set_text("New Tab");              tab.set_pageViewID(pageView.get_id());              alert(pageView.get_id());              tabStrip.trackChanges();              tabStrip.get_tabs().add(tab);              tabStrip.commitChanges();              tabStrip.repaint();

My issue is that I cannot access pageView or TabStrip object properties or methods as I am trying to add a new tab from the iFrame. Can you please provide me detail on how to execute the above code from the iFrame page to add a new tab from the client side.
Similar issue is also described here http://www.telerik.com/community/forums/aspnet-ajax/tabstrip/dynamic-tab-strip-from-iframe.aspx

P.S. I need to achieve the similar functionality to remove a tab by clicking of a button, which will be provided in the iFrame (iFrame will be reference through Page Views content URL property).

Thanks in advance.

Best Regards,

Adnan Ahmed

[Cori]

Hello Adnan,

You'll need to pass the id's you listed in your post in the $find method, along with the second parameter, which tells it where to search. So it would look something like this for your RadTabStrip:

$find("ct100_PlaceHolderMain_RadTabStrip1",parent.document);

I hope that helps.