This example shows the client-side events supported by Telerik PanelBar for ASP.NET MVC.

The panelbar has four events:

• The OnLoad event is raised when the component is initialized. You can subscribe to that event by using one of the two overloads of the OnLoad method. The one accepts Action as an argument - the other accepts a String. Use the Action overload to define the event handler inline. Use the String overload to specify the name of the JavaScript function which handles the event. The following code shows both options:

  <%= Html.Telerik().PanelBar()
          .Name("PanelBar")
          .ClientEvents(events => events
              .OnLoad("onLoad")
          )
  

  or

  <% Html.Telerik().PanelBar()
         .Name("PanelBar")
         .ClientEvents(events => events
         .OnLoad(() => 
         {
          %>
           function(e) {
               //perform required actions here.
           }
          <%
         })
         .Render();
  

• The OnExpand event is raised when a panel item is expanded. You can subscribe to that event by using one of the two overloads of the OnExpand method:

  <%= Html.Telerik().PanelBar()
          .Name("PanelBar")
          .ClientEvents(events => events
              .OnExpand("onExpand")
          )
  

  or

  <% Html.Telerik().PanelBar()
         .Name("PanelBar")
         .ClientEvents(events => events
         .OnExpand(() => 
         {
             %>
              function(e) {
                  //perform required actions here.
              }
             <%
         })
         .Render();
  

• The OnCollapse event is raised when a panel item is collapsed. You can subscribe to that event by using one of the two overloads of the OnCollapse method:

  <%= Html.Telerik().PanelBar()
          .Name("PanelBar")
          .ClientEvents(events => events
              .OnCollapse("onCollapse")
          )
  

  or

  <% Html.Telerik().PanelBar()
         .Name("PanelBar")
         .ClientEvents(events => events
         .OnCollapse(() => 
         {
             %>
              function(e) {
                  //perform required actions here.
              }
             <%
         })
         .Render();
  

• The OnSelect event is raised when a panel item is selected. You can subscribe to that event by using one of the two overloads of the OnSelect method:

  <%= Html.Telerik().PanelBar()
          .Name("PanelBar")
          .ClientEvents(events => events
              .OnSelect("onSelect")
          )
  

  or

  <% Html.Telerik().PanelBar()
         .Name("PanelBar")
         .ClientEvents(events => events
         .OnSelect(() => 
         {
             %>
              function(e) {
                  //perform required actions here.
              }
             <%
         })
         .Render();