Friday, September 03, 2010

Calendar Repeat Widget with JQuery UI Dialog as Modal Form

When developing Web grid forms (those that update several records at the same time) columns cannot grow as they would in a native application. Sometimes it is simply not acceptable to have to update record by record in its own page.

If you group certain fields in a text you could get the best of the two worlds. An example of such approach is Google Calendar Repeat Widget.

Using JQuery UI dialog you can get a nice modal form in a floating div. After completion a single row field can be shown and still the whole information is gathered to be sent to the server after submission.

Here is a demo that serializes all the extra information and stores it in a single text field that of course should be made a hidden field.

The demo does not make necessary validations like populating the interval based on the selected frequency (i.e does not take into consideration that there are only 12 months in a year) but rather concentrates on demonstrating how to interact with the UI Dialog plugin to save space in a grid while still being able to save unlimited number of fields.

No comments: