Today we will learn how to create an accordian style Visual Basic Panel Bar using Telerik Controls. Telerik provides tons of additional ASP.NET controls in 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 in Visual Basic.

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 VB RadControls Web Site. Keep it simple by naming your site LightBox. Click OK.

Visual Basic Panel Bar Seup

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 and other necessary VB files. Click on the Default.aspx and you will find the coding framework along with the necessary Telerik controls which are noted as <telerik: …..>

You will notice a new naming for some of the controls (ex. ScriptReference, ScriptManager, RadAjaxManager etc.) These are starting files for creating functionality for your telerik controls. This can be the foundation for you to test out many of their 70+ controls included.

This particular project though is fairly simple and only involves nesting the <telerik:radPanelItem> controls inside one another to get what you need. A majority of this code you will not need so Copy and Paste the code below over the old code to get the same results as our example to save time.

As you can see, this project consists of mainly nesting the <telerik:RadPanelItem> like a standard nested List Item. You can get creative and place HTML and VB Controls within each RadPanelItem just like the Calendar example, the thing to keep in mind is to follow the DOM tree to find out where to properly nest each item (Simple enough right?).

We did have to make some styling adjustments to accommodate the image icons and the calendar we placed inside one of the panels. The icon stylings are controlled within the inline <style> tags. Our calendar is a little bigger than the default settings, so we must place the Height & Width attributes within the <telerik:RadPanelBar> controls to ensure that the panel is big enough to house the calendar.

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. The Visual Basic Panel Bar serves as an easy introduction to using Telerik and Visual Basic 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