ExpansionPanel JSP Tag Overview

The ExpansionPanel JSP tag is a server-side wrapper for the Kendo UI ExpansionPanel widget. The ExpansionPanel JSP tag layout control that provides the user with an easy way to expand and collapse a content area within the application.

Getting Started

Configuration

Here are the required steps to use the Kendo UI ExpansionPanel.

Step 1 Make sure you followed all the steps from the introductory article on Telerik UI for JSP.

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

    @RequestMapping(value = "index", method = RequestMethod.GET)
    public String index() {

        return "web/expansionpanel/index";
    }

Step 3 Add the Kendo UI taglib mapping to the page.

    <%@taglib prefix="kendo" uri="https://www.telerik.com/kendo-ui/jsp/tags"%>

Step 4 Add the expansionPanel tag.

    <kendo:expansionPanel name="brazil" title="Brazil"
        subtilte="South America">
        <kendo:expansionPanel-content>
            The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.
        </kendo:expansionPanel-content>
    </kendo:expansionPanel>

Event Handling

You can subscribe to all events exposed by Kendo UI ExpansionPanel by the handler name.

    <kendo:expansionPanel name="brazil" title="Brazil"
        subtilte="South America" expand="onExpand" collapse="onCollapse"
        complete="onComplete">
        <kendo:expansionPanel-content>
            The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.
        </kendo:expansionPanel-content>
    </kendo:expansionPanel>

<script>
    function onExpand() {
        kendoConsole.log("Expand");
    };
    function onCollapse() {
        kendoConsole.log("Collapse");
    };
    function onComplete() {
        kendoConsole.log("Complete");
    };
</script>

Reference Existing Instances

You can reference an existing ExpansionPanel instance via jQuery.data(). Once a reference is established, you can use the ExpansionPanel API to control its behavior.

  //Put this after your Kendo ExpansionPanel tag declaration
  <script>
  $(function() {
      // Notice that the Name() of the ExpansionPanel is used to get its client-side instance
      var expansionpanel = $("#brazil").data("kendoExpansionPanel");
  });
  </script>

See Also

In this article