Kendo UI ComboBox with Remote DataSource

Use KendoUI Combobox to Increase Performance

The Benefits of Kendo UI Combo Box

Kendo UI is an awesome client-side control package that we use frequently for a couple reasons:

They Work Great with Remote Data Sources

With the huge data sets our web applications typically have to handle, it's important to be able to leverage modern client-server communication protocols like Web services and WebApi. Kendo UI's control set is built with this in mind which allows us to rapidly connect end user controls to our workflows, business logic, and pertinent user data. They have an entire framework of data objects which are built specifically to seamlessly interact with their UI Widgets.

They Look Badass Out of the Gate

There isn't one control in their web package that is clunky, old-fashioned, or leaves you wishing for more aesthetically. They're Grid, ListView, Calendar, & TreeView just to name a few are gorgeous out of the box and even give you some nice theme options, but don't believe us; check out their interactive demo page. demos.telerik.com/kendo-ui

They're Smokin' Fast

For a robust client-side user data control set, Kendo is light-weight, straight-forward to implement basic cases, and easy to modify to fit into legacy designs.

One of the only drawbacks is when you start getting into more complex scenarios, Kendo's trivial demos & documentation might not particularly give sophisticated enough examples as you may need for your specific implementation. A perfect example of this is their ComboBox interacting with their DataSource framework object. More specifically, making sure that you're not overwriting the ComboBox's placeholder attribute with your DataSource object when binding data.

Problem:
Kendo UI's ComboBox attribute placeholder is bound to ComboBox before the DataSource fetched via AJAX returns data which inevitably overwrites the initial placeholder option. Unless you step through the order of operations and call timing this issue could leave you scratching your head. Here's the process broken down:

DataSource is created and request to AJAX service is made
ComboBox is created - If placeholder is set, add a new option to the underlying select DOM element with this placeholder text
DataSource AJAX service returns data and the DataSource notifies the ComboBox which subsequently replaces the underlying select DOM element’s items with the received data from DataSource overwriting the placeholder option item.

Fix:
We can't use the native processing of the ComboBox to set the placeholder item, instead we go ahead and append it to the front of the DataSource data (once returned from the AJAX service) utilizing the javascript unshift function. Below is an example that is part of our jQuery UI extension widget for creating ComboBoxes for entities like States, Countries, or Payment Types.

var dataSource = new kendo.data.DataSource({
                dataType: 'json',
                serverFiltering: true,
                transport: {
                    read: function (options) {
                        $.ajax({
                            type: "POST",
                            dataType: 'json',
                            data: JSON.stringify({
                                entityType: entityType,
                                relatedID:null
                            }),
                            url: Clarity.ecommerce.services.System.GetEntityList,
                            contentType: "application/json; charset=utf-8",
                            success: function (result) {
                                result.d.unshift({ Key: "0", Value: placeholderText });
                                options.success(result.d);
                            }
                        });
                    }
                }
            });
            
            $(this.element).kendoComboBox({
                dataTextField: "Value",
                dataValueField: "Key",
                dataSource: dataSource,
                //this is done in the dataSource already: placeholder:placeholderText,
                index: 0
            });

The important part here is instead of specifying the placeholder in the .kendoComboBox definition we're modifying the transport.read AJAX call's success definition to take our placeholderText and append a dummy option to the dataSource prior to returning it up the new ComboBox.

Telerik-Kendo Certified Partner

Clarity can help!

At Clarity we are experts in dealing with KendoUI and much more. So whether you're in the middle of implementing Kendo or it's something you'd like to implement, Clarity's team of implementation experts can help. Call us today!

We certainly enjoy testing the limits of any technologies we work with and were happy with could solve this issue and share it with others. Have any other issues you've been having trouble solving with Kendo UI Widgets, AJAX, or client-side controls in general? We'd love to help! Reach out below in the comments or follow-up with us on Twitter @ClarityTeam.