Create RadPageView via JavaScript

[Jason Heine]

Hello,

I am attempting to create a RadPageView and add it to my MultiPage control via JavaScript.

Everything works server side ,but the problem that I have is when I do post backs, it reloads every control in every page view that I create dynamically.

Example:

public void CreateReport(string reportName)
        {
            var tab = new RadTab(reportName);

            tabReports.Tabs.Add(tab);

            var newView = new RadPageView
                              {
                                  ID = "ReportView" + Guid.NewGuid().ToString().Replace("-", string.Empty)

                              };
            newView.Attributes.Add("ReportTitle", reportName);
            multiPage.PageViews.Add(newView);

            tab.Selected = true;
            newView.Selected = true;

        }

Then I have: 

protected void multiPage_PageViewCreated(object sender, RadMultiPageEventArgs e)
        {
            string reportTitle = e.PageView.Attributes["ReportTitle"];
            e.PageView.Style.Add("padding", "20px;");
            GenerateQuartileReport(reportTitle, e.PageView);
        }

        protected void cmdViewChart_Click(object sender, EventArgs eventArgs)
        {
            var button = (RadButton)sender;
            CreateReport(button.CommandArgument);
        }

I have sevaral rad buttons on my page that will create a new tab with page view when clicked, it will generate a report and display it to the customer. This works great, until I go to do anything that requires a post back, such as creating another report. It reloads all my pages that I created and the sub controls that are on those pages.

I am using the RadAjaxManager so I can get the loading panels and stuff.

I have tried wrapping sections in asp:panels and I still get the same result.

Here is my RadAjaxManager and other bits of code:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadAjaxManager1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="pnlMain">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="tabReports" />
                <telerik:AjaxUpdatedControl ControlID="multiPage" />
                <telerik:AjaxUpdatedControl ControlID="pnlMain" LoadingPanelID="loadingControl" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadScriptBlock ID="scriptBlock" runat="server">
    <script type="text/javascript">
        var tabStrip = null;

        function pageLoad() {
            tabStrip = $find("<%= tabReports.ClientID%>");
        }

        function CheckExistingTab(sender, args) {
            var tabText = sender.get_commandArgument();


            var checkTab = tabStrip.findTabByText(tabText);

            if (checkTab) {
                sender.set_autoPostBack(false);
                checkTab.select();
            }
        }

    </script>
</telerik:RadScriptBlock>
<telerik:RadAjaxLoadingPanel runat="server" ID="loadingControl" Skin="Black" />

Here are my tabs and multi page:

<telerik:RadTabStrip ID="tabReports" ScrollChildren="true" ScrollButtonsPosition="Middle"

    MultiPageID="multiPage" Orientation="HorizontalTop" runat="server" ShowBaseLine="true"

    Width="1024">

    <Tabs>

        <telerik:RadTab Text="Trend Finding Search" Selected="true" />

    </Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="multiPage" runat="server" CssClass="MultiPageView" OnPageViewCreated="multiPage_PageViewCreated">

    <telerik:RadPageView ID="SearchPage" runat="server" Selected="true">

        <asp:Panel ID="pnlMain" runat="server">

 </asp:Panel>

    </telerik:RadPageView>

</telerik:RadMultiPage>

Inside the first page I have several buttons, but here is one as an example:

<telerik:RadButton ID="RadButton1" Image-EnableImageButton="true" CommandArgument="Report Number 1"
                                                                    runat="server" OnClientClicked="CheckExistingTab"
                                                                    Height="24px" Width="24px">
                                                                    <Image ImageUrl="~/App_Themes/Default/Images/chart.png" />
                                                                </telerik:RadButton>

<telerik:RadButton ID="RadButton2" Image-EnableImageButton="true" CommandArgument="Report Number 2"
                                                                    runat="server" OnClientClicked="CheckExistingTab"
                                                                    Height="24px" Width="24px">
                                                                    <Image ImageUrl="~/App_Themes/Default/Images/chart.png" />
                                                                </telerik:RadButton>

Any thoughts to how I can load my tab/pageview without having to reload all my dynamically created page views when I go to create another one?

I was thinking with JavaScript, but there might be a better solution.

Thoughts?

Jason

[Dimitar Terziev]

Hello Jason,

If you are creating your tab dynamically on server-side, before the page load , you just have to enclose your code in if(!Page.isPostBack){} statement. This way your code will be executed only the first time.
Then when you click a button , in the click event handler you will create new tab and added to the tabs collection, without reloading all the tabs and thus sustaining your controls state.


Best wishes,
Dimitar Terziev
the Telerik team