Kendo UI Extended API: DropDownGrid

This website is no longer actively supported

Written by John DeVight on 20 Mar 2013 17:14

Download found at kendoui-extended-api on GitHub in the examples folder.

Overview

The Kendo DropDownList has been a great control to use. I really like that I can define a template for each item in the list and often need to do this when I need to show additional information about each item that doesn't need to be displayed as the selected value in the DropDownList. An example would be a list of people with Name, Address and Phone Number. When a person is selected, I only want to have the Name displayed as the selected value.

However, there have been times when I need a dropdown list control that has a lot of items in the list and I want to be able to page or filter the list. I have created a DropDownList that displays a Grid. By combining the two together, I am able to get the functionality I need with a grid while conserving space on the page with a DropDownList.

Here are some screenshots of selecting an item in the DropDownGrid:

Initial State
DropDown Opened
Item Selected From the Grid

Adding Kendo UI Web Extended API to Your Application

Adding the StyleSheet

In the kendoui-extended-api GitHub repository, there is a styles folder. Download the folder and add it to your application. In the HTML file, define the reference to the kendo.ext.css. For example:

<link href="//cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" />
<link href="//cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" />
<link href="./styles/kendoext/kendo.ext.css" rel="stylesheet" />

Adding the JavaScript

In the kendoui-extended-api GitHub repository, there is a js folder. Download the folder and add the kendo.web.ext.js file to your application. In the HTML file, define the reference to the kendo.web.ext.js after the references to the jQuery and Kendo UI JavaScript files. For example:

<script src="//code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="//cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="./scripts/kendo.web.ext.js"></script>

Define the DropDownGrid HTML

Coming Soon

Here is the HTML:

<div id="dropDownGrid">
</div>

Define the DropDownGrid JavaScript

To create an instance of the Kendo.ui.ExtDropDownGrid, select the "container" div element using jQuery and call the kendoExtDropDownGrid function like this:

$("#dropDownGrid").kendoExtDropDownGrid({
    /* list of options defined here */
});

The DropDownGrid has the following configuration options:

• dataTextField (String): The field in the grid dataSource that will be displayed in the dropdown when a grid row is selected.
• dropDownWidth (String): The width for the Kendo DropDownList widget. This is optional. If it is not provided, the Kendo DropDownList will use the default widget.
• gridWidth (String): The width for the Kendo Grid widget. This is optional. If it is not provided, the Kendo Grid will default to 100%.
• grid (Kendo.ui.Grid Configuration Options): The configuration options for the Kendo Grid.

Here is an example:

$("#dropDownGrid").kendoExtDropDownGrid({
    dataTextField: "FirstName",
    dropDownWidth: "200px",
    gridWidth: "700px",
    grid: {
        dataSource: {
            data: createRandomData(500),
            pageSize: 10,
            schema: {
                model: {
                    fields: {
                        FirstName: { type: "string" },
                        LastName: { type: "string" },
                        City: { type: "string" },
                        Title: { type: "string" },
                        BirthDate: { type: "date" },
                        Age: { type: "number" }
                    }
                }
            }
        },
        columns: [
            {
                field: "FirstName",
                title: "First Name",
                width: 100
            },
            {
                field: "LastName",
                title: "Last Name",
                width: 100
            },
            {
                field: "City",
                width: 100
            },
            {
                field: "Title"
            },
            {
                field: "BirthDate",
                title: "Birth Date",
                template: '#= kendo.toString(BirthDate,"MM/dd/yyyy") #',
                width: 100
            },
            {
                field: "Age",
                width: 50
            }
        ],
        pageable: true,
        selectable: true,
        filterable: true
    }
});

Getting the selected item

The DropDownGrid has 2 methods. They are:

• dropDownList: returns the Kendo DropDownList widget.
• grid: returns the Kendo Grid widget.

To get the item selected in the DropDownGrid, get a reference to the Kendo Grid and bind to the grid's select event. In the select event handler, get the selected item.

Here is an example:

$("#dropDownGrid").data("kendoExtDropDownGrid").grid().bind("change", function () {
    var selectedRows = this.select();
    var dataItem = this.dataItem(selectedRows[0]);
    console.log(kendo.format("You Selected: {0} {1}, {2}", dataItem.FirstName, dataItem.LastName, dataItem.Title));
});

References

• kendoui-extended-api on GitHub
• Kendo.ui.DropDownList Documentation
• Kendo.ui.Grid Documentation

Related Articles

• Kendo UI Extended API: DropDownTreeView Widget
• Kendo UI Extended API: MessageBox Dialogs
• Kendo UI Extended API: BorderLayout Widget

---