Batch editing with a modal editor form

[Jesse]

I'm evaluating the Kendo for Asp.Net controls and am currently looking at the Grid. I want to build an new/edit form for a Person model. A person can have 0 or more phone numbers. The user should be able to enter the person's first name, last name, multiple phone numbers, and then at the bottom of the form, click a save button to save the person and their phone numbers to the database all at once in a transaction.

For phone number entry, I want to allow the user to click a "New" button that, when clicked, opens a modal dialog containing the form to create a new phone number (e.g. a drop down list for the phone type and a textbox for the phone number.) After filling out the form, they click "Ok" and it displays this unsaved phone number in a table. The phone number's row has an edit and delete button. If I click the edit button, it opens the modal and displays the phone number again as I entered it to allow me to edit it. If I click the delete button, it asks for confirmation from the user and if they provide it, it removes the phone number. Again this is all happening client-side.

Looking at the Kendo Grid, the Popup mode is the right idea as far as the user experience for data entry, but it appears that it is requried to save to make a server call to save to the database upon closing the modal? Since the person that the phone number is a child of does not exist, this won't work, not to mention I want to save in a single transaction. But if there's a way to allow the popup to close and save changes on the client-side only, that's all I need. The Grid's batch editing mode looks like the editing occurs client-side so it may allow me to submit my person and the phone numbers to save in a single transaction, but it uses inline editing, which we do not like for our user experience.

Is it going to be possible to modify the client-side behavior to allow editing Grid rows in a modal dialog so they can be sumitted (and bound to their model) all at once? If so, what would it take to accomplish? I understand the Grid's edit modes can't be mixed, but I'm not sure that means I can't wire up my own javascript that works with my own modal form and the client-side Grid API if necessary.

[Konstantin Dikov]

Hello,

The first thing that you should consider is the passing of the Grid data (with the phone numbers) along with the form. Since this could not be achieved out of the box, you should define custom templates for each column as shown in the following HowTo example:

• https://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/post-grid-with-form

The next part is the modal editing. Your observations are correct and mixing batch editing with popup editing is not possible and for batch updates with a modal window you will have to use entirely custom window and update the data items in the Grid manually through the "set" method:

• https://docs.telerik.com/kendo-ui/api/javascript/data/model#methods-set

I would personally recommend the "Batch" editing, because you will get a built-in editing functionality that will not require any customization.


Regards,
Konstantin Dikov
Progress Telerik

[Jesse]

Awesome! I'm just going to elaborate a little for anyone else reading with the same question. Since posting, I've learned that for any <tr> row in the grid, you can get the ViewModel for that row using the .dataItem API function and that ViewModel is a Kendo Observable object. So I should be able to use my own modal to change the property values of that object and the grid will automatically update the row with the changes. 
The Grid then just needs to have a column including all of the fields in hidden inputs. Those hidden inputs have to follow the asp.net MVC naming convention, which includes the item index, in order for Model Binding bind them on the server side after the form is submitted. E.G.

<input name="myPersonVM.PhoneNumber[0].Name" id="myPersonVM_PhoneNumber_0__Name" .../>

So you have to set that up for each property you want to submit as a client template. Luckily the index can be parameterized! Here is the code sample that Konstantin's link above eventually leads to:

    @(Html.Kendo().Grid(Model.Products)
      .Name("Products")
      .ToolBar(tools => tools.Create().Text("Add new product"))
      .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
      .Columns(columns =>
      {
          columns.Bound(p => p.Name).ClientTemplate("#= Name #" +
            "<input type='hidden' name='Products[#= index(data)#].Name' value='#= Name #' />"
          );

          columns.Bound(p => p.ProductID).Hidden().ClientTemplate("#= ProductID #" +
            "<input type='hidden' name='Products[#= index(data)#].ProductID' value='#= ProductID #' />"
          );

          columns.Command(command => command.Destroy()).Width(100);
      })
      .DataSource(dataSource => dataSource.Ajax()
           .Model(model =>
               {
                   model.Id(p => p.ProductID);
                   model.Field(p => p.ProductID).Editable(false);
               })
           .ServerOperation(false)
      )
)

 

[quote]Konstantin Dikov said:
I would personally recommend the "Batch" editing, because you will get a built-in editing functionality that will not require any customization.
[/quote]

Thank you, understood. But for cases with more complex objects than a phone number, trying to edit within a single row is not always user friendly enough or reasonable. I'm glad the Grid has the flexibility to be able to work with it's client-side like this, including the ability to get at the index in the template! This would be much easier than a solution I built using Knockoutjs with a plain old table.