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

Grid sends obsolete data on update

9 Answers 81 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Veit
Top achievements
Rank 1
Veit asked on 25 Dec 2012, 11:41 AM
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" }))
                              )

9 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 26 Dec 2012, 09:31 AM
Hello Veit,

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

Regards,
Petur Subev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Veit
Top achievements
Rank 1
answered on 26 Dec 2012, 08:26 PM
Petur,
I have attached the sample to the original question starting this thread.
0
Petur Subev
Telerik team
answered on 28 Dec 2012, 08:08 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Veit
Top achievements
Rank 1
answered on 28 Dec 2012, 04:21 PM
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.
0
Atanas Korchev
Telerik team
answered on 28 Dec 2012, 04:27 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Veit
Top achievements
Rank 1
answered on 03 Jan 2013, 08:51 PM
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?
0
Atanas Korchev
Telerik team
answered on 04 Jan 2013, 08:06 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Veit
Top achievements
Rank 1
answered on 05 Jan 2013, 07:20 PM
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?
0
Atanas Korchev
Telerik team
answered on 07 Jan 2013, 09:20 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Veit
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Veit
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or