Angular Kendo Grid with Web Api - data not available in Update method

4 posts, 0 answers
  1. Donna Stewart
    Donna Stewart avatar
    127 posts
    Member since:
    Apr 2009

    Posted 07 Nov 2014 Link to this post

    I am using the Kendo grid with Angular and Asp.Net MVC WebApi.  I have the grid set up with batch editing and have tried to follow the examples, but I am not getting the data to be updated in my method in the WebApi Controller. I see the data on the update request but when I hit the break point in the method, the parameter has a count of 0.  I have tried different scenarios, but have had no luck.  Any help is very much appreciated.  I have attached screen shots of the parameter at break point and the data on the request in the developer tool in Chrome.  Here is my Angular code for the the grid:

    usersCtrl.authUsersGridOptions = {
        pageable: true,
        selectable: "row",
        editable: true,
        save: function(e) {
            alert("UserFName is " + e.model.UserFName);
        },
        toolbar: ["save", "cancel"],
        columns: [
            { field: "Id", hidden: true},
            { field: "UserKey", hidden: true },
            { field: "UserFName", title: "First Name" },
            { field: "UserLName", title: "Last Name" },
            { field: "UserName", title: "User Name" },
            { field: "Email", title: "Email Address"},
        {
            field: "IsBIUser", title: "Is BI User",
            template: '<input type="checkbox" #= IsBIUser ? checked="checked" : "" # disabled="disabled"></input>'
        },
            { field: "StartDate", title: "Start Date" },
            { field: "EndDate", title: "End Date" },
            { field: "twoFactor", hidden: true },
            { field: "mobilePhone", hidden: true }]
    };
     
     
        usersCtrl.authUsersGridDataSource = new kendo.data.DataSource({
            type: "aspnetmvc-ajax",
            transport: {
                read: {
                    url: '/api/gmcmembership/au/' + e.sender.value(),
                    dataType: 'json',
                    type: "GET"
                },
                update: {
                    url: '/api/gmcmembership/updateusers',
                    type: "POST"
                },
                parameterMap: function(data, operation) {
                    if (operation !== "read" && data.models) {
                        return {models: kendo.stringify(data.models)}
                    } else {
                        return JSON.stringify(data);
                    }
                }
            },
            schema: {
                model: {
                    id: "Id",
                        Id: "Id",
                        UserKey: "UserKey",
                        UserName: "UserName",
                        UserFName: "UserFName",
                        UserLName: "UserLName",
                        IsBiUser: "IsBIUser",
                        StartDate: "StartDate",
                        EndDate: "EndDate",
                        twoFactor: "twoFactor",
                        mobilePhone: "mobilePhone"
                }
            },
            batch: true,
            pageSize: 7
        });

    Here is the razor code for the grid:

    <div ng-show="usersCtrl.showGrid" kendo-grid="authUsersGrid" k-options="usersCtrl.authUsersGridOptions" k-data-source="usersCtrl.authUsersGridDataSource">

    Thanks!
    Donna
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 11 Nov 2014 Link to this post

    Hello Donna,

    Try to change two things here and give a try:

    1) Remove the aspnetmvc type of the DataSource
    2) Change the parameterMap logic for update operation like so:

    if (operation !== "read" && data.models) {
                        return kendo.stringify(data.models)
    }



    Kind Regards,
    Petur Subev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. UI for ASP.NET AJAX banner
  4. Donna Stewart
    Donna Stewart avatar
    127 posts
    Member since:
    Apr 2009

    Posted 12 Nov 2014 in reply to Petur Subev Link to this post

    Hi Petur,

    Thank you very much for your help.  However, while I was waiting for a response and trying many other scenarios, I decided to drop back to using Kendo MVC wrappers.  Now I am having the same issue with them.  There is no example I can find anywhere that shows Grid batch updating using web api.  I'm beginning to think it just does not work.  I will post a question on the MVC forum and see if I can get some help there.  I have read Web API Editing in your documentation, but there is no example of updating.  Only reading and creating.  Thanks again.

    Donna
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 14 Nov 2014 Link to this post

    Hello Donna,

    You can check examples here:

    https://github.com/telerik/kendo-examples-asp-net/tree/master/grid-webapi-crud

    Kind Regards,
    Petur Subev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
UI for ASP.NET AJAX banner