Telerik blogs

This blog post intends to provide information on the newly added RibbonBarGallery as well as the improved ApplicationMenu that comes with the Q2 2013 of the Telerik’ ASP.NET AJAX controls. Here you can find how to use the new additions as well as the improved ones.

How it all started

Ever since we release the Telerik's ASP.NET AJAX RibbonBar control many curious customers have been inquiring us on various new features and improvements of the  control. Therefore we are extremely pleased to let you know that as of the Q2 2013 we are introducing major improvements of the Application Menu. In addition to that we also created a new functionality represented by the RibbonBarGallery.

New RibbonBarGallery

The newest addition to the RadRibbonBar control that we added for the Q2 2013 release is the RadRibbonBarGallery. If you are not familiar with galleries, you could view it as a sort of functionally and graphically rich list box e.g. with images (more on the exact structure in a bit). Chances are that if you ever used MS Word or Excel, you know what a gallery is, even without knowing that it is a gallery. Once you start building the RadRibbonBarGallery you have the freedom to group the RibbonBarGalleryItems into different categories. It is easily achieved with the RibbonBarGalleryCategory. There are also RibbonBarGalleryItems that are represented as images or images and text and can be displayed in flexible column and row-based layouts. Furthermore, the client-side (OnClientGalleryCommandPreview, OnClientGalleryCommandPreviewEnd and OnClientGalleryCommand) and server-side (OnGalleryCommand) events enable easy customization of the control.
 

<telerik:RadRibbonBar ID="RadRibbonBar2" runat="server">
          <telerik:RibbonBarTab Text="Gallery Items">
              <telerik:RibbonBarGroup Text="Gallery">
                  <Items>
                      <telerik:RibbonBarGallery>
                          <telerik:RibbonBarGalleryCategory Title="Category 1">
                              <telerik:RibbonBarGalleryItem ImageUrl="icons/galleryItem.gif" />
                              <telerik:RibbonBarGalleryItem ImageUrl="icons/galleryItem.gif" />
                              <telerik:RibbonBarGalleryItem ImageUrl="icons/galleryItem.gif" />
                              <telerik:RibbonBarGalleryItem ImageUrl="icons/galleryItem.gif" />
                              <telerik:RibbonBarGalleryItem ImageUrl="icons/galleryItem.gif" />
                          </telerik:RibbonBarGalleryCategory>
                          <telerik:RibbonBarGalleryCategory Title="Category 2">
                              <telerik:RibbonBarGalleryItem ImageUrl="icons/galleryItem.gif" />
                              <telerik:RibbonBarGalleryItem ImageUrl="icons/galleryItem.gif" />
                              <telerik:RibbonBarGalleryItem ImageUrl="icons/galleryItem.gif" />
                              <telerik:RibbonBarGalleryItem ImageUrl="icons/galleryItem.gif" />
                          </telerik:RibbonBarGalleryCategory>
                          <telerik:RibbonBarGalleryCategory Title="Category 3">
                              <telerik:RibbonBarGalleryItem ImageUrl="icons/galleryItem.gif" />
                              <telerik:RibbonBarGalleryItem ImageUrl="icons/galleryItem.gif" />
                              <telerik:RibbonBarGalleryItem ImageUrl="icons/galleryItem.gif" />
                              <telerik:RibbonBarGalleryItem ImageUrl="icons/galleryItem.gif" />
                              <telerik:RibbonBarGalleryItem ImageUrl="icons/galleryItem.gif" />
                          </telerik:RibbonBarGalleryCategory>
                      </telerik:RibbonBarGallery>
                  </Items>
              </telerik:RibbonBarGroup>
          </telerik:RibbonBarTab>
      </telerik:RadRibbonBar>

 

Improvements to the ApplicationMenu

On the first place it is important to mention that if you have been using an Application menu with any of the previous versions of the RadControls your code will not break once you upgrade to the Q2 2013. While designing the new menu we took that fact into consideration and implemented the code of the new menu fully compatible with the previous versions of the RadControl. However, in contrast to the old Application Menu, the new one aims at providing full consistency with the Microsoft’s specification of the control. Currently with the Application Menu there are no templates and thus no other controls can be nested in a menu item. In contrast to that the improvements of the new menu enables adding custom controls by using the AuxiliaryPane and/or the FooterPane.

<ApplicationMenu Text="File">
              <Items>
                  <telerik:RibbonBarApplicationMenuItem Text="New" ImageUrl="icons/file/New.png" />
                  <telerik:RibbonBarApplicationMenuItem Text="Open" ImageUrl="icons/file/Open.png" />
                  <telerik:RibbonBarApplicationMenuItem Text="Save" ImageUrl="icons/file/Save.png" />
                  <telerik:RibbonBarApplicationSplitMenuItem Text="Save As" ImageUrl="icons/file/SaveAs.png"
                      Header="Save document as">
                      <Items>
                          <telerik:RibbonBarApplicationMenuItem Text="Word Document (*.docx)" ImageUrl="icons/file/Document.png" />
                          <telerik:RibbonBarApplicationMenuItem Text="Word 97-2003 Document (*.doc)" ImageUrl="icons/file/Document.png" />
                          <telerik:RibbonBarApplicationMenuItem Text="PDF (*.pdf)" ImageUrl="icons/file/Document.png" />
                          <telerik:RibbonBarApplicationMenuItem Text="Web Page (*.htm;*.html)" ImageUrl="icons/file/Document.png" />
                          <telerik:RibbonBarApplicationMenuItem Text="Plain Text (*.txt)" ImageUrl="icons/file/Document.png" />
                      </Items>
                  </telerik:RibbonBarApplicationSplitMenuItem>
                  <telerik:RibbonBarApplicationMenuItem Text="Close" ImageUrl="icons/file/Close.png" />
              </Items>
              <AuxiliaryPane Header="Recent Documents">
                  <ContentTemplate>
                      <ol>
                          <li>Document 1.doc</li>
                          <li>Document 2.doc</li>
                          <li>Document 3.doc</li>
                          <li>Document 4.doc</li>
                          <li>Document 5.doc</li>
                      </ol>
                  </ContentTemplate>
              </AuxiliaryPane>
              <FooterPane>
                  <ContentTemplate>
                      This is a Footer
                  </ContentTemplate>
              </FooterPane>
</
ApplicationMenu>

What do I actually mean by the describing the Gallery and the ApplicationMenu above? Well, in order to get a better idea of how the new additions to the control look like in fact, here you can find few screenshots of the RibbonBar Gallery (on the first place) and the ApplicationMenu below it:
RibbonBarGalleryItems

ApplicationMenu

Application

When it comes to the RadRibbonBarGallery it is considered to be very handy in applications where you need to use more visual effects and need to see the changes immediately. For instance this could be the case when one hovers an item from the RibbonBarGallery just like s/he would do when using different fonts or styles in Microsoft Word or Paint. Considering the Application Menu, on the other hand, as of Q2 2013, one can customize its look with much more ease and at the same time include different controls in the AuxiliaryPanel – a functionality that was previously not available.

Follow the Quick Links

To see the full list of the fixes and new features, check the Q2 2013 BETA release notes. To see how it works, play with the online demos. If you are eager to try it yourself, download RadControls for ASP.NET AJAX now.

Finally, don’t forget to share your feedback with us, either by leaving a comment here, or by contacting us though the Beta forum.


About the Author

Katerina Manova

Katerina’s areas of interests are related to improving the services and customer care, as well as studying and applying different agile approaches in her work.

Comments

Comments are disabled in preview mode.