Show/Hide RibbonBarGroup

10 posts, 0 answers
  1. Yordan
    Yordan avatar
    2 posts
    Member since:
    May 2012

    Posted 29 May 2012 Link to this post

    How can I display/hide ribbon bar group with javascript ?
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 30 May 2012 Link to this post

    Hi Yordan,

    Here is the sample code that I tried based on your scenario.

    ASPX:
    <telerik:RadRibbonBar ID="RadRibbonBar1" runat="server">
      <telerik:RibbonBarTab Text="RibbonBarTab1">
        <telerik:RibbonBarGroup Text="RibbonBarGroup1" Value="RibbonBarGroup1">
          <Items>
             ......
          </Items>
        </telerik:RibbonBarGroup>
      </telerik:RibbonBarTab>
    </telerik:RadRibbonBar>
    <asp:Button ID="Button1" runat="server" OnClientClick="OnClientClick(); return false;" />

    JS:
    <script type="text/javascript">
        function OnClientClick()
         {
            var RadRibbonBar = $find("<%= RadRibbonBar1.ClientID %>");
            var RibbonBarGroup = RadRibbonBar.findGroupByValue("RibbonBarGroup1");
            if (RibbonBarGroup._element.style.display == "none")
            {
                RibbonBarGroup._element.style.display = "block";
            }
            else
            {
                RibbonBarGroup._element.style.display = "none";
            }
         }
    </script>

    Hope this helps.

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Yordan
    Yordan avatar
    2 posts
    Member since:
    May 2012

    Posted 30 May 2012 Link to this post

    Please add a second group and when press the button it shows the first group and hide the second. When is pressed again it swaps the visible group.
    The problem is
    when you press F11(in IE for larger screen) in Firefox F11(for larger screen ) or F12(for firebug)
    the both groups are visible as if one of them has never been set to invisible.

    Here is my sample code based on your code:
    <telerik:RadRibbonBar ID="RadRibbonBar1" runat="server">
          <telerik:RibbonBarTab Text="RibbonBarTab1">
            <telerik:RibbonBarGroup Text="RibbonBarGroup1" Value="RibbonBarGroup1">
              <Items>
                 <telerik:RibbonBarButton ID="RibbonBarButton4" Value="AdminAddDrawing" Text="Add New Drawing" Size="Large" />
              </Items>
            </telerik:RibbonBarGroup>
            <telerik:RibbonBarGroup Text="RibbonBarGroup2" Value="RibbonBarGroup2">
              <Items>
                 <telerik:RibbonBarButton ID="RibbonBarButton1" Value="AdminAddDrawing" Text="Add New Drawing" Size="Large" />
              </Items>
            </telerik:RibbonBarGroup>
          </telerik:RibbonBarTab>
        </telerik:RadRibbonBar>
        <asp:Button ID="Button1" runat="server" OnClientClick="OnClientClick(); return false;" />
        <script type="text/javascript">
            function OnClientClick() {
                var RadRibbonBar = $find("<%= RadRibbonBar1.ClientID %>");
                var RibbonBarGroup1 = RadRibbonBar.findGroupByValue("RibbonBarGroup1");
                var RibbonBarGroup2 = RadRibbonBar.findGroupByValue("RibbonBarGroup2");
                if (RibbonBarGroup1._element.style.display == "none") {
                    RibbonBarGroup1._element.style.display = "block";
                    RibbonBarGroup2._element.style.display = "none";
                }
                else {
                    RibbonBarGroup1._element.style.display = "none";
                    RibbonBarGroup2._element.style.display = "block";
                }
            }
        </script>
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 05 Jul 2012 Link to this post

    Hi Yordan,

    I tested the code that you provided but I was not able to get the issue that you describe. I tried both resizing the browser window and showing/ hiding the firebug and still was not able to observe the issue that you have. Please try using the latest version of our controls and check how it goes.

    All the best,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Peter From LA
    Peter From LA avatar
    35 posts
    Member since:
    May 2005

    Posted 12 Feb 2013 Link to this post

    I can attest to the fact that the behaviour described by Yordan is there, so the way I account for the ribbon showing all the groups on resize is by rechecking all my groups and hiding again the ones that should not be visible - you see a flicker on the screen, but after that the ribbon bar looks as intended (kinda)...

     

    I use code very similar to the one Princy is suggesting and it works OK...

     

    ...BUT since it is not a "native" functionality of the group object it causes some unforseen effects:

    • As you noticed all groups get shown on resize and there has to be a mechanism to hide the "hidden" groups again;
    • Also on resize, all groups (hidden and visible) are taken into accont when the overall size of the ribbonbar is calculated, so button size switching occures even if the visible groups take a relatively small section fo the screen;

    These are very annoying for complex UI's when showing and hiding groups enhances the user's experience.
     
    It would be great if there was a "native" functionality to control the visibility of the groups, and if the visibility of those groups was taken into account when calculating the width of the ribbonbar. I know (I was told) that this is not how the ribbon was intended to be used, but c'mon, folks, we, the designers, should decide how to use the controls that we paid for...

     

     

  7. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 20 Feb 2013 Link to this post

    Hello, Peter.

    When the thread first started, the Ribbon did not offer methods for resiziing. Not even private ones. Yet with a release shortly after it is possible, albeit highly discouraged by us, to resize the ribbon at will.

    The groups (as client side objects) have two utility methods methods for reszing, both of them private: _reduceGroup and _enlargeGroup. In addition, there are the _expandGroup and _collapseGroup methods to perform the eponymous actions.

    Those methods are used internally when the live resizing is happening, but it is possible to enforce them manually.

    Regards,
    Ivan Zhekov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Peter From LA
    Peter From LA avatar
    35 posts
    Member since:
    May 2005

    Posted 20 Feb 2013 Link to this post

    This information is valuable, but you, guys, should consider adding a feature allowing for the hiding and showing groups at will.

    In the meanwhile, I solved the problem for my need by simply forcing the width of the RibbinBar to 2500px - this covers almost all screen sizes out there today and fools the code to stop reducing the size of the buttons when taking itno account the hidden groups too.

    Not the slickest solution, but it works today, and hopefully by tomorrow you will help us by adding the requested feature...  :)
  9. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 22 Feb 2013 Link to this post

    Peter,

    that's an interesting suggestion -- to show hide groups at will. But that would make huge deviation from the spec.

    If for what ever reason you need to hide / show groups completely, perhaps it will be a good idea to use the contextual tabs.

    Regards,
    Ivan Zhekov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Peter From LA
    Peter From LA avatar
    35 posts
    Member since:
    May 2005

    Posted 22 Feb 2013 Link to this post

    "...huge deviation from the specs", why not. Give us the flexibility and those who like to conform to the "specs" can do it, while the rest of us would spend their valuable time developing concepts instead of looking for work-arounds.

    You suggestion for contextual tabs would not do the trick. The way I use the ribbon bar is simulating a tab ribbon with all of the control buttons on the page concentrated in the ribbon bar. When you switch the tab, the entire UI appear to switch to a different "section" of the application. Hiding and showing of groups is done to accomodate the control needs of the sub-sections. I understand that this is not conforming to the specs, but it works for my clients and the work-around I mentioned earlier appears to be working fine in all browsers. Also by setting the solid width that extends way beyond the width of the widest browser is bringing the benefit of fooling the ribbon bar not to recalculate itself on broser resizing, which in turn does not activate the hidden groups, which prevents the flicker wich is inevitable while my code is trying to hide the groups that should be hidden. It is true that I lost the additional buttons at the right top of the ribbon bar, but all of those can be simulated with javascript commands so an overlay div with "fake" buttons at the top-right corner of the page does the trick.

    By the way, when you talk about the specs, were those specs set by the same people (Microsoft) who said that right-click menu does not make sense in the first versions of Silverlight, but then switched their oppinion under pressure from the dev comunity?
  11. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 27 Feb 2013 Link to this post

    Hi, Peter.

    I've logged the feature request in the FeedBack portal and here is the link to monitor activity and vote for the item -- http://feedback.telerik.com/Project/108/Feedback/Details/42157-add-show-hide-ribbon-groups-client-side-functionality.

    Regards,
    Ivan Zhekov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017