Kendo Angular Odata Create Example?

3 posts, 0 answers
  1. Jayme
    Jayme avatar
    17 posts
    Member since:
    Jun 2014

    Posted 14 Apr 2015 Link to this post

    While there are plenty of read/update/delete examples out there for using Angular JS + Odata + Kendo UI, I have not yet come across a CREATE/POST example...and I am struggling with the right method to basically insert form entered data to an odata service via the kendo model and datasource.

    I have an Orders Kendo Data Model 

    myApp.factory('orderModel', function ()
    {
        return kendo.data.Model.define({
            id: "OrderID",
            fields: {
                OrderID:  { type: "int", editable: false },
                Amount:  { type: "number",  required: true, min: 1 },
                Heading: { type: "string", required: true },
                Message: { type: "string" },
                PurchaseDate: { type: "date" }
            }
           
        });
    });

     And I have an Orders DataSource:

    function dsOrders(orderModel) {
        var crudServiceBaseUrl = "/odata/Order";

        return new kendo.data.DataSource({
            type: "odata",
            transport: {
                read: {
                    async: true,
                    url: crudServiceBaseUrl,
                    dataType: "json"
                },
                create: {
                    url: "/odata/Orders",
                    type: "post",
                    dataType: "json",
                },
                update: {
                    url: function (data) {
                        return crudServiceBaseUrl + "(" + data.OrderID + ")";
                    },
                    type: "put",
                    dataType: "json"
                },
                destroy: {
                    url: function (data) {
                        return crudServiceBaseUrl + "(" + data.OrderID + ")";
                    },
                    dataType: "json"
                }
            },
            batch: false,
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize: 10,
            schema: {
                data: function (data) { return data.value; },
                total: function (data) { return data["odata.count"]; },
                model: orderModel
            },
            error: function (e) {
                alert(e.xhr.responseText);
            }

        });
    };

    My Angular controller creates a new empty instance of an order.  The user makes selections that set the values to the scope and we call a save method that does the following:

    $scope.send = function () {

    //instantiate the orders datasource

    var datasource = new dsOrders();

    var item = {
                   Amount: $scope.order.Amount,
                   Heading: $scope.order.Heading,
                   Message: $scope.order.Message
         };

     dataSource.add(item);
     dataSource.sync();

    }

    Nothing is happening here - the create event doesn't fire, nothing goes to the odata controller, etc.  If anyone has a good example of CREATE/POST using AngularJS, or any suggestions for the proper way to implement what I am attempting to achieve, I would greatly appreciate it.

  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 16 Apr 2015 Link to this post

    Hello Jayme,

    Here is an example for OData CRUD: https://github.com/telerik/kendo-examples-asp-net/blob/master/grid-odata-crud/index.html It doesn't use Angular but this shouldn't be an issue.

    We've noticed that there is an error in the code you have pasted. 

    var datasource = new dsOrders();
     dataSource.add(item);


    Is this just a typo or your actual code? Are there any JavaScript errors?

    It also seems that you are using OData v4. If this is the case try setting the transport.type option to odata-v4.

    Regards,
    Atanas Korchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Jayme
    Jayme avatar
    17 posts
    Member since:
    Jun 2014

    Posted 05 Aug 2015 in reply to Atanas Korchev Link to this post

    It has been a long time since the original post, but I wanted to update this in case it helps anyone else. First, there was an error in my schema (which is what most of the datasource issues end up being).  Second, I ended up passing in the $scope.order to the send function and everything worked as intended.  

    $scope.submitForm = function (formValid, newOrder)

    ...

                       //instantiate the datasource    
                       var ds = new orders();

                       // add a new data item
                       ds.add(newOrder);
                       // save the created data item
                       ds.sync();

    ...

Back to Top