How to display 2 pageViews of RadMultiPage?

6 posts, 0 answers
  1. Jen
    Jen avatar
    4 posts
    Member since:
    Jul 2013

    Posted 30 Dec 2014 Link to this post

    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!

  2. Jen
    Jen avatar
    4 posts
    Member since:
    Jul 2013

    Posted 30 Dec 2014 in reply to Jen Link to this post

    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>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 02 Jan 2015 Link to this post

    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.

     
  5. Chris
    Chris avatar
    2 posts
    Member since:
    Feb 2016

    Posted 25 Feb in reply to Plamen Link to this post

    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

  6. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 26 Feb Link to this post

    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
  7. Chris
    Chris avatar
    2 posts
    Member since:
    Feb 2016

    Posted 26 Feb in reply to Plamen Link to this post

    Plamen,

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

    All the best,

    Chris

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017