jQuery Grid Plugin - jqGrid - Topic: Customizing Form in Modal Dialog

andrewwatts on Customizing Form in Modal Dialog

Thu, 19 Nov 2009 00:15:19 +0200

Thanks Tony,

I'm definitely eager to try that out, is there a formal means of making a custom template request for 3.7, or is this thread good enough?

In the meantime I've decided that using something like the master detail example would work best in the interim.

Thanks again, I'm really enjoying the library, it's saving me a ton of time.

- Andrew

tony on Customizing Form in Modal Dialog

Tue, 17 Nov 2009 02:45:53 +0200

Hello Andrew,

Thanks for this. I too think about this. Yes template is one good solution and I think it can be realized. Will be a job for 3.7 release.

Best Regards

Tony

andrewwatts on Customizing Form in Modal Dialog

Mon, 16 Nov 2009 11:00:28 +0200

Hi Rumen,

Thanks for your response, I have a couple problems with both the suggestions you have suggested, but before I explain the problems. Let me better explain what I am trying to do, and maybe you'll have a better suggestion.

I want a form in a modal that has a nested tabled, such that I can label the rows and columns, and allow for input in the cells. Above and below this layout I also have entries with a label and single cell for input.

Example markup (w/o jqgrid) might look like:

<form>
    <table>
        <tr><td>label</td><td><input type="text"></td>
    </table>
    <table>
        <caption>a note about the data to be input</caption>
        <tr><th></th><th>column 1</th><th>column 2</th></tr>
        <tr><th>row1</th><td><input type="text"></td><td><input type="text"></td></tr>
        <tr><th>row2</th><td><input type="text"></td><td><input type="text"></td></tr>
        <tr><th>row3</th><td><input type="text"></td><td><input type="text"></td></tr>
    </table>
    <table>
        <tr><td>label</td><td><input type="text"></td>
    </table>
</form>

And it's also important to note that I do not need to display any of the elements in the 2nd table in the grid, ie: they're all hidden. But, I do need to display them for add/edit/view.

I probably could emulate this with rowpos and colpos, however it's expensive to insert a caption, a row for column labels, change the row labels, and hide the 2nd column row labels, all must be done following the jqgrid rendering. Plus, I hit css issues in the rows that are above and below the nested because jqgrid inserts empty table cells (instead of using colspan) where there is no label/input element. (i would like the input element width to be the whole width, not only the first 2 columns in the table jqgrid renders).

I don't think custom_element works because everything returned by the custom_element function is inserted in the same table cell, which presents css issues as well as if i would ask custom_element to render more than one element then I believe that impacts checkOnSubmit and checkOnUpdate.

I think the closest is probably GridToForm/FormToGrid, but as I previously mentioned I'd rather not have to duplicate the functionality that already is provided by default.

I think it would be really nice to have the ability to provide a custom form, then have jqgrid go through the form and populate it where input element names match the colModel names. Or possibly pass a template to jqgrid and then jqgrid renders and populates the template.

Thanks again for the response, and I'd definitely be interested in hearing how you would solve the problem.

- Andrew

Rumen[Trirand] on Customizing Form in Modal Dialog

Sat, 14 Nov 2009 01:54:55 +0200

It really depends on what you are trying to achieve. As far as forms go, jqGrid has the ability to provide layout for the controls on the form - please take a look at this help link

http://www.trirand.com/jqgridw.....mmon_rules

and especially the documentation about rowpos/colpos - etc. They can be used to customize the form.

You can also create custom form edit element - check out this demo

http://trirand.com/jqgrid/jqgrid.html

and new in 3.6 -> Create Custom Input Element example.

You can also customize some of the captions and error message.

Anything beyond that may require custom code and from what I see in your approach (handling the client-side events) - this is a perfectly legitimate and good approach, from what I can tell.

Regards,

Rumen Stankov

jqGrid Team

andrewwatts on Customizing Form in Modal Dialog

Fri, 13 Nov 2009 21:53:24 +0200

I did look into that, and it might be what I end up doing however there is already a lot of great functionality provided by default (eg: error handling, top/bottom information headers, closeOnEscape, checkOnSubmit, checkOnUpdate, etc...) and that functionality would need to be duplicated if a custom form was used.

I'd prefer not to duplicate functionality, but after looking through the code, I'm also realizing this might not be an easy request to fulfill. I could attempt a patch that allows for custom forms and maintains functionality, although, I'm hesitant because I don't fully understand checkOnSubmit, checkOnUpdate, handling of default values and who knows what I haven't come across yet.

Although, before I attempt a patch, I'm still hoping I'm overlooking something and someone has encountered this before.

friflaj on Customizing Form in Modal Dialog

Fri, 13 Nov 2009 10:34:25 +0200

I want something similar. Can the functionality from the "custom buttons and forms" help here?

andrewwatts on Customizing Form in Modal Dialog

Thu, 12 Nov 2009 18:51:57 +0200

I apologize if this has been asked before but I could not find an appropriate forum thread or example.

Currently I am using the default add/edit buttons in the navigation grid to open a form using jqModal as provided by default functionality in jqGrid, and this all works great. But, my grids are starting to get more complex and I'm starting to look at customizing the form that shows up in the jqModal dialog.

Currently I've used the beforeShowForm event to prototype something similar to this:

beforeShowForm: function(form){
    // generate some html mapping the input element names to colModel names
    var html = '<div id="custom_form_content">a custom form layout</div>';

    // use jQuery replaceWith to remove existing form and add custom form
    form.replaceWith(html);
}

And this appears to be working, however it is very expensive and I'm afraid jqGrid may be doing some things behind the scenes I am not aware of yet (eg: how does this impact view?). But before I write a lot of expensive code and get into situations I haven't thought of yet, I thought I'd see how others have handled customizing forms layouts.

Thanks for any suggestions.

-Andrew