Add PageView via Client

[Officialboss]

Hello,

I am adding Tabs via client functions but I am not sure how to go about adding PageView to my MultiPage control so that I can also add content to the Tab. I could not find any samples, would appreciate any help and sample code.

function addTab()
{
    //Adds the tab to the Tabs Collection of the selected tab
    var persistChanges = true;

    var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
    var selectedTab = tabStrip.get_selectedTab();
    var test = arguments[0];
    alert(test);

    if (persistChanges)
        tabStrip.trackChanges();

    var tab = new Telerik.Web.UI.RadTab();
    //selectedTab.get_tabs().add(tab);
    tabStrip.get_tabs().add(tab);
    //tab.set_text("Child Tab " + selectedTab.get_tabs().get_count());

    var pageView = new Telerik.Web.UI.PageView(); // DOES NOT WORK
    var multiPage = $find("<%= RadMultiPage1.ClientID %>");

    if (persistChanges)
        tabStrip.commitChanges();

    return false;
}

[Paul]

Hi Howard,

Please find below a sample code snippet that shows the needed approach.

<script type="text/javascript">
function addtab()
{
    var tabStrip = $find('<%= RadTabStrip1.ClientID %>');
    var mymultiPage = $find('<%= RadMultiPage1.ClientID %>');

    tabStrip.trackChanges();
    mymultiPage.trackChanges();

    var tab = new Telerik.Web.UI.RadTab();
    tabStrip.get_tabs().add(tab);
    tab.set_text("Child Tab " + tabStrip.get_tabs().get_count());
    tab.select();

    var pageView = new Telerik.Web.UI.RadPageView();
    mymultiPage.get_pageViews().add(pageView);
    pageView.get_element().innerHTML = ("PageView" + mymultiPage.get_pageViews().get_count());
    pageView.set_selected(true);

    tabStrip.commitChanges();
    mymultiPage.commitChanges();

    return false;
}
</script>

All the best,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Officialboss]

Paul,
Thank you for your solution. Runs perfect and just what I was looking for.

I have one followup question. I can not get the loading panel to show up.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function addtab()
{
    var tabStrip = $find('<%= RadTabStrip1.ClientID %>');
    var mymultiPage = $find('<%= RadMultiPage1.ClientID %>');

    tabStrip.trackChanges();
    mymultiPage.trackChanges();

    var tab = new Telerik.Web.UI.RadTab();
    tabStrip.get_tabs().add(tab);
    tab.set_text("Child Tab " + tabStrip.get_tabs().get_count());
    tab.select();

    var pageView = new Telerik.Web.UI.RadPageView();
    mymultiPage.get_pageViews().add(pageView);
    pageView.get_element().innerHTML = ("PageView " + Date());
    pageView.set_selected(true);

    tabStrip.commitChanges();
    mymultiPage.commitChanges();

    return false;
}
</script>
</telerik:RadCodeBlock>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel2">

<telerik:radtabstrip id="RadTabStrip1" MultiPageID="RadMultiPage1" Runat="server">
                <Tabs>
                </Tabs>
            </telerik:radtabstrip>

            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">
            </telerik:RadMultiPage>
            <button onclick="return addtab();">Add new tab</button>
</telerik:RadAjaxPanel>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" Transparency="30" BackColor="#E0E0E0">
    <asp:Image ID="Image1" ImageUrl="~/Images/Loading7.gif" BorderWidth="0px" AlternateText="Loading"
    runat="server" Style="margin-top: 45px;" />
</telerik:RadAjaxLoadingPanel>

The code above is in a user control and I have rad ajax proxy manager on the User control. The Ajax manager is in a master page. I have a public property on the master page;

    public RadAjaxManager AjaxManager
    {
        get { return this.RadAjaxManagerMaster; }
    }

I cant use <ClientEvents OnRequestStart="RequestStart" /> on the proxy manager.

I am not using a server button to add my tab, just an html button. How can I initiate the loading panel.
Thanks

[Missing User]

Hello Howard,


Please find attached a sample project showing how to hide/show the loading template. Feel free to modify it according to your needs.

All the best,
Plamen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[mzn developer]

Deleted original post - working as intended after further investigation.