Tuesday, November 5, 2013

Kendo-UI Data-Source CRUD (Create,Retrieve,Update and Delete) Operations

You may also like to see:
  1. JavaScript : Prototype Property and Inheritance  
  2. JavaScript : Closures Concept with examples

Here I am going to create a little application for maintaining to-dos. This demo application allows the user to:
  1. Add new To-do 
  2. Done the To-do by clicking CheckBox 
  3. Remove all Done To-dos 
  4. Filter the To-dos for complete, Incomplete or All 
Create a template to render the datasource, It will contain three columns
  1. CheckBox to show To-do status 
  2.  To-do Id column 
  3. To-do description

Here is the code:
Add HTML for taking user input to insert into datasource:
Add A Todo Enter a to do item description
Add a button so we can delete item from datasource (It will be used within a table given below):

Create a table in which we going to render the templates datasource also contain a button to filter data(show complete,Incomplete or All To-dos), Delete button in it rows:
Done ID Task
Get the Datasource template we define in first part:
// To Do Item Template
  // -------------------

  var template = kendo.template($("#template").html());
Add predefined data into datasource so it renders initially:
var tasks = [
    { id: 1, done: false, description: "do stuff"},
    { id: 2, done: false, description: "more stuff"},
    { id: 3, done: true, description: "this stuff to do"},
    { id: 4, done: false, description: "that stuff we need"}
Now create a datasource:
// Build the data source for the items
  var dataSource = new kendo.data.DataSource({ data: tasks });
Bind the change event to datasource so whenever a new item added to datasource its HTML automatically get refreshed:
// When the data source changes, render the items
  dataSource.bind("change", function(e) { 
    var html = kendo.render(template, this.view());
    $("#todos tbody").html(html);
Load the items from task array to datasource using:
// Initial read of the items in to the data source
Bind the add button so new item gets added to datasource and HTML get refreshed:
// Handle adding a new to do item

    var $todo = $("input[name='description']");

    currentId += 1;
      id: currentId,
      done: false,
      description: $todo.val()

Handle the remove button event:
// Handle removing cleared items

    var raw = dataSource.data();
    var length = raw.length;

    // iterate and remove "done" items
    var item, i;
    for(i=length-1; i>=0; i--){

      item = raw[i];
      if (item.done){

Removing multiple items from datasource on checking the checkboxes and clicking Remove Done Items
// Handling clicking the "done" checkboxes
  $("#todos").on("change", ".done", function(e){
    var $target = $(e.currentTarget);
    var id = $target.data("id");
    var item = dataSource.get(id);
    item.set("done", $target.prop("checked"));
We can also filter by hiding and showing some values, as we added three option in above table for filtration, so now on the basis of user selection of filter we will pass a value for done column of datasource it will filter the data source accordingly:
// Handle the filters for showing the desired items
    //get the dropdown selected value
    var filterValue = $(e.currentTarget).val();
    //set the filter for done column with operator equals to
    var filter = {
      field: "done",
      operator: "eq"

    //set the filter value as per user selected dropdown value
    if (filterValue === "done"){
      filter.value = true;
    } else if (filterValue === "not done"){
      filter.value = false;
    } else {
      filter = {};

    //now filter the datasource by passing this filter
Here is the working JsFiddle demo for reference or you can see Stackoverflow

You may also like to see:
  1. JavaScript : Prototype Property and Inheritance  
  2. JavaScript : Closures Concept with examples

No comments:

Post a Comment

Life insurance policy, bank loans, software, microsoft, facebook,mortgage,policy,