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

Create RadPageView via JavaScript

1 Answer 104 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jason Heine
Top achievements
Rank 1
Jason Heine asked on 11 Feb 2011, 10:27 PM
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

1 Answer, 1 is accepted

Sort by
0
Dimitar Terziev
Telerik team
answered on 15 Feb 2011, 04:50 PM
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
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Tags
TabStrip
Asked by
Jason Heine
Top achievements
Rank 1
Answers by
Dimitar Terziev
Telerik team
Share this question
or