This is a migrated thread and some comments may be shown as answers.

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

8 Answers 462 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Hemchand
Top achievements
Rank 1
Hemchand asked on 15 Dec 2011, 03:11 PM
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>                   

8 Answers, 1 is accepted

Sort by
0
Hemchand
Top achievements
Rank 1
answered on 15 Dec 2011, 04:12 PM
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?
0
Rosen
Telerik team
answered on 16 Dec 2011, 10:55 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Zachary
Top achievements
Rank 1
answered on 20 Apr 2012, 02:29 AM
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?
0
Lee
Top achievements
Rank 1
answered on 26 Apr 2012, 11:17 AM
Im having the same issue, cannot get to work with local array.
0
Rosen
Telerik team
answered on 27 Apr 2012, 09:08 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Zachary
Top achievements
Rank 1
answered on 27 Apr 2012, 10:10 PM
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).
0
chen
Top achievements
Rank 1
answered on 29 Feb 2016, 08:30 AM

$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?
0
Rosen
Telerik team
answered on 01 Mar 2016, 05:16 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Hemchand
Top achievements
Rank 1
Answers by
Hemchand
Top achievements
Rank 1
Rosen
Telerik team
Zachary
Top achievements
Rank 1
Lee
Top achievements
Rank 1
chen
Top achievements
Rank 1
Share this question
or