Is it possible to have full CRUD functions in a kendo grid with local data

Question

I am currently implementing a kendo grid and I am filling it with local data. I.e; I created a JSON string from my action and provided this string on the browse page.

In the end, I would like to know if it is possible to implement full CRUD functions with local data?

here is a sample code written so far;

<div id="example" class="k-content"> <div id="grid"></div> <script> $(document).ready(function() { var myData = ${coursemodules}, dataSource = new kendo.data.DataSource({ data: myData, batch: true, pageSize: 30, schema: { model: { id: "id", fields: { id: { editable: false, nullable: true}, name: { type: "string", validation: { required: true }}, qualificationLevel: { type: "string", validation: { required: true }}, description: { type: "string", validation: { required: true }}, published: { type: "boolean" }, gateApprove: { type: "boolean" }, duration: { type: "number", validation: { min: 1, required: true } }, academicBody: { type: "string" } } } } }); $("#grid").kendoGrid({ dataSource: dataSource, height: 350, scrollable: true, sortable: true, pageable: true, toolbar: ["create", "save", "cancel"], columns: [ { field: "id", title: "ID", width: '3%' }, { field: "name", title: "Course Title", width: '20%' }, { field: "description", title:"Description", width: '35%' }, { field: "published", title: "Published", width: '7%' }, { field: "gateApprove", title: "Gate Approve", width: '7%' }, { field: "duration", title: "Duration", width: '5%' }, { field: "academicBody.shortName", title: "Academic Body", width: '10%' } ], editable: true }); }); </script> </div> 

I realized that for a data source you have to declare a transport to implement CRUD. However, I need to declare "data". I tried declaring transport and data. This does not work.

Answer 1

Yes you can here JSFiddle Hope this helps you.

 // this should be updated when new entries are added, updated or deleted var data = [{ "ID": 3, "TopMenuId": 2, "Title": "Cashier", "Link": "www.fake123.com"}, { "ID": 4, "TopMenuId": 2, "Title": "Deposit", "Link": "www.fake123.com"} ]; $("#grid").kendoGrid({ dataSource: { transport: { read: function(options) { options.success(data); }, create: function(options) { alert(data.length); }, update: function(options) { alert("Update"); }, destroy: function(options) { alert("Destroy"); alert(data.length); } }, batch: true, pageSize: 4, schema: { model: { id: "ID", fields: { ID: { editable: false, nullable: true }, TopMenuId: { editable: false, nullable: true }, Title: { editable: true, validation: { required: true } }, Link: { editable: true } } }, data: "", total: function(result) { result = result.data || result; return result.length || 0; } } }, editable: true, toolbar: ["create", "save", "cancel"], height: 250, scrollable: true, sortable: true, filterable: false, pageable: true, columns: [ { field: "TopMenuId", title: "Menu Id"}, { field: "Title", title: "Title"}, { field: "Link", title: "Link"}, { command: "destroy"} ] }); 

Answer 2

When binding local data, the Grid widget uses an abstraction representing the local transport. Therefore, it does not require special transportation; changes made to the grid are reflected in the associated data source. This includes rollback through cancellation.

Answer 3

There is a fully functional example of this in the telerik documentation

You need to define a transport dataSource block with custom CRUD functions that update the local source.

 transport: { create: function(options){ var localData = JSON.parse(localStorage["grid_data"]); options.data.ID = localData[localData.length-1].ID + 1; localData.push(options.data); localStorage["grid_data"] = JSON.stringify(localData); options.success(options.data); }, read: function(options){ var localData = JSON.parse(localStorage["grid_data"]); options.success(localData); }, update: function(options){ var localData = JSON.parse(localStorage["grid_data"]); for(var i=0; i<localData.length; i++){ if(localData[i].ID == options.data.ID){ localData[i].Value = options.data.Value; } } localStorage["grid_data"] = JSON.stringify(localData); options.success(options.data); }, destroy: function(options){ var localData = JSON.parse(localStorage["grid_data"]); for(var i=0; i<localData.length; i++){ if(localData[i].ID === options.data.ID){ localData.splice(i,1); break; } } localStorage["grid_data"] = JSON.stringify(localData); options.success(localData); }, }