Edit this page

ToolBar HtmlHelper Overview

The ToolBar HtmlHelper extension is a server-side wrapper for the Kendo UI ToolBar widget.

Getting Started

Initialization

The following example demonstrates how to initialize the ToolBar.

Example
  @(Html.Kendo().ToolBar()
      .Name("ToolBar")
      .Items(items => {

          //A regular button.
          items.Add().Type(CommandType.Button).Text("Button").Icon("note");

          //A toggle button.
          items.Add().Type(CommandType.Button).Text("Toggle Button").Togglable(true).Selected(true);

          //The Split button.
          items.Add().Type(CommandType.SplitButton).Text("Split Button").MenuButtons(menuButtons =>
          {
              menuButtons.Add().Text("Option 1").Id("option1");
              menuButtons.Add().Text("Option 2").Id("option2");
              menuButtons.Add().Text("Option 3").Id("option3");
          });

          //The ButtonGroup.
          items.Add().Type(CommandType.ButtonGroup).Buttons(buttons =>
          {
              buttons.Add().Text("Left").Togglable(true).Group("text-align").SpriteCssClass("k-tool-icon k-justifyLeft");
              buttons.Add().Text("Center").Togglable(true).Group("text-align").SpriteCssClass("k-tool-icon k-justifyCenter");
              buttons.Add().Text("Right").Togglable(true).Group("text-align").SpriteCssClass("k-tool-icon k-justifyRight");
          });

          //The separator.
          items.Add().Type(CommandType.Separator);

          //A custom template.
          items.Add().Template("<input id='dropdown' style='width: 150px;' />").Overflow(ShowInOverflowPopup.Never);
      })
  )

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI ToolBar.

  1. Make sure you followed all the steps from the introductory article on Telerik UI for ASP.NET MVC.

  2. Create a new action method which renders the view.

    Example
      public ActionResult Index()
      {
          return View();
      }
    
  3. Add a ToolBar.

    Example
    
           <%: Html.Kendo().ToolBar()
               .Resizable(true)   //Enable or disable the resizing feature.
    
               .Items(items => {  //Define the widget commands.
                  items.Add().Type(CommandType.Button).Text("Button");
               })
           %>
    
    
           @(Html.Kendo().ToolBar()
               .Resizable(true)   //Enable or disable the resizing feature.
    
               .Items(items => {  //Define the widget commands.
                  items.Add().Type(CommandType.Button).Text("Button");
               })
           )
    

For more information, refer to the article on supported command types.

Event Handling

You can subscribe to all ToolBar events.

By Handler Name

The following example demonstrates how to subscribe to events by a handler name.

Example

      <%: Html.Kendo().ToolBar()
           .Items(items => {  //Define the widget commands
              items.Add().Type(CommandType.Button).Text("Button");
           })
           .Events(e => e
              .Click("onClick")
              .Toggle("onToggle")
              .Open("onOpen")
              .Close("onClose")
              .OverflowOpen("onOverflowOpen")
              .OverflowClose("onOverflowClose")
           )
      %>
      <script>
          function onClick(e) {
              //Handle the click event.
          }

          //.....
      </script>

      @(Html.Kendo().ToolBar()
           .Items(items => {  //Define the widget commands
              items.Add().Type(CommandType.Button).Text("Button");
           })
           .Events(e => e
              .Click("onClick")
              .Toggle("onToggle")
              .Open("onOpen")
              .Close("onClose")
              .OverflowOpen("onOverflowOpen")
              .OverflowClose("onOverflowClose")
           )
      )
      <script>
          function onClick(e) {
              //Handle the click event.
          }

          //.....
      </script>

Reference

Existing Instances

To reference an existing Kendo UI ToolBar instance, use the jQuery.data() configuration option. Once a reference is established, use the ToolBar API to control its behavior.

Example
  //Put this after your Kendo UI ToolBar for ASP.NET MVC declaration.
  <script>
  $(function() {
      var toolbar = $("#container").data("kendoToolBar");
  });
  </script>

See Also