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

Transport.Create issues

7 Answers 154 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Iron
Joel asked on 09 Dec 2015, 11:22 PM

I'm experimenting with the Kendo UI grid, data source, and AngularJS on the front end, and ASP.NET Web API on the back end.  So far, everything is working well, except for a couple of issues creating new records.  I have a Contact page, and on that page I have an Activities grid displaying various activities related to the contact. 

My first issue is that I need to populate the contactID client-side when creating a new record.  I am doing that using transport.create.data, but the contactID is always zero when sent to the server.  I have worked around this by changing the case of the property to "ContactID" (capital C), so that it no longer matches the schema.  This adds it to the list of parameters (so I have "ContactID" and "contactID") and Web API accepts it, but I must be doing this wrong.  What is the correct way to handle it?

The second issue is that after a successful POST, the client-side row that was sent to the server is added to the grid.  I got the impression that the JSON returned from the server after a successful POST is supposed to get added.  It contains some properties (such as the activityID) that are populated server-side.  How is this supposed to work?

Here's the data source code:

$scope.activityGridData = function() {
    return {
        type: "webapi",
        transport: {
            read: {
                url: "api/Activities"
            },
            update: {
                url: "api/Activities"
            },
            create: {
                url: "api/Activities",
                data: { ContactID: $scope.contact ? $scope.contact.contactid : "" }
            },
            destroy: {
                url: "api/Activities"
            }
        },
        serverPaging: true,
        serverFiltering: true,
        pageSize: 20,
        filter: { field: "ContactID", operator: "eq", value: $scope.contact ? $scope.contact.contactid : 0 },
        "sort": [{
            "field": "isComplete",
            "dir": "asc"
        }, {
            "field": "activityID",
            "dir": "desc"
        }],
        "schema": {
            "data": "data",
            "total": "total",
            "errors": "errors",
            "model": {
                "id": "activityID",
                "fields": {
                    "activityID": {
                        "type": "number"
                    },
                    "contactID": {
                        "type": "number"
                    },
                    "activityType": {
                        "type": "number"
                    },
                    "activityTypeList": {
                        "editable": false,
                        "type": "object"
                    },
                    "activityTypeName": {
                        "editable": false,
                        "type": "string"
                    },
                    "description": {
                        "type": "string"
                    },
                    "notes": {
                        "type": "string"
                    },
                    "location": {
                        "type": "string"
                    },
                    "startTime": {
                        "type": "date",
                        "defaultValue": null
                    },
                    "endTime": {
                        "type": "date",
                        "defaultValue": null
                    },
                    "isAllDay": {
                        "type": "boolean"
                    },
                    "isComplete": {
                        "type": "boolean"
                    }
                }
            }
        }
    };
};

7 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 12 Dec 2015, 07:02 AM

Hello Joel,

 

Can you please share with us how you populate that external form? A runnable example would also help us better understand the issue and reproduce it.

 

And example of using WebAPI with AngularJS is available here:

 

https://github.com/telerik/kendo-examples-asp-net-mvc/tree/master/grid-data-source-request-web-api

 

 

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Joel
Top achievements
Rank 1
Iron
answered on 12 Jan 2016, 08:47 PM

I was out of the office for a while, so I'm just now getting to reply to this message.  I have posted my example online at  http://mbsi4test.cloudapp.net/kendotest/ngtest2.html.  This is test code, so please forgive the mess.  The page may take a minute to load.  Once loaded, please do the following to reproduce:

  • Select a contact in the left grid.  The right side of the screen will update to show details about the contact.
  • Press the New Activity button in the header of the Activities grid.  This will popup an edit form to add the record.
  • In the popup form, select an Activity Type, enter a Description and any other fields you like.
  • Press the Update button.
  • Note that activityTypeName and activityID are not populated on the new record in the grid. 
  • Those two fields are populated server-side.  They are included in the response from the POST.

I expected the response from the POST to be used to populate the new record in the grid.  Can you tell me what I'm doing wrong?  Please let me know if you need any more information. Thanks!

0
Kiril Nikolov
Telerik team
answered on 14 Jan 2016, 08:55 AM

Hello Joel,

 

The problem is caused by the incorrect format of the returned data. You have specified data configuration of the schema to be "data". And the dataSource expects the response to be wrapped in data object (same as the read functionality that you already have in place).

 

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Joel
Top achievements
Rank 1
Iron
answered on 20 Jan 2016, 02:50 PM

Thanks, that helped.  Server-side, I wrapped the entity in a DataSourceResult and returned that.  Now, it is working as expected.

Going back to the first issue in my original message... I need to populate the contactID client-side when creating a new record.  I am doing that using transport.create.data, but the contactID is always zero when sent to the server.  I have worked around this by changing the case of the property to "ContactID" (capital C), so that it no longer matches the schema.  This adds it to the list of parameters (so I have "ContactID" and "contactID") and Web API accepts it, but I must be doing this wrong.  What is the correct way to handle it?

create: {
    url: "api/Activities/ds",
    data: { ContactID: $scope.contact ? $scope.contact.contactid : "" }
},

0
Kiril Nikolov
Telerik team
answered on 25 Jan 2016, 08:17 AM

Hello Joel,

 

Why not using the edit event and populate the model there? This way the model will be updated and correctly sent to the server.

 

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Joel
Top achievements
Rank 1
Iron
answered on 25 Jan 2016, 03:20 PM

Thanks Kiril, that worked.  Here's the code for the edit event of the grid (not the dataSource):

edit: function (e) {
    // Populate contactID on new records
    if (e.model.isNew()) {
        e.model.contactID = contact ? contact.contactid : "";
    }
}

0
Kiril Nikolov
Telerik team
answered on 27 Jan 2016, 08:29 AM

Hello Joel,

 

I am happy to hear that the issue is resolved. 

 

In case you have any further questions, please do not hesitate to contact us.

 

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Data Source
Asked by
Joel
Top achievements
Rank 1
Iron
Answers by
Kiril Nikolov
Telerik team
Joel
Top achievements
Rank 1
Iron
Share this question
or