There are three major types of Kendo Dropdowns, the Kendo DropDown List, ComboBox, and the Multi-Select. All of these Kendo widgets are used to enhance the traditional HTML select input and add rich HTML5 functionality.

However, unlike a traditional HTML dropdown, it offers quite a few features such as having a search input at the top of the menu to allow users to quickly find their intended choice. This can save quite a bit of time and agony for the end-users when the dropdown contains a list of choices as the user can quickly type in a value in the search field and select the intended choice. I have often wished that other major websites have this capability when I am asked to select a value from a long list of choices, such as selecting my country and state for example.

Additionally, these drop-downs support sophisticated data operations, such as virtualization and grouping, and these elegant dropdowns take on the characteristics of your chosen theme and you can apply Kendo Templates to the dropdowns to extend the functionality such as adding images to the dropdown choices.

These controls can be data bound to a traditional select input using the option tags, bound to a local JavaScript array, or bound to a remote data service using a server-side language such as ColdFusion. Refer to our previous Using ColdFusion to Populate Kendo UI Widgets for in-depth examples of each of these options. If you want an example of how to bind the widgets to a local JavaScript array, see Using ColdFusion to Synchronize Time Across Time Zones.

In this article, we are going to discuss the differences between these elements and show some examples of each dropdown type that binds the Kendo DataSource to a server-side end-point using ColdFusion.

Table of Contents

The Kendo DropDownList

In its most basic form, the Kendo DropDown List replicates the normal HTML dropdown in that the user can only choose among predetermined values.

This dropdown can either be created manually by creating your option tags in HTML or it can be bound to data using JavaScript arrays or populated by a remote service.

The Kendo ComboBox 

The Kendo ComboBox is identical to the Kendo DropDownList with just one main difference- the ComboBox also allows the user to enter a custom value in the search bar. If the value does not match one of the values, the ComboBox allows you to launch a new interface to allow the user to enter the new value.

To put it another way- often a ComboBox is termed as an editable dropdown list whereas the DropDownList is a non-editable dropdown list. For more information on the ComboBox across various platforms see https://en.wikipedia.org/wiki/Combo_box.

To illustrate, in the example below, I developed an interface to allow the administrators to specify fonts for unique portions of the page, however, if the user types in a font that does not exist in the search bar at the top of the dropdown widget, the user is also able to upload a new font and have it displayed in the Kendo ComboBox.

Kendo Multi-Select

Unlike the dropdown list and ComboBox widgets, the Kendo Multi-Select is a unique dropdown widget that allows the user to select multiple values from a dropdown list. This sophisticated widget can be used to replace a long list of checkboxes on a form allowing the user interface to be streamlined. 

Like the DropDownList and ComboBox, this widget also has search capabilities allowing the user to quickly select multiple values. I use this widget on the blog to allow the user to select certain categories when performing a site search. The Kendo MultiSelect component greatly simplifies the Galaxie Blog search interface- without this component, I would have to loop through every category and build checkboxes making the interface very long and confusing.

Similarities and Differences Between The Kendo Dropdowns

As we just mentioned, if configured properly with the filter argument, the Kendo DropdownList and ComboBox offer nearly identical functionality. Nearly all of the code is interchangeable between the two widgets. 

In fact, in the ComboBox example below, you can change this widget to a dropdown list by changing the first line of the code below by substituting the string 'kendoComboBox' with 'kendoDropDownList'. However, if you change the widget to a Kendo Dropdown list it will not add a new item to the list when you enter a value using the search function that is not found.

Remember that the DropDownList may also be considered a non-editable dropdown whereas the ComboBox is an editable dropdown. In Kendo UI's implementation, this simply means that if the search term is not found you can add a new item to the list (and optionally to the database) with a new interface.

You may also replicate the functionality of the ComboBox with the DropDownList, but it will require extra code that causes the dropdown to refresh if a new item has been added using the noDataTemplate which we will cover later on. I would not be surprised to see Telerik consolidate the two widgets eventually. 

The purpose of the Kendo MultiSelect widget is a different matter- it is meant to allow the user to select multiple values using a familiar dropdown interface. As we have already covered, this widget can also replace a long list of checkboxes making it easier for the user to select an option and it clears up valuable real estate on the screen.

The code used to initialize all of these widgets is nearly identical. You can usually substitute one for another by changing a couple of lines of code. There are some other minor differences however, placeHolder is used for the ComboBox and MultiSelect, and optionLabel is used for the dropdown list to make an inline hint when nothing is selected for example.

We will cover the widget's basic initialization below.

ComboBox Javascript Initialization

The only difference between this and the code below is the string kendoComboBox on the first and last lines, and placeHolder in the second line. The rest of the code is identical between the two widgets.

