Transport.Create issues

8 posts, 0 answers
  1. Joel
    Joel avatar
    16 posts
    Member since:
    Feb 2015

    Posted 09 Dec 2015 Link to this post

    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"
                        }
                    }
                }
            }
        };
    };

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 12 Dec 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Joel
    Joel avatar
    16 posts
    Member since:
    Feb 2015

    Posted 12 Jan in reply to Kiril Nikolov Link to this post

    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!

  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 14 Jan Link to this post

    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!
     
  6. Joel
    Joel avatar
    16 posts
    Member since:
    Feb 2015

    Posted 20 Jan in reply to Kiril Nikolov Link to this post

    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 : "" }
    },

  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 25 Jan Link to this post

    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!
     
  8. Joel
    Joel avatar
    16 posts
    Member since:
    Feb 2015

    Posted 25 Jan in reply to Kiril Nikolov Link to this post

    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 : "";
        }
    }

  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 27 Jan Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready