telmiger
Posts: 61
|
| Posted: 08/30/2012, 5:45 PM |
|
I got this solution from support and its straight forward to implement.
-----------------------------------------------------------------------------------------------------------------------------------------------------------
Please download sample project that demonstrates how to locate Grid form on the CCS page and Record form on the Dialog panel (modal window).
http://support.yessoftware.com/files/ModalMasterDetail.zip
I need to notice that this could be done only manually, Builders does not create such pages.
Here is the brief description how the example works:
1). on page load special global variable doOpenDialog is set up. You can find it in HTML code:
//End Include User Scripts
var doOpenDialog = false;
This variable indicates whether the dialog panel should be visible or hidden.
2). when user clicks on the wish_id or Add New link on the Grid form the ClientCustomCode1 is fired. Its Start event is assigned to
Panel1wisheswishes_Insert.onclick;Panel1wisheswish_id.onclick;
You can see it under ClientCustomCode properties
3). this code sets the doOpenDialog to true, it means that dialog panel will be visible.
4).when link is clicked the UpdatePanel is refreshed and Dialog panel with Record form becomes visible. At this time the ClientCustomCode2 is fired which Start event is assigned to onLoad event of the Record form. You can check it under ClientCustomCode settings
Start event: Panel1Panel2wishes1.onload;
5). this code makes the Dialog panel visible or hidden. Check the code in HTML.
6). submit record form hides the Dialog panel. It is specified under dialog panel settings
Hide event: Panel1Panel2wishes1.onsubmit;
7). at this time the ClientCustomCode4 is fired. It sets the doOpenDialog variable to false.
8). in addition to all above the client JS code is executed when validation error occurs on the Record form. Here is the code:
<!-- BEGIN Error -->
<tr class="Error">
<td colspan="2">{Error}
<script>doOpenDialog = true;</script>
Important note: the Grid form and dialog panel with Record form should be located inside Update Panel.
Before you test the emailed project please extract the patch (Components subfolder) enclosed into downloaded archive to ..\CodeChargeStudio5 folder and re-start CCS.
----------------------------------------------------------------------------------------------------------------------------------------------------------------
A few things to watch out for:
1. If you have included pages with panels make sure they don't have the same name as the update panel otherwise the update panel will not work.
2. Pay close attention to the ID of the link that opens the modal window. In the example its something like
Panel1wisheswish_id_{wishes:rowNumber}
In my project that I converted from previous versions the stuff between the {} was missing I had to recreate the link otherwise only the first record in the list will work.
If you add the update panel after you created the grid it will add the panel name inside the {} like Panel1wisheswish_id_{Panel1wishes:rowNumber} You will need to delete the Panel1 inside the {} otherwise it will not work.
3. I tested the modal window implementation with an IPad and if I choose Fixed center the keyboard covered up my form and it was hard to enter data. If you choose no to "Fixed center" the modal window gets pushed up when the keyboard pops out.
Tony
|
 |
 |
dinesh
Posts: 8
|
| Posted: 12/16/2012, 3:21 AM |
|
This is what I've been looking for... however, I am running CodeCharge Personal using php. Does anyone have a php based verion of this solution?
Thanx,
Dinesh
|
|
|
|
Lucius
Posts: 220
|
| Posted: 12/18/2012, 2:53 AM |
|
For PHP I think it would be much more simpler to do this with help of JS floatbox (http://floatboxjs.com/), and depending on the need you could have your record in hidden div, or in a separate page (the iFrame type), then you just add the floatbox class and it works.
It is easier to debug if you do it as iFrame, as you can run this separate page as normal page.
|
|
|
|
ckroon
Posts: 869
|
| Posted: 12/18/2012, 9:07 AM |
|
I use FancyBox with my PHP apps.
Shoot me a PM and I can give you some code.
_________________
Walter Kempees...you are dearly missed. |
|
|
|
DataDoIT
|
| Posted: 05/30/2013, 11:09 PM |
|
This worked well.
|
|
|
|
DataDoIT
|
| Posted: 06/07/2013, 12:58 AM |
|
Using this method, if you want to be able to capture any modal form
errors and display without closing, edit your error control row:
<!-- BEGIN Error -->
<tr class="Error">
<td colspan="2">{Error}
<script type="text/javascript">
doOpenDialog = true;
</script>
</td>
</tr>
<!-- END Error -->
|
|
|
|
opw
Posts: 3
|
| Posted: 06/07/2013, 8:49 AM |
|
Wow, I was struggling with that one.... and the solution is so simple! 
Beautiful, thanks for sharing!
|
|
|
|
|