var blogNameFontDropdown = $("#blogNameFontDropdown").kendoComboBox({
	placeHolder: "Select...",
	autoBind: false,
	dataTextField: "Font",
	dataValueField: "FontId",
	template: '<label style="font-family:#:data.FontFace#">#:data.Font#</label>',
	// Template to add a new type when no data was found.
	noDataTemplate: $("#addFont").html(),
	filter: "contains",
	dataSource: fontDs,
}).data("kendoDropDownList");

See https://demos.telerik.com/kendo-ui/combobox/index for more information.

DropDownList Javascript Initialization

The only difference between this and the code below is the string kendoDropDownList on the first and last line and optionLabel in the second line.

var blogNameFontDropdown = $("#blogNameFontDropdown").kendoDropDownList({
	optionLabel: "Select...",
	autoBind: false,
	dataTextField: "Font",
	dataValueField: "FontId",
	template: '<label style="font-family:#:data.FontFace#">#:data.Font#</label>',
	// Template to add a new type when no data was found.
	noDataTemplate: $("#addFont").html(),
	filter: "contains",
	dataSource: fontDs,
}).data("kendoDropDownList");

See https://demos.telerik.com/kendo-ui/dropdownlist/index for more information.

Kendo MultiSelect Javascript Initialization

The line to initialize the multi-select is kendoMultiSelect, and like the Kendo ComboBox, this uses the placeholder argument to specify a hint when nothing is selected.

var blogNameFontDropdown = $("#blogNameFontDropdown").kendoMultiSelect({
	placeholder: "Select...",
	autoBind: false,
	dataTextField: "Font",
	dataValueField: "FontId",
	template: '<label style="font-family:#:data.FontFace#">#:data.Font#</label>',
	// Template to add a new type when no data was found.
	noDataTemplate: $("#addFont").html(),
	filter: "contains",
	dataSource: fontDs,
}).data("kendoMultiSelect");

See https://demos.telerik.com/kendo-ui/multiselect/index for more information.

The Kendo DataSource Used for these Widgets

This particular data source acquires the data remotely using a get method from the ProxyController.cfc ColdFusion component and returns the data as a JSON object. It should be noted that all of the widget examples are using the same exact fontDs Kendo data source with no code changes. 

As we have stated in other articles, you can use the Kendo Datasource inline within the various widgets, or create a unique data source that is detached from the widget. I typically detach the Kendo DataSource in order to reuse it as we have done here. The data source can be reused for nearly all of the kendo widgets, even the grid. In the future, I plan on writing new articles on the Kendo Grid and will reuse the very same Kendo Datasource that I have used here.

Here is the fontDs Kendo DataSource Javascript initialization that is used for all of these examples:

var fontDs = new kendo.data.DataSource({
	transport: {
		read: {
			cache: false,
			// Note: since this template is in a different directory, we can't specify the cfc template without the full path name.
			url: function() { // The cfc component which processes the query and returns a json string. 
				return "<cfoutput>#application.baseUrl#</cfoutput>/common/cfc/ProxyController.cfc?method=getFontsForDropdown"; 
			}, 
			dataType: "json",
			contentType: "application/json; charset=utf-8", // Note: when posting json via the request body to a coldfusion page, we must use this content type or we will get a 'IllegalArgumentException' on the ColdFusion processing page.
			type: "GET" //Note: for large payloads coming from the server, use the get method. The post method may fail as it is less efficient.
		}
	} //...transport:
});//...var fontDs...

See https://docs.telerik.com/kendo-ui/api/javascript/data/datasource for more information.

The ColdFusion Remote Endpoint for the DataSource

The Kendo Datasource used for all of these widgets use the same ColdFusion remote endpoint service that is provided by the ProxyController.cfc component. 

If you're trying to follow along with ColdFusion, please see https://www.gregoryalexander.com/blog/2022/7/13/Using-ColdFusion-to-Populate-Kendo-UI-Widgets and download the CFJson ColdFusion component if you don't already have it. This component is necessary to convert ColdFusion objects into JSON used by the Kendo Datasource. 

Most of this code should be self-explanatory, we are simply querying the database using ColdFusion ORM and returning a JSON object without a data handle. We can also use native ColdFusion queries using the 'convertCfQuery2JsonStruct' method in the same cfc.

When using a remote service to populate Kendo controls you must use 'access="remote"' on the ColdFusion method. See https://www.gregoryalexander.com/blog/2022/7/13/Using-ColdFusion-to-Populate-Kendo-UI-Widgets for more information.

<cffunction name="getFontsForDropdown" access="remote" returnformat="json" output="false" 
		hint="Returns a json array to populate the font dropdown.">
	<!--- Note: the csrfToken is not required for this query is also used on the external blog (non-admin). This query is not secured. --->

	<!--- Get the fonts, don't use the cached values. --->
	<cfquery name="Data" dbtype="hql">
		SELECT DISTINCT new Map (
			FontId as FontId, 
			Font.Font as Font
		)
		FROM 
			Font as Font
	</cfquery>

	<!--- Return the data as a json object. --->
	<cfinvoke component="#jsonArray#" method="convertHqlQuery2JsonStruct" returnvariable="jsonString">
		<cfinvokeargument name="hqlQueryObj" value="#Data#">
		<cfinvokeargument name="includeTotal" value="false">
		<cfinvokeargument name="includeDataHandle" value="false">
	</cfinvoke>

	<!--- Return the json string. --->
	<cfreturn jsonString>

