Show/Hide RibbonBarGroup

[Yordan]

How can I display/hide ribbon bar group with javascript ?

[Princy]

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.

[Yordan]

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>

[Kate]

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

[Peter From LA]

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...

 

 

[Ivan Zhekov]

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

[Peter From LA]

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...  :)

[Ivan Zhekov]

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

[Peter From LA]

"...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?

[Ivan Zhekov]

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