Is it possible to have implement CRUD functions with local data using the grid.

I'm current implementing a grid and supplying it with local data (JSON String). However, I would like to implement CRUD functions for that grid. Can anyone guide me as how I can accomplish this?

This is what has been done so far to get the grid up and running:

 <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>                   

Would it be possible to use the the transport with the local data?

I want to believe that transports works only with remote data, Is that right?

Example of CRUD with remote data below:

dataSource = new kendo.data.DataSource({                           
                        transport: {                               
                            read:  {                                  
                                url: crudServiceBaseUrl + "/Products",                                   
                                dataType: "jsonp"                               
                            },                               
                            update: {                                   
                                url: crudServiceBaseUrl + "/Products/Update",                                   
                                dataType: "jsonp"                               
                            },                               
                            destroy: {                                   
                                url: crudServiceBaseUrl + "/Products/Destroy",                                   
                                dataType: "jsonp"                               
                            },                               
                            create: {                                   
                                url: crudServiceBaseUrl + "/Products/Create",                                   
                                dataType: "jsonp"                               
                            }, 
                            parameterMap: function(options, operation) {                                   
                                if (operation !== "read" && options.models) {                                       
                                    return {models: kendo.stringify(options.models)};                                   
                                }                               
                            } 
                        },        

Would like to have this also with local data. Is it possible?

Hello Hemchand,

The transport is used always, either with local or remote data. Generally speaking, the transport object's purpose is to retrieve and persist the data to and from a medium (either remote or local). Thus you may implement your own transport just by simply supplying functions for create/read/update/destroy. Similar to the way shown in the following sample which serialize modifications in an input element:



However, when using local data there should be no need to implement custom transport (in case there is not actually persist the changes) as components bound to the DataSource can reflect the changes, or data can be retrieved by using dataSource's data or view methods.

All the best,
Rosen
the Telerik team

This appears to be broken in the latest release. I am no longer able to update locally bound data using the approach discussed in this thread. Is editing only supported via remote data?

Im having the same issue, cannot get to work with local array.

Hello,

Here is the same example but updated to the latest Q1 2012 release of KendoUI. It seems to work as expected on my end.

Regards,
Rosen
the Telerik team

And the culprit ended up having nothing to do with our JS or the Kendo version rather a double include of the kendo.all.min.js.
Once the 2nd script reference was removed everything works. Lesson learned: Do not include the kendo scripts more than 1X (so only do it in the master page in our case).

$scope.goods = [
               { oid: 1, name: "", count: 0, description: "" },
               { oid: 2, name: "", count: 0, description: "" },
               { oid: 3, name: "", count: 0, description: "" },
               { oid: 4, name: "", count: 0, description: "" },
               ];
$scope.goodsGridOptions = {
            dataSource: new kendo.data.DataSource({
            transport: { 
                    read: function(options) { 
                        options.success($scope.goods);
                    },
                    create: function(options) {
                    console.log(options.data);
                    options.success(options.data);
                    },
                    update: function(options) {
                    console.log(options.data);
                    options.success();
                    },
                    destroy: function(options) {
                    console.log(options.data);
                    options.success();
                    }
                },
                schema: {
            model: {
            id: "oid",
                   fields: {
                    oid: {
                    editable: false,
                    },
                    name: {},
                    count: { type: "number",},
                    description: {},
                   },
                   total: function(result) {
                       result = result.data || result;
                       return result.length || 0;
                   }
               }
                },
            }),
            sortable: true,
            pageable: {
            pageSize: 5,
        },
        editable: {
                mode: "inline",
            },
        toolbar: [{
              name: "create",
                text: "新增物品",
            }],
            columns: [{ field: "oid", title: "序号", hidden: true, width: "20px" },
                      { field: "name", title: "品种", width: "100px" },
                      { field: "count", title: "数量", width: "40px" },
                      { field: "description", title: "备注", width: "40px" },
                      { title: "操作", width: "100px", command: [ { name: "edit" },{ name: "destroy" }] },
                      ]
        };

when add new object, the create function will be invoke, but the local data's length will no change.

and if i click add button next time, the create function will be invoke twice in one click. click again, the create function will be invoke many in one click.

how can i write the code?

Hello chen,

Please take a look at this help article, which discuss how to implement CRUD operations using local data. If you continue to experiencing difficulties you should open a separate  support request in which to provide a small runnable sample demonstrating the issue you are facing.

Regards,
Rosen
Telerik