jQuery Grid Plugin - jqGrid - Topic: How do i hide custom form when user clicks outside of it?

nelsonm on How do i hide custom form when user clicks outside of it?

Thu, 05 Jul 2012 18:44:27 +0300

Unfortunetly, i ended up trashing my custom form. Creating a custom stylized form in jqgrid requires a lot of dom modification via jquery. I concluded that it's not worth it.

I ended up creating a new custom form that does not interact with jqgrid at all.

If jqgrid populated and manipulated the grid associatively rather than numerically, creating a custom stylized form would have been easier.

Even their commercial php version of the jqgrid form generator still creates a linear row/column form. You can't group objects and surround them in a bordered box or move the group around to organize the form in any logical way.

You can't do this:

imdad on How do i hide custom form when user clicks outside of it?

Thu, 05 Jul 2012 09:55:56 +0300

Hi nelsonm,

I am also searching for a customized layout editform for a jqgrid. In my case edit form can also contain more jqGrid. I will be thankful if you share some demo example like you did in your custom "workorder-window" form dialog. My email id is imdad.sarwar@gmail.com

nelsonm said:

Hello Tony,

I don't expect you to respond to this post since it is not DIRECTLY related to jqGRID.

In any case, i don't think jqGRID has a library or method for creating stylized custom forms. Your demos page example does not use any jqGRID methods for creating the sample custom form other than HTML.

However, i did come up with a solution for hiding my custom "workorder-window" form dialog when the user clicks outside the form dialog.

// open the form dialog.

$('#workorder-button').button().click(function(event){$('#workorder-window').data('WOID','19').dialog('open'); $('#tab2-grid').jqGrid('GridToForm',$.data('WOID'),'#workorder-form'); event.stopPropagation();});

// stop propagation (do nothing) when i click in the form dialog.

$('#workorder-window').click(function(event){event.stopPropagation();});

// close the form dialog when the user clicks outside the dialog box.

$('html').click(function(event){$('#workorder-window').dialog('close');});

It works everywhere except when i click on a jquery tab widget button.

nelsonm on How do i hide custom form when user clicks outside of it?

Thu, 05 Apr 2012 19:17:52 +0300

Hello Tony,

I don't expect you to respond to this post since it is not DIRECTLY related to jqGRID.

In any case, i don't think jqGRID has a library or method for creating stylized custom forms. Your demos page example does not use any jqGRID methods for creating the sample custom form other than HTML.

However, i did come up with a solution for hiding my custom "workorder-window" form dialog when the user clicks outside the form dialog.

// open the form dialog.

$('#workorder-button').button().click(function(event){$('#workorder-window').data('WOID','19').dialog('open'); $('#tab2-grid').jqGrid('GridToForm',$.data('WOID'),'#workorder-form'); event.stopPropagation();});

// stop propagation (do nothing) when i click in the form dialog.

$('#workorder-window').click(function(event){event.stopPropagation();});

// close the form dialog when the user clicks outside the dialog box.

$('html').click(function(event){$('#workorder-window').dialog('close');});

It works everywhere except when i click on a jquery tab widget button.

tony on How do i hide custom form when user clicks outside of it?

Thu, 05 Apr 2012 18:17:45 +0300

Hello,

It depends which library you use to create the dialog. If this is the jQuery UI dialog then maybe you will need to look at thier documentation and forums.

Regards

nelsonm on How do i hide custom form when user clicks outside of it?

Thu, 05 Apr 2012 18:08:10 +0300

i built a custom jquery dialog form similar to the example in the jqgrid demos page "custom buttons and forms".

I would like the form to disappear when the user clicks outside of the form dialog box just like the standard jqgrid forms do.

How can i do this?