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
First steps with JayData and Kendo UI
Step 1 – Initialize resources
Initialize your resource like stylesheets, scripts and so on.
|
1 2 3 4 5 6 7 |
<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" /> |
Step 2 – Access or create database
-
For local databases define your model.
1234var Task = $data.define("Task", {Todo: String,Completed: Boolean}); -
Access your data on a remote server using oData, no need to define your model.
1234$data.service('url', function(dbFactory) {var mydatabase = dbFactory();//Your code comes here});
Step 3 – Use it with Kendo UI or with OData.
-
Once you have your database use it with Kendo UI.
12var datasource = Task.asKendoDataSource();$('#grid').kendoGrid({ dataSource: datasource }); -
Once you have your database use it with OData.
12var datasource = mydatabase.Task.asKendoDataSource();$('#grid').kendoGrid({ dataSource: datasource });
