jQuery Grid Plugin - jqGridForum

Topic RSS

Show Modal Form as a response to Cell on click event.

05/01/2009
16:19

RobGMiller

Member

Members

Forum Posts: 42

Member Since:
02/01/2009

Offline

jqGrid is exceptional and takes care of most of our requirements. However, we are looking for one functionality that might be a bit beyond the grids ability to handle with standard methods.

I wonder if I could get some direction to find the best way to control a modal form similar to the one that pops up using the Edit Selected Row Pager Bar button in the demo listed under “New in Version 3.2″/”Client Validation”.(http://trirand.com/jqgrid/jqgrid.html#)

This one seems to simply load the content of the selected row to validate fields including hidden fields. I could not find an example of the script that builds the form.

What we need is to dynamically configure the modal form with fields that are not necessarily in the grid along with a few fields from the selected row. This information would be posted back to the server to create a set of new rows to be fed back to the grid.

Ideally, the form would popup as a response to clicking on a cell in a particular column.

I would imagine it might be something like the UI datepicker demo that pops up as a response to clicking on a cell already in edit mode. The UI DatePicker is a JQuery control or form whose result is fed back to the correct cell via the row ID. I am hopefull that some JQuery overlay type modal form can be called in the same way.

The PickDates function uses a cell designation to specify the cell as follows:

JQuery(”#”+id+”_sdate”, “#rowed6″).DatePicker({DateFormat(”yy-mm-dd”)});

What other Methods are available by Calling JQuery with the cell and the grid Id specified?

How does only the sdate cell cause the date picker to show up when it is listed to be activated as a response to the onSelectRow: option of the #rowed6 grid?

Thanks for your help.

RobGMiller

08/01/2009
09:12

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello Rob,

“This one seems to simply load the content of the selected row to validate fields including hidden fields. I could not find an example of the script that builds the form.”

Calling the method editRow builds the form. The form is builded on the data and options of the grid.

“What we need is to dynamically configure the modal form with fields that are not necessarily in the grid along with a few fields from the selected row. This information would be posted back to the server to create a set of new rows to be fed back to the grid.”

IMHO there are diffrent solutions.

If you want to be a consistent with the grid and use the form editing methods maybe you will need tyo define additinal hidden fields which are editable. This will allow you to solve this problem. Of course in this case you will need to fill these fields in the grid with empty data.

If you do not want to to do this maybe it is a good idea to construct your own form and use some grid methods to populate or add data - I mean getRowData, setRowData and addRowData. Also in this case you can use the available GriToForm and FormToGrid methods. Refer to docs for these.

“Ideally, the form would popup as a response to clicking on a cell in a particular column.”

Also maybe you can use the availbale onCellSelect event (if you do not want to edit in place the cell) Refer to docs.

“What other Methods are available by Calling JQuery with the cell and the grid Id specified?”

Also refer to docs for all available methods and events used in jqGrid.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
51 Guest(s)

Currently Browsing this Page:
1 Guest(s)