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

Thread is closed for posting
9 posts, 0 answers
  1. Hemchand
    Hemchand avatar
    3 posts
    Member since:
    Dec 2011

    Posted 15 Dec 2011 Link to this post

    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>                   
  2. Hemchand
    Hemchand avatar
    3 posts
    Member since:
    Dec 2011

    Posted 15 Dec 2011 Link to this post

    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?
  3. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 16 Dec 2011 Link to this post

    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!
  4. Zachary
    Zachary avatar
    3 posts
    Member since:
    Dec 2011

    Posted 19 Apr 2012 Link to this post

    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?
  5. Lee
    Lee avatar
    46 posts
    Member since:
    Feb 2012

    Posted 26 Apr 2012 Link to this post

    Im having the same issue, cannot get to work with local array.
  6. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 27 Apr 2012 Link to this post

    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!
  7. Zachary
    Zachary avatar
    3 posts
    Member since:
    Dec 2011

    Posted 27 Apr 2012 Link to this post

    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).
  8. chen
    chen avatar
    3 posts
    Member since:
    Jul 2013

    Posted 29 Feb 2016 Link to this post

    $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?
  9. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 01 Mar 2016 Link to this post

    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!
     
Back to Top