JayData + Kendo UI = Awesomeness

JayData lets you to connect the rich feature-set of Kendo UI data controls and frameworks with a number of popular data store options around you. With zero or minimal plumbing you can plug in CRUD capable connectivity to local data APIs like IndexedDB or WebSQL and online endpoints that support OData or the ASP.NET WebAPI and have Kendo UI do the rest. Learn more

figure_kendoui-and-jaydata

First steps with JayData and Kendo UI

Step 1 – Initialize resources

Initialize your resource like stylesheets, scripts and so on.

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/jaydatamodules/kendo.js"></script>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

For local databases define your model.

var Task = $data.define("Task", { Todo: String, Completed: Boolean });

1
2
3
4

var Task = $data.define("Task", {
Todo: String,
Completed: Boolean
});
Access your data on a remote server using oData, no need to define your model.

$data.service('url', function(dbFactory) { var mydatabase = dbFactory(); //Your code comes here });

1
2
3
4

$data.service('url', function(dbFactory) {
var mydatabase = dbFactory();
//Your code comes here
});

Step 3 – Use it with Kendo UI or with OData.

Kendo UI
OData

Once you have your database use it with Kendo UI.

var datasource = Task.asKendoDataSource(); $('#grid').kendoGrid({ dataSource: datasource });

1
2

var datasource = Task.asKendoDataSource();
$('#grid').kendoGrid({ dataSource: datasource });
Once you have your database use it with OData.

var datasource = mydatabase.Task.asKendoDataSource(); $('#grid').kendoGrid({ dataSource: datasource });

1
2

var datasource = mydatabase.Task.asKendoDataSource();
$('#grid').kendoGrid({ dataSource: datasource });