Kendo UI Grid - Update not persisting

Question

Been trying to do an update on a Kendo grid and I'm having issues.

I'm using Rails as the back-end and when I do the update, the server seems to be showing that everything worked:

      Started PUT "/" for 127.0.0.1 at 2012-02-12 17:28:19 -0600
          Processing by HomeController#index as
          Parameters: {"models"=>"[{\"created_at\":\"2012-02-08T17:34:50Z\",
         \"first_name\":\"Milla\",\"id\":2,\"last_name\":\"sfasfsdf\",\"password\":\"\",
        \"updated_at\":\"2012-02-08T17:34:50Z\",\"user_name\"
        :\"\"}]"}
        Rendered home/index.html.erb within layouts/application (3.0ms)
        Completed 200 OK in 89ms (Views: 88.0ms | ActiveRecord: 0.0ms)

However, when I refresh the view, nothing has changed. When I checked the database, of course no changes had taken place there either.

I went through the documentation here about how to do edits in the grid: http://demos.kendoui.com/web/grid/editing.html

And I watched Burke Hollands video about how to set up the grid to work with Rails: http://www.youtube.com/watch?v=FhHMOjN0Bjc&context=C3f358ceADOEgsToPDskKlwC22A9IkOjYnQhYyY9HI

There must be something that I haven't done right, but I'm just not seeing it.

Here's my code that works with the Kendo stuff:

           var User = kendo.data.Model.define({
                id: "id",
                fields: {
                    first_name: { validation: { required: true } },
                    last_name: { validation: { required: true } }
                }
            });

            var UsersData = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "/users.json"
                        }, 

                        create: {
                            url: "/users/create.json",
                            type: "POST"
                        }, 

                        update: {

                            type: "PUT"
                        },

                        destroy: {
                            type: "DELETE"
                        },

                        parameterMap: function(options, operation) {
                            if (operation !== "read" && options.models) {
                                return {models: kendo.stringify(options.models)};
                            }
                        }


                    },

                    batch: true,

                    pageSize: 5,

                    schema: {
                        model: User
                    }


                });             

                $("#users-grid").kendoGrid({

                    dataSource: UsersData,
                    navigatable: true,
                    editable: true,                    
                    selectable: true,
                    pageable: true,
                    sortable: true, 
                    toolbar: ["create", "save", "cancel"],

                    columns: [
                    {
                        field: "first_name",
                        title: "First Name"
                    },
                    {
                        field: "last_name",
                        title: "Last Name"
                    },



                    ]


                });  

Answer 1

You can also modify your datasource because the url key can take a function:

var UsersData = new kendo.data.DataSource({
    transport: {
        read:  {
          url: '/users.json',
          dataType: 'json'
        },
        update: {
          url: function (o) {
            return '/users/' + o.id + '.json'
          },  
          dataType: 'json',
          type: 'PUT'
        },  
        destroy: {
          url: function (o) {
            return '/users/' + o.id + '.json'
          },
          dataType: 'json',
          type: 'DELETE',
        },  
        create: {
          url: '/users.json',
          dataType: 'json',
          type: 'POST'
        },
        parameterMap: function(options, operation) {
            if (operation !== "read" && options.models) {
                return {models: kendo.stringify(options.models)};
            }
        }
    },
    batch: true,
    pageSize: 5,
    schema: {
        model: User
    }
});

Answer 2

Some more research and I've got it working like this...

I added a route to override the 7 RESTful routes that Rails gives you by default. In your Routes.rb files, add this line...

match 'users' => 'users#update', :via => :put

Which basically says we are going to handle all puts by going to the update definition on the controller.

Now in the controller definition, you want to handle the update a bit differently since it's not RESTful. You need to first parse the JSON that you are sending via the parameterMap and then iterate through the objects updating with the object attributes...

def update
  respond_to do |format|
    @users = JSON.parse(params[:models])
    @users.each do |u|
      user = User.find(u["id"])    
      unless user.nil?
          user.update_attributes u
      end
    end
    format.json { head :no_content }
  end
end