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

Kendo Angular Odata Create Example?

2 Answers 179 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Jayme
Top achievements
Rank 1
Jayme asked on 14 Apr 2015, 05:00 PM

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 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 16 Apr 2015, 01:47 PM
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!
 
0
Jayme
Top achievements
Rank 1
answered on 05 Aug 2015, 05:48 PM

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

...

Tags
Data Source
Asked by
Jayme
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Jayme
Top achievements
Rank 1
Share this question
or