</cffunction>

Using Kendo UI Templates in the Dropdowns

Kendo UI Templates can be used to customize the display or to extend the basic dropdown functionality. We are going to briefly go over some of the most basic information in order for you to better understand how we are using templates in this article.

Kendo UI uses its own proprietary syntax that is similar to ColdFusion in that it uses hashes to render JavaScript variables.

Kendo UI Template Syntax

In a nutshell, the following syntax is used to render JavaScript variables:

  • #= javascriptVar # Renders the value as HTML
  • #:  javascriptVar # Uses HTML to encode JavaScript values
  • # if (true) { # ... non-script content here ... # } # Conditional inline statement.

Common Dropdown Template Types

These most commonly used templates are available to the ComboBox, DropDownList, and MultiSelect:

  • FooterTemplate
  • Header Template
  • No DataTemplate
  • and more...

For more information regarding the available templates, look at the widgets API on the Kendo site.

Inline versus External Templates

A Kendo Template can either be inline or an external template. An inline template is typically one line of code or it can be a simple string that is used for display purposes. For example, an inline template can be as simple as this:

  noDataTemplate: '<p>Font does not exist!</p>'

An external template is a JavaScript snippet wrapped with an Id that is used to specify the template in the widget's initialization script along with the type 'tex/x-kendo-template':

<script id="javascriptTemplate" type="text/x-kendo-template">
     <p>Font does not exist</p>
</script>

An external template can also be stored remotely on a different file share or server, but we won't cover this here.

We will show you examples of both templates in the code below, but in a nutshell, you will want to use an inline template for simple display purposes and use an external template for more complex interfaces.

See https://docs.telerik.com/kendo-ui/framework/templates/overview for more information. 

Embedding Font Faces Inside the Dropdown Options Using an Inline Kendo Template

To show off the capabilities of the Kendo Templates, we are going to use the template to dynamically display the font face within all of these Kendo dropdowns. Every new option in the dropdown will display the font face. This can be done with normal HTML dropdowns but it requires a lot of manual HTML and CSS code to fix the font to the new options in the dropdown. 

With a Kendo template, we can specify all of the logic in a single line using a Kendo inline template like so:

template: '<label style="font-family:#:data.FontFace#">#:data.Font#</label>',

This particular template is used in all of the Kendo dropdown examples that we have covered so far to display the proper font inside all of the dropdown values. However, the font display was disabled for iOS clients as more logic is necessary to load the fonts, and we don't have time to add the code at this time.

We will go over the details of this code later in the article.

Using the Kendo NoData Template

The Kendo No Data Template is used when there is no data or when the user types in a value that is not found in the dropdown. It can be used to display feedback to the user, or used to serve as a bridge to a different interface.

I use the No Data Template frequently in Galaxie Blog to allow the users to add a new option to the dropdowns when the search term that they use does not match any of the existing options. For example, when editing or creating a post, the user has a multi-select dropdown to assign the post to certain categories. If the category does not exist, the no data template is used to allow the user to add a new category without having to exit the post interface.  The no-data template acts as a bridge to open up a new category interface saving time for the user. 

In the example below, we will be using an external template instead of the inline template that we used above. The template will be displayed whenever there is no data, or when the search term was not found. This no-data template can be used for all of the dropdown widgets that are covered here and there will be no changes to the code. 

<!--- External template to add a new font. This template can be used for the ComboBox, DropDownList and MultiSelect.  ---> 
<script id="addFont" type="text/x-kendo-tmpl">
	<div>
		Font not found. Do you want to add '#: instance.filterInput.val() #'?
	</div>
	<br />
	<button class="k-button"Add Font</button>
</script>

In this example, the script Id, in this case, 'addFont' will be used to identify the template when we initialize the widget- the type 'text/x-kendo-tmpl' indicates that this is a Kendo template. The string 'instance.filterInput.val()' will display the search term that was used, and we are placing an HTML button to launch a new font interface at the bottom of the template. The rest of the code should be self-explanatory. 

If you want to see the noData template in action, open up the second button below and type in 'foo' in the search control at the top of the widget. You should see an interface that provides feedback that 'foo' was not found and the button will be displayed at the end of the interface. In this example, the button is for display purposes only and is disabled. The other two controls will only show that no data is available.

See https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/configuration/nodatatemplate for more information.

See these Widgets in Action

In the next article, I will cover more advanced functionality of these dropdowns and show you how to use cascading dropdowns for each of these widgets.