Grid sends obsolete data on update

[Veit]

Hi,

I am trying to buil a customer detail page with MVC4. On thisdetail page I have the grid listing all adresses of the customer. So far so good. When a user edits the data in the address grid and clicks "Save", the controller receives only the data which was valid before the user edited the address.

Html.Kendo().Grid(Model.Adresses).Name("AddressGrid")

                .Columns(columns =>

                {

                    columns.Bound(a => a.Name).Width(100);

                    columns.Bound(a => a.StreetLine1).Width(100);

                    columns.Bound(a => a.StreetLine2).Width(100);

                    columns.Bound(a => a.ZipCode).Width(100);

                    columns.Bound(a => a.City).Width(100);

                    columns.Bound(a => a.Country).Width(100);

                    columns.Bound(a => a.Type).Width(100);

                    columns.Command(cmd => { cmd.Edit(); }).Width(100);

  

                })

                .ToolBar(commands =>

                    {

                        commands.Save();

                    })

                .Editable(editable => editable.Mode(GridEditMode.InCell))

                .DataSource(ds => ds.Ajax()

                                        .Batch(true)

                                        .ServerOperation(false)

                                        .Model(m =>

                                        {

                                            m.Id(i => i.Id);

                                            m.Field(i => i.Id).Editable(false);

                                            m.Field(i => i.Name).Editable(true);

                                            m.Field(i => i.StreetLine1).Editable(true);

                                            m.Field(i => i.StreetLine2).Editable(true);

                                            m.Field(i => i.ZipCode).Editable(true);

                                            m.Field(i => i.City).Editable(true);

                                            m.Field(i => i.Country).Editable(true);

                                            m.Field(i => i.Type).Editable(true);

                                        })

                                        .Update(update => update.Action("Customer_Update", "Customer",new { Command = "Update" }))

                              )

[Petur Subev]

Hello Veit,

Could you please put your case into a small project so we can take a look?

Regards,
Petur Subev
the Telerik team

[Veit]

Petur,
I have attached the sample to the original question starting this thread.

[Petur Subev]

Hello Veit,

You are expecting wrong model in the Customer_Update action method. You need to have the following signature that the model binder will populate with the addresses sent from the client.

[AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Customer_Update([DataSourceRequest] DataSourceRequest request, IEnumerable<Address> models)
        {

For more information check the batch editing documentation.

All the best,
Petur Subev
the Telerik team

[Veit]

Petur,

the Models used on the Edit view is the customer entity. The corresponding class has a property which stores the addresses:

public class Customer

{

        // other properties omitted for clarity.

 

        /// <summary>

        /// Gets the customer's addresses

        /// </summary>

        public Collection<Address> Adresses { get; private set; }

}

The grid on the Edit view is bound to this property.

@(Html.Kendo().Grid(Model.Adresses).Name("AddressGrid")

// other registration calls are omitted.

)

So when the user edits the address data he is actually perfoming the changes on the property Adresses of the customer entity. And when debugging I can see that the Method

[HttpPost]

public ActionResult Edit(string id, Customer customer)

{

      //some code for handling the editing of the customer.

}

is called.

[Atanas Korchev]

Hi Veit,

 The following statement:
@(Html.Kendo().Grid(Model.Adresses)

 is equivalent to:

@(Html.Kendo().Grid<Address>()

The grid is bound to a list of Address objects. As a result it will send only Address objects to your update method as my colleague suggested.

All the best,
Atanas Korchev
the Telerik team

[Veit]

Although I have updated the Method as you suggested to 

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Customer_Update([DataSourceRequest] DataSourceRequest request, IEnumerable<Address> addresses)

{

   // code to handle updates

}

This methode is still not used. As I wrote earlier the grid calls the function Edit on the postpack when hitting the save button. Any additional ideas?

[Atanas Korchev]

Hello,

 I think there is some misunderstanding how the grid editing feature works. You seem to be using the Grid as a part of a form and expect the new and updated records to be submitted when you click the save button of the form. However the grid editing doesn't work like this. The action method configured via the Update setting would be executed when you click the Save Changes button of the grid.

Kind regards,
Atanas Korchev
the Telerik team

[Veit]

Atanas,
you are right I want to use the grid as part of a form. But I have defined a specific method to handle the updates invoked by the grid. This method is:

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult Customer_Update([DataSourceRequest] DataSourceRequest request, IEnumerable<Address> addresses)

{

   // code to handle address updates

}

The grid is should use this method, since the grid is configured with

@(Html.Kendo().Grid(Model.Adresses).Name("AddressGrid")

                .Columns(columns =>

                {

                    columns.Bound(a => a.Id).Hidden();

                    columns.Bound(a => a.Name).Width(100);

                    columns.Bound(a => a.StreetLine1).Width(100);

                    columns.Bound(a => a.StreetLine2).Width(100);

                    columns.Bound(a => a.ZipCode).Width(100);

                    columns.Bound(a => a.City).Width(100);

                    columns.Bound(a => a.Country).Width(100);

                    columns.Bound(a => a.Type).Width(100).EditorTemplateName("GridAddressTypeEditorTemplate");

                })

                .ToolBar(commands =>

                    {

                        commands.Save();

                        commands.Create().Text("Add");

                    })

                .Editable(editable => editable.Mode(GridEditMode.InCell))

                .DataSource(ds => ds.Ajax()

                                        .Batch(true)

                                        .ServerOperation(false)

                                        .Model(m =>

                                        {

                                            m.Id(i => i.Id);

                                            m.Field(i => i.Id).Editable(false);

                                            m.Field(i => i.Name).Editable(true);

                                            m.Field(i => i.StreetLine1).Editable(true);

                                            m.Field(i => i.StreetLine2).Editable(true);

                                            m.Field(i => i.ZipCode).Editable(true);

                                            m.Field(i => i.City).Editable(true);

                                            m.Field(i => i.Country).Editable(true);

                                            m.Field(i => i.Type).Editable(true);

                                        })

                                        .Update(update => update.Action("Customer_Update", "Customer", new { Command = "Update" }))

                              )

)

 
But his method is never called, Although I click on the "Save Changes" button of the grid.

If this is not the correct way of using the grid as part of a form. How would you realize editing a customer's address list?

[Atanas Korchev]

Hi,

 This is odd. The method should really be invoked. One issue which may occur if there are nested <form> tags which is not supported according to the HTML specification. You can try moving the grid out of the form to see if this would make a difference. You can also check if there are any JavaScript errors when you press the Save Changes button of the grid.

The project you have attached currently cannot be run. Could you please attach a runnable version?

Regards,
Atanas Korchev
the Telerik team