Connecting the Kendo UI DataSource to Remote Data

Over the past number of months, I’ve fielded an enormous number of questions about Kendo UI. In this post, I’d like to answer a question I’ve received about the DataSource component. This question speaks more to the architectural concerns of your application as opposed to the technical aspects of Kendo UI. Nevertheless, it’s a question that warrants some examination.

I am considering moving to Kendo UI but I am discouraged by the examples that I see for connecting to the DataSource component. How can I use existing data from a database in a Kendo UI application?

The answer to this question is somewhat nuanced due to the implications it can have on your application’s architecture. Consider for a moment the operating requirements of Kendo UI itself. Kendo UI is a framework that operates entirely within the confines of the browser since it’s built in HTML5, JavaScript, and CSS. Knowing this, one can see the implications of connecting to the data in your underlying database.

The DataSource component is an abstraction in JavaScript that manages in-memory and remote data sources. Its purpose is to simplify the process of propagating updates to and from these data sources. In the case of data that’s stored in a remote database (SQL Server, Oracle, MySQL, CouchDB, etc.), there’s an assumption on our part that the data is accessible to query via HTTP. This is necessary since we are talking about JavaScript running in the context of the browser. So, at a basic level, this is what is required for us to integrate your data with our framework. In terms of the actual data coming across the wire, this can be represented in a number of different ways. Out-of-the-box, we support XML, OData, and JSON.

Coming back to the question posed earlier, if you want to “use existing data from a database in a Kendo UI application” then you need to expose it via HTTP. There are a lot of different ways to do this; your options really do vary wildly, database to database. That stated, I’m a fan of implementing a service layer that can be exposed and consumed by frameworks like Kendo UI. For example, if you’re a .NET developer then you can take advantage of ASP.NET Web API. Many other solutions exist for Java, PHP, and others. The point is that you can have a great deal of control over how your data is provided to consuming clients. Of course, how you chose to implement these endpoints is another topic entirely. For now, know that for Kendo UI, we need some mechanism of accessing your data. Because we’re on the web, that means HTTP.