JayData + Kendo UI = Awesomeness

Author: Gábor Dolla February 13th, 2013

kendoui Kendo UI is a great framework for web and mobile application development. It’s built upon jQuery, it has many nice widgets, clean structures, a great cloud based development environment (Icenium), great user support. It costs some money so it better fits to business application development.

Business apps are all about data manipulations. Kendo UI as a web framework has many widgets to display or alter data and supports xml, json and oData for data transport. Its data transport is pretty generic and requires some manual configuration especially if you need more than just basic CRUD.

What makes Kendo UI great is its concept for DataSource, which is an abstraction for data transport and all Kendo UI widget uses DataSource to load or save data, for sorting, paging, filtering. Not only Kendo UI Web uses it but Kendo UI Mobile and Kendo UI DataViz use it, too! We created a bridge between JayData and Kendo UI DataSource, with this solution Kendo UI can use local databases, WebApi and has better oData support than the built in version.

We created a few examples on how to Kendo UI Web, Mobile and DataViz with JayData, the examples can be found here

Visit examples

JayData + Kendo UI

The simplest way to use Kendo UI and JayData together is using a ListView:

<script type="text/javascript" src="http://include.jaydata.org/jaydata.js"></script>
<script type="text/javascript" src="http://include.jaydata.org/jaydatamodules/kendo.js"></script>
<div id="pager" class="k-pager-wrap"></div>
<div id="listView"></div>
 
<script type="text/x-kendo-tmpl" id="template">
    <div class="product" style="width:230px;float:left">
        <img style="width:220px;height:150px" src="${ImageUrl}" />
        <h3>${Name}</h3>
        <b>${kendo.toString(Price, "c")}</b>
    </div>
</script>
<script>
…
var ds = mydatabase.Flowers.asKendoDataSource();
$("#listView").kendoListView({
    dataSource: ds,
    template: kendo.template($("#template").html())
});
$("#pager").kendoPager({
    dataSource: ds
}).data("kendoPager");
</script>

<b>${kendo.toString(Price, "c")}</b>

</div>

</script>

…

var ds = mydatabase.Flowers.asKendoDataSource();

$("#listView").kendoListView({

dataSource: ds,

template: kendo.template($("#template").html())

});

$("#pager").kendoPager({

dataSource: ds

}).data("kendoPager");

</script>

By using the above code, records from an EntitySet (table) can be shown using a custom template, paging is done on the server or local database side (this is the default).

(disclaimer: in this example we used images from the internet, the images are not ours).

DataSource is great so let’s turn the very same data into a DataViz diagram:

<div id="chart"></div>
<script>
…
$("#chart").kendoChart({
  dataSource: mydatabase.Flowers
                 .orderByDescending('it.Price')
                 .take(10)
                 .asKendoDataSource(),
  title: {
    text: "Flower prices"
  },
  series: [{
     type: "column",
     field: "Price",
     name: "Price"
  }],
  categoryAxis: {
    field: "Name",
    labels: {
      rotation: -90
    }
  }
});
</script>

…

$("#chart").kendoChart({

dataSource: mydatabase.Flowers

.orderByDescending('it.Price')

.take(10)

.asKendoDataSource(),

title: {

text: "Flower prices"

series: [{

type: "column",

field: "Price",

name: "Price"

}],

categoryAxis: {

field: "Name",

labels: {

rotation: -90

}

});

</script>

The above code produces this barchart:

Why not use the very same data in a mobile app ?

<div data-role="view" id="flowers" data-layout="default"
  data-model="viewModel" data-title="Flowers">
  <ul id="listView"
    data-role="listview"
    data-style="inset"
    data-template="flowerlist-template"
    data-bind="source: flowersDataSource, events:{click:selectFlower}">
  </ul>
</div>
<div data-role="view" id="flower" data-layout="default"
  data-model="viewModel" data-title="Flower">
  <header data-role="header">
    <div data-role="navbar">
      <a data-align="left" data-role="backbutton">Back</a>
    </div>
  </header>
  <ul data-role="listview" data-style="inset">
    <li>Name <span style="float: right;" data-bind="text: flower.Name" /></li>
    <li>Price <span style="float: right;" data-bind="text: flower.Price" /></li>
  </ul>
</div>    
<script id="flowerlist-template" type="text/x-kendo-template">
  <a href="##flower" data-bind="text:Name"></a>
</script>
<script>
…
  viewModel = kendo.observable({
    flowersDataSource: mydatabase.Flowers.asKendoDataSource(),
    flower: null,
    selectFlower: function (e) {
      viewModel.set('flower', null);
      viewModel.set('flower', e.dataItem);
    }
  });
  app = new kendo.mobile.Application();
</script>

<div data-role="view" id="flowers" data-layout="default"

data-model="viewModel" data-title="Flowers">

<ul id="listView"

data-role="listview"

data-style="inset"

data-template="flowerlist-template"

data-bind="source: flowersDataSource, events:{click:selectFlower}">

</ul>

</div>

<div data-role="view" id="flower" data-layout="default"

data-model="viewModel" data-title="Flower">

</div>

</header>

<li>Price <span style="float: right;" data-bind="text: flower.Price" /></li>

</ul>

</div>

</script>

…

viewModel = kendo.observable({

flowersDataSource: mydatabase.Flowers.asKendoDataSource(),

flower: null,

selectFlower: function (e) {

viewModel.set('flower', null);

viewModel.set('flower', e.dataItem);

}

});

app = new kendo.mobile.Application();

</script>

We used Icenium from Telerik for building a PhoneGap application, it looks like this in the emulator:

The sample codes above use a context named mydatabase. This can be of any type that JayData supports (oData, WebApi, Rest, WebSql, IndexedDB, HTML5 localStorage, Facebook, YQL) and Kendo UI does not know about it. The exact same code will work with data from a remote oData server or from a local websql/indexeddb database!

So Kendo UI DataSource is a great concept, JayData and DataSource together is awesome.

Learn more

JayData examples, Kendo UI

JayData.org