javascript - kendo ui crud operations using only jquery and Ajax -

i developing web application deals interactive grids. using kendo ui displaying grids , doing crud operations. new kendo ui. performing database calls using jquery, ajax . able make read data database , display it. stuck @ crud operations. how event specific row or specific single data changed , perform update. please me understand how crud operations. couldn't find in detail anywhere . there 8 parameters in first column. user should able change rest of data except parameters .

following code grid. createwbdgriddata triggers database service call , creates table . gridsource json data getting database after converting through json convert function.

$(document).ready(function() { var param ="hole_diameter|4.875_casing_id|5.5_gravel_pack|net_perf_thickness|perf_diameter|perf_gravel_perm_@19k|gravel_beta_factor_@19k|shot_density"; $.when(getwbdgriddatabywell(param)).then(function (data) { }); });  function createwbdgriddata(gridsource) { if (gridsource == undefined) return; console.log(gridsource); $("#grid").kendogrid({     datasource: {         data: gridsource,         schema: {             model: {                 fields: {                     parametername: { type: "string" },                     zone_1: { type: "number" },                     zone_2: { type: "number" },                     zone_3: { type: "number" },                 }             }         },         //  pagesize: 20     },     //height: 550,     //scrollable: true,     //sortable: true,     //filterable: true,     //reorderable: true,     resizable:true,     //pageable: {     // input: true,     //numeric: false     //},     columns: [         { field: "parametername", title: "lucius 01", width: 300 },         { field: "zone_1", title: "zone 1", width: 100 },         { field: "zone_2", title: "zone 2", width: 100 },         { field: "zone_3", title: "zone 3", width: 100 },     ] }); } 

controller

var dspstore = "system.sources.db.mssql.dspstore";  function getwbdgriddata(queryname, param) { var vardata = createparamquery(dspstore, queryname, param); callservice(getwbdgriddatacompleted, vardata); }  var getwbdgriddatacompleted = function (result) { if (vardatatype == "json") {     var myitems = $.parsejson(result.getdataitemsresult);     createwbdgriddata(myitems);  } } 

service call

function callservice(servicecompleted, vardata) { $.support.cors = true; $.ajax({     context: this,     disablecaching: false,     headers: {         "access-control-allow-origin": '*',         'accept': 'application/json',         'content-type': 'application/json'     },     type: vartype, //get or post or put or delete verb     url: varurl, // location of service     data: vardata, //data sent server     //contenttype: varcontenttype, // content type sent server     datatype: vardatatype, //expected data format server     processdata: varprocessdata, //true or false     success: function (msg) {//on successfull service call         servicecompleted(msg);     },     error: servicefailed// when service call fails }); } 

ok , understand there 8 parameters first column , have have has 3 more items user can edit if below .

$("#grid").kendogrid({     datasource: {       transport: {          read: function (options) {              $.ajax({                 url: "/your controller/your read action",                 datatype: "json",                 cache: false,                 success: function (result) {                   options.success(result);                 },                 error: function (result) {                   options.error(result);                  }                });              },         update: function (options) {              $.ajax({                 url: "/your controller/your update action",                 datatype: "json",                 cache: false,                 data:{model:options.data.models},                 success: function (result) {                   options.success(result);                 },                 error: function (result) {                   options.error(result);                  }                });              },           parametermap: function (options, operation) {             if (operation !== "read" && options.models) {               return { models: kendo.stringify(options.models) };               }             }           },         schema: {           model: {             fields: {              parametername: { type: "string",editable: false },              zone_1: { type: "number",editable: true, validation: { required: true } },              zone_2: { type: "number",editable: true, validation: { required: true } },              zone_3: { type: "number" ,editable: true, validation: { required: true }},                 }             }         },          pagesize: 10     },     resizable:true,     columns: [         { field: "parametername", title: "lucius 01", width: 300 },         { field: "zone_1", title: "zone 1", width: 100 },         { field: "zone_2", title: "zone 2", width: 100 },         { field: "zone_3", title: "zone 3", width: 100 },     ] }); }  

use model specify editable , non editable fields , data source data parameter not use unless doing local calls , server calls call function shown above.

and controller action should below : (i assume using mvc)

 [httpget]   public actionresult readgridjson()    {       return json(yourlist, jsonrequestbehavior.allowget);    }   [httpget]       public actionresult updategridjson(yourmodeltype model)        {                 update db , retun updated item          return json(updateitem, jsonrequestbehavior.allowget);        } 

hope helps , more infor check out api doc http://docs.telerik.com/kendo-ui/api/web/grid