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

How to display 2 pageViews of RadMultiPage?

5 Answers 252 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jen
Top achievements
Rank 1
Jen asked on 30 Dec 2014, 07:21 PM
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!

5 Answers, 1 is accepted

Sort by
0
Jen
Top achievements
Rank 1
answered on 30 Dec 2014, 09:55 PM
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>
0
Plamen
Telerik team
answered on 02 Jan 2015, 07:55 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Chris
Top achievements
Rank 1
answered on 25 Feb 2016, 03:05 PM

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

0
Plamen
Telerik team
answered on 26 Feb 2016, 08:04 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Chris
Top achievements
Rank 1
answered on 26 Feb 2016, 02:54 PM

Plamen,

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

All the best,

Chris

Tags
TabStrip
Asked by
Jen
Top achievements
Rank 1
Answers by
Jen
Top achievements
Rank 1
Plamen
Telerik team
Chris
Top achievements
Rank 1
Share this question
or