How to use Html.DataGridFor with popup for inserting?

Jun 13, 2012 at 1:16 PM

Hi, I'm currently trying to create a grid using your MVC Controls Toolkit.  My aim is to have all the editing done via the popup, then saving to a db when the submit on the main page is clicked.

Using the MVC3NestedModels solution with the latest sourcecode, when clicking save using the popup for edit, I can see the grid updated with the new details.  However if I click on save when using the popup for inserting a new record, it does not appear in the grid.

I also noticed the Documention section for "Master-Detail Helper Synchronized with the DataGrid" talks about avoiding doing both in-line editing and using the popup detial for editing. As part of this it talks about passing a null edit template for the grid. When I do this, the insert button and link are no longer available.

Should both of these items work with minimal javascript coding on my part, or will I need to do lots of javascript coding to get the grid to refresh with data inserted via the popup.

Thanks

Coordinator
Jun 13, 2012 at 8:25 PM

Normally the grid works in batch mode. That is you edit sevaral rows, add and delete rows, and then submit the page, and at that point all changes are returned to the server. You can also add a detail window to each row while keeping this way to work: just add a jquery dialog in the edit template, that opens immediately after the row goes into edit mode. You can use grid events to do this. This way you have detail window+batch updates.

The standard detail link instead is made to allow the grid works in immediate mode, that is each row modification is passed immediately to the controller (this is the way alot of other grids work). That is why it is not adviced to use both in-line editing with and edit templates with the detail link: one would mix two different update starategies, that migh confuse the user.

When the grid works in ajax immediate mode the detail link is just used to edit existing rows. Addition and deletions of rows must be done with ajax calls that refresh the whole grid.

A new row can be added as follows:

  1. As you have already done, Do not insert the edit template, and let the grid works in display only mode
  2. add a normal submitt button that when clicked cause an ajax refresh of the whole grid.
  3. In the action method that refreshes the grid add an empty row to the grid
  4. On the on success event of the ajax call click the detail button of the newly added row. This is quite easy if you add to each detail link a different umique css class: $('.lastlinkcss).trigger('click');

This way as soon the grid is refreshed the detail windows open to edit the newly added row.

 

Differnt kinds of grids with more possibility of customization can be implemented by using Client Blocks that are an enahncement of knockout.js, and in particular the ClientBlockRepeater. give a look to this two tutorial to see what you can implement:

Notwithstanding the title the examples described are available also in Mvc3.

In semptember, I will release an Mvc Plugin called "Data Moving" that will contain a complex hierarchical grid. Some videos showing the Data Moving plugin will be available on this site together with the next release of the Mvc Controls Toolkit within a couple of weeks.