How to display 2 pageViews of RadMultiPage?

[Jen]

I have a RadTabStrip with 3 tabs ("Show Grid", "Show Chart", "Show Grid & Chart").  It is assigned to a RadMultiPage control with 2 pageViews.  

<telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1" skin="Outlook" CssClass="NoBg">
 <Tabs>
   <telerik:RadTab runat="server" Text="Show Grid" PageViewID="PageView1">
   </telerik:RadTab>
   <telerik:RadTab runat="server" Text="Show Chart" PageViewID="PageView2">
   </telerik:RadTab>
   <telerik:RadTab runat="server" Text="Show Grid & Chart">
   </telerik:RadTab>
 </Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage id="RadMultiPage1" runat="server" SelectedIndex="0" Width="400">
  <telerik:RadPageView id="PageView1" runat="server">
      show the radgrid
  </telerik:RadPageView>
  <telerik:RadPageView id="PageView2" runat="server">
     show the radhtmlchart
  </telerik:RadPageView>
</telerik:RadMultiPage>

How do I make my 3rd tab "Show Grid & Chart" show both "PageView1" & "PageView2"?  Is this possible?  I do NOT want to add a 3rd pageView that has the duplicate controls in PageView1 & PageView2.

Please advise on how to do this either via client-side (javascript) or server-side (c#) code.

Thanks!

[Jen]

I figured out how to do this via client-side  (see below).  However I need to figure out how to show more than 1 pageView via server-side code.  any help would be greatly appreciated.

Client-side code:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function HandleTabClick(sender, args) {
                //alert('calling handletabclick function');
                var tabStrip = sender;
                var tabValue = tabStrip.get_selectedTab().get_value();
                var multiPage = $find("<%=RadMultiPage1.ClientID %>");
                //alert("1. tabValue = " + tabValue);

                if (tabValue == "ShowPV1andPV2") {
                    alert("2. tabValue = " + tabValue);
                    var i;
                    for (i = 0; i < multiPage.get_pageViews().get_count(); i++) {
                        //alert(multiPage.get_pageViews().getPageView(i).get_id());
                        //multiPage.get_pageViews().getPageView(i).show();
                        var pvId = multiPage.get_pageViews().getPageView(i).get_id();
                        if (pvId.indexOf("PageView1") > -1 || pvId.indexOf("PageView2") > -1) {
                            alert("pvId = " + pvId);
                            multiPage.get_pageViews().getPageView(i).show();
                        } else {
                            multiPage.get_pageViews().getPageView(i).hide();
                        }
                    }
                } else {
                    //show assigned pageView
                    var pvIdToShow = multiPage.get_selectedPageView().get_id();
                    //alert("3. pvIdToShow = " + pvIdToShow);
                    //pv.show();
                    var x;
                    for (x = 0; x < multiPage.get_pageViews().get_count() ; x++) {
                        if (multiPage.get_pageViews().getPageView(x).get_id().indexOf(pvIdToShow) > -1) {
                            //alert("SHOW : " + multiPage.get_pageViews().getPageView(x).get_id());
                            multiPage.get_pageViews().getPageView(x).show();
                        } else {
                            //alert("hide : " + multiPage.get_pageViews().getPageView(x).get_id());
                            multiPage.get_pageViews().getPageView(x).hide();
                        }
                    }
                }

                //alert('END handletabclick function');
            }
        </script>
    </telerik:RadCodeBlock>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="pageContent" runat="Server">
    <telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1" Skin="Outlook" OnClientTabSelected="HandleTabClick">
        <Tabs>
            <telerik:RadTab runat="server" Text="Show pv1" PageViewID="PageView1">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Show pv2" PageViewID="PageView2">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Show pv1 & pv2" Value="ShowPV1andPV2" >
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Show Other1" PageViewID="PageView3">
            </telerik:RadTab>
            <telerik:RadTab runat="server" Text="Show Other2" PageViewID="PageView4">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Width="400">
        <telerik:RadPageView ID="PageView1" runat="server">
            PV1 content
        </telerik:RadPageView>
        <telerik:RadPageView ID="PageView2" runat="server">
            pv2 content
        </telerik:RadPageView>
        <telerik:RadPageView ID="PageView3" runat="server">
            pv3 content
        </telerik:RadPageView>
        <telerik:RadPageView ID="PageView4" runat="server">
            pv4 content
        </telerik:RadPageView>
    </telerik:RadMultiPage>
</asp:Content>

[Plamen]

Hi Jen,

You can add a custom CssClass in the code behind and achieve the desired behavior as in the code below:

<telerik:RadTabStrip ID="RadTabStrip1" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1"
      Skin="Outlook" OnTabClick="RadTabStrip1_TabClick">
      <Tabs>
          <telerik:RadTab runat="server" Text="Show pv1" PageViewID="PageView1">
          </telerik:RadTab>
          <telerik:RadTab runat="server" Text="Show pv2" PageViewID="PageView2">
          </telerik:RadTab>
          <telerik:RadTab runat="server" Text="Show pv1 & pv2" Value="ShowPV1andPV2" >
          </telerik:RadTab>
          <telerik:RadTab runat="server" Text="Show Other1" PageViewID="PageView3">
          </telerik:RadTab>
          <telerik:RadTab runat="server" Text="Show Other2" PageViewID="PageView4">
          </telerik:RadTab>
      </Tabs>
  </telerik:RadTabStrip>
  <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0"  Width="400">
      <telerik:RadPageView ID="PageView1" runat="server">
          PV1 content
      </telerik:RadPageView>
      <telerik:RadPageView ID="PageView2" runat="server">
          pv2 content
      </telerik:RadPageView>
      <telerik:RadPageView ID="PageView3" runat="server">

      </telerik:RadPageView>
      <telerik:RadPageView ID="PageView4" runat="server">
          pv4 content
      </telerik:RadPageView>
  </telerik:RadMultiPage>

protected void RadTabStrip1_TabClick(object sender, Telerik.Web.UI.RadTabStripEventArgs e)
  {
      if (e.Tab.Index==2)
      {
          PageView1.CssClass = "SetVisible";
          PageView2.CssClass = "SetVisible";
      }
      else
      {
          PageView1.CssClass = "";
          PageView2.CssClass = "";
      }
  }

<style type="text/css">
       .SetVisible {
           display: block !important;
       }
   </style>

Hope this information will be helpful.

Regards,
Plamen
Telerik

 

 

[Chris]

Hello,

We recently ran into an issue where showing multiple pageviews at one time stopped working. I setup a test using the example code in Plamen's post above. The code appears to no longer work in v2016.1.113.45. The class for the divs for each page view are having the SetVisible amended to them but are being ignored (See below).

<div id="RadMultiPage1" class="RadMultiPage RadMultiPage_Default" style="width:400px;">
    <div id="PageView1" class="rmpView rmpHidden SetVisible">
        PV1 content
    </div>
        <div id="PageView2" class="rmpView rmpHidden SetVisible">
        pv2 content
    </div>
        <div id="PageView3" class="rmpView">
        </div>
        <div id="PageView4" class="rmpView rmpHidden">
             pv4 content
    </div>
        <input id="RadMultiPage1_ClientState" name="RadMultiPage1_ClientState" type="hidden" />
</div>

 

Could you please confirm this and if no longer working what the solution is now.

 

Thanks,

Chris

[Plamen]

Hello,

Yes indeed we have made some changes in the control and that is why the scenario have changed. It is basically not supported scenario by the control and that is why it it was not considered a breaking change.

Here is the changed CSS that worked correctly at my side:

<style type="text/css">
     div.RadMultiPage .SetVisible {
          display: block !important;
      }
  </style>

Regards,
Plamen
Telerik

[Chris]

Plamen,

Thank you for the response and the CSS change. Your solution works perfectly.

All the best,

Chris