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
       
    

          
       
    

         
Show:
         
   All Complete Incomplete 
       
         
Actions:
         
  
       
 

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
  dataSource.read();

Bind the add button so new item gets added to datasource and HTML get refreshed:

// Handle adding a new to do item
  $("#add").click(function(e){
    e.preventDefault();

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

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

    $todo.val("");
    $todo.focus();
  });

Handle the remove button event:

// Handle removing cleared items
  $("#remove-done").click(function(e){
    e.preventDefault();

    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){
        dataSource.remove(item);
      }

    }
  });

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
  $("#filter").change(function(e){
    //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
    dataSource.filter(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