Today we will learn how to create an accordian style ASP Panel Bar using Telerik Controls. Telerik provides tons of additional ASP.NET controls in both C# and Visual Basic format. Many of their controls, like the Panel Bar, are fully functional which can easily nest native and third-party controls for accomplishing any project goal.

Here is an example of what we will be creating along with nested items.

ASP.NET Panel Bar

Create The Project

First, start by downloading a free trial of the Telerik Toolset and install it on your computer. You can download a free trial at Telerik’s web site.

Once you have the Telerik Toolset downloaded and installed. You can now access all the features using Visual Studios. To use the Telerik framework and tools, open Visual Studio. Instead of starting a new Visual Basic project, locate the Telerik option in the left sidebar. Click on Web, then on C# RadControls Web Site. Keep it simple by naming your site LightBox. Click OK.

Now you’ll be directed through the Telerik start wizard. To keep it simple, we will not worry about the default settings and will not need to change them at this time.

The Code

Visual Studios will generate your new Telerik project along with the Default.aspx. Click on the Default.aspx and you will find the coding framework along with the necessary Telerik controls which are noted as <telerik: …..>

At first this may seem very new and overwhelming but by reading the names of the Telerik Controls (ex. ScriptReference, ScriptManager, RadAjaxManager etc.) This particular project is fairly simple and only involves nesting the <telerik:radPanelItem> controls inside one another to get what you need. You can place HTML and ASP Controls within each RadPanelItem, the tricky part is following the DOM tree to find out where to properly nest each item. Copy and Paste your code with the updated one below to get the same results as our example to save time.

By nesting each PanelItem, ASP and RadControls will do all the styling and heavy lifting for you. To really clean up the code and make the application look nice we had to make some adjustments along with adding images to each item. Let’s go over the comments and see what was changed.

  1. We had to adjust the height of the Panel’s so the ASP controls could have room before for the images before they were loaded. We also adjust the vertical alignment of the images to line up with the panel title
  2. If you would like to change the UI skin of the Panel Bar, you can do so by placing Skin=”UISkinName” within the control, You can choose from a variety in the Properties Panel in Visual Studios under the Skin Row. The height & width were adjusted to fit the larger sized Metro Calendar in the second Panel.
  3. The Skin has been changed again but to the calendar to match the styles.

Wrapping It Up

The Telerik controls make it easier to create functional websites quickly while still keeping modern UI/UX in mind. It is a great toolset to have in your palette and can open up creative options in your workflow. With over 70+ controls for ASP.NET, It’s hard to pass using such a great tool. The ASP Panel Bar is an easy introduction to using Telerik and ASP together that allows you to mix and match controls. If you would like the complete documentation on how to use all the included controls, you can find them at their website at http://www.telerik.com/help/aspnet-ajax/introduction.html