This project is read-only.

Modal Popup on Data Grid

Dec 23, 2011 at 3:26 AM

Hi There,

I was wondering if there is some built in functionality to help with Modal Popups on DataGrids. For example I have a grid of addresses associated with a contact. I want the grid to show the basic address details as read only text. When the user clicks Add or Edit it should Popup a modal window where they can enter/adjust the full address details.

This must all happen on the client side.

I'm thinking of writing a JQuery function which will copy the details of the selected row into the fields on the Modal Popup. Then when the user closes the Modal Popup I copy the values back again. Is this the only way or is there something built in.

I took a look at your ToDo List application. This allows you to click Edit Details which popups up a Modal window and allows you to save the details of the task. However the save goes straight to the backend storage and does not refresh the grid. 





Dec 23, 2011 at 3:00 PM

The edit detail of the grid example is a detail view that connect directly with an action method. Its best use is a grid that has NO EDIT TEMPLATE, so when you edit a row it retrieves data trough an action method and AUTOMATICALLY send the new data to the DISPLAY TEMPLATE (NOT TO THE EDIT TEMPLATE) of the row involved.


If the above its ok, you can do it quite easily ...but you have to use a DISPLAY ONLY grid, that is updated JUST WITH THE DETAIL WINDOW. This means you will have no possibility to undo your modifications.

If you need a detail window that works just on the client side and it is automatically synchronized with a current selected row...This will be provided together with several other nice features with the "Data-Moving" plugin I already announced on the home page of the codeplex site. This plugin will allow you to sinchronize easily areas of the screen, and to provide input just by dragging containers of information (for instance a virtual "customer card"), and to undo ANY action done on the page. However, a stable release of this plugin would require a couple of months...and the plugin will not be free. In a few days I will post a video showing the first alpha working.

Therefore at moment the best solution is a link in the edit template that opens a jquery UI dialog...and then copiying back and forth the data. However consider also the first solution I proposed based on a display only grid (a grid without an edit template) +the standard detail window that connects immediately to the sever.


Pls notice I defined a linkedin group of the Mvc Controls Toolkit it is small but if we reach at least about 100 people it will start attracting, possible customers, suppliers, people looking for a job and so it may become an interesting place where to find what you need!

Dec 27, 2011 at 9:26 PM
Edited Dec 27, 2011 at 10:15 PM

Hi There,

Thanks heaps for the response, didn't expect one given it is the holiday season.
Thanks for the info on option 1 below. Unfortunately that won't work in my case as this grid is available for new Contacts which are yet to be saved. So I don't have a contact Id I can associate the address with which prevents a server side save.
The Data-Moving feature sounds perfect, however I can't wait a few months for it.
So that leaves me with my original option of moving data in and out of a jquery window. I'm happy to do that, just wanted to check that there wasn't an easier way.
Once again thanks for your response.