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