Edit this page

DropDownList JSP Tag Overview

The DropDownList JSP tag is a server-side wrapper for the Kendo UI DropDownList widget.

Getting Started

The Basics

There are two ways to bind a Kendo UI DropDownList:

  • server—The data is serialized to the client. No Ajax requests are going to be made.
  • ajax—The DropDownList is going to make Ajax requests to get the data. For more information on this type of binding, refer to the DropDownList API reference article on Ajax binding.

Configuration

Below are listed the steps for you to follow when configuring the Kendo UI DropDownList for binding to data, passed as a model attribute in Spring MVC.

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 and pass the Products table to the View.

Example
    @RequestMapping(value = {"index"}, method = RequestMethod.GET)
    public String index(Model model) {
        model.addAttribute("products", product.getList());

        return "web/dropdownlist/index";
    }

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

Example
    <%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>

Step 4 Add a server-bound DropDownList.

Example
    <kendo:dropdownlist name="productDropDownList" taTextField="productName" dataValueField="productId">
        <kendo:dataSource data="${products}"></kendo:dataSource>
    </kendo:dropdownlist>

Event Handling

Subscribe to Events

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

Example
    <kendo:dropDownList name="productDropDownList" dataTextField="productName" dataValueField="productId" change="dropdownlist_change">
        <kendo:dataSource data="${products}">
        </kendo:dataSource>
    </kendo:dropDownList>

    <script>
        function dropdownlist_change() {
            //Handle the change event
        }
    </script>

Reference

Existing Instances

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

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

See Also

Other articles on Telerik UI for JSP and on the DropDownList:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy