Telerik Extensions for ASP.NET MVC

This topic shows how to use Telerik PanelBar for ASP.NET MVC in an ASP.NET MVC application.

Important

All Telerik UI components need a ScriptRegistrar component in order to output their JavaScript objects and register their JavaScript files. The ScriptRegistrar component should be defined *after* all other UI components in the page. If you create the components on the client-side and do not use the MVC extensions, you need to manually register all requried JavaScript files. For further information check this help topic (Step 4 - Register Scripts)

Prerequisites

Before proceeding make sure that:
  • You have all the required components installed.
  • Make sure that your ASP.NET MVC project refers the Telerik.Web.Mvc.dll assembly and you have a ScriptRegistrar and a StyleSheetRegistrar defined in your application (either in the master page or in the view where you are going to use the panelbar).
  • All required JavaScript and CSS files are properly copied to your project. This is outlined in here - steps 4 and 5.

PanelBar definition

The PanelBar is made of PanelBarItem objects which represent the headers of the collapsible content. Here is how to define a simple panelbar with two items:

CopyView
<%= Html.Telerik().PanelBar()
       .Name("PanelBar")
       .Items(items =>
       {
           items.Add().Text("Item 1");
           items.Add().Text("Item 2");
       })
%>

And now the explanation of that code:

  • The Name is used to specify the unique name of the panelbar which is later output as the id HTML attribute and used by Telerik UI. Setting the name is mandatory and exception would be thrown otherwise.
  • The Items method is used to define the items of the panelbar. The passed action sets the properties of the items.
  • The Add method adds new PanelBarItem object to the panelbar.
  • The Text method sets the text displayed by the PanelBarItem object.
  • The Content method is used to specify the content of the PanelBarItem object.
  • The LoadContentFrom(String) method is used to specify the content's url, which will be loaded asynchroniously.
  • Finally the Render method outputs the HTML of the panelbar.
    Important
    It is mandatory that the Render method is called. If not the component will not output any HTML.

See Also