Kendo Angular Odata Create Example?

[Jayme]

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.

[Atanas Korchev]

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

 

 

[Jayme]

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();

...