How do I use a button to call/open Grid in a modal window

[envisionsolutions]

I have placed a button on the grid toolbar that I want to use to Insert a new record via another grid. I know there is a video demonstrating how to place a button and do an ajax callback and maybe that's what I need but I am not sure. If someone can help, I would appreciate it.�

[frankbicknell]

Re: How do I use a button to call/open Grid in a modal window

The way I do it is have the button open a detail view in the new record mode.

Just set the onclick method of the button to;
onclick="{grid.Object}.detailViewNewRecord()"

[envisionsolutions]

Re: How do I use a button to call/open Grid in a modal window

Thanks for your reply! This is a button I've added to the bottom/footer of the grid. I added the onclick function to it but it throws an error. Is there a step I am missing having placed it on the bottom of the grid?

Also,

I need to link the grid on certain fields also. I can easily add a button into the row and use the javascript onclick option that is available under field properties but I am trying to keep it clean and a button for everyone row is unnecessary. Is there a different process when you are inserting it into the grid toolbar template?

[wmz]

Re: How do I use a button to call/open Grid in a modal window

Hi

As you say, start with a row based button and use action javascript wizard to open the grid or perform any function you want until it works. You will remove the button from the rows later.

In the action javascript editor, toggle to Textmode. Copy the code in the Declarations-Global tab to the clipboard.

Go to grid properties, Javascript function declaration and paste the code as is.

Go back to the action javascript editor for the row based button code, toggle again to Textmode. Copy the code in the Javascript Attribute tab to any text editor. It should look similar to this:

{grid.componentName}_G__UNBOUND_BUTTON_1_1({grid.rownumber},'{grid.rowId}',this);

change it to something like this

{grid.componentName}_G__UNBOUND_BUTTON_1_1(1,'1',this);

Paste the changed call in the onclick() of your button in the toolbar, i.e.

...onlick()="{grid.componentName}_G__UNBOUND_BUTTON_1_1(1,'1',this);"

Remove the row based button and its code.

Cheers, Wolfgang

[envisionsolutions]

Re: How do I use a button to call/open Grid in a modal window

Peter,

I can't thank you enough. Worked perfectly. Thanks for spelling it out for me, I appreciate it!

[Andiyanto Bun]

Re: How do I use a button to call/open Grid in a modal window

Hi Josh,

Could you share what you have done? the screenshot please.

Thanks,
Andy

[envisionsolutions]

Re: How do I use a button to call/open Grid in a modal window

Peter,

Is there a reason that this would work in a live preview within alpha but not once published and launched within a browser?

[Peter.Greulich]

Re: How do I use a button to call/open Grid in a modal window

Something may not be getting published to your server. It should work. Open your grid and click one of the browse icons. Then publich to localhost and test it there as well.

[envisionsolutions]

Re: How do I use a button to call/open Grid in a modal window

It works when I use the browse icon to launch it but even after re-publishing it locally...The function does not work outside of alpha5. Should I post the code? I am sure it is something I have done wrong.

[frankbicknell]

Re: How do I use a button to call/open Grid in a modal window

Hi

As you say, start with a row based button and use action javascript wizard to open the grid or perform any function you want until it works. You will remove the button from the rows later.

In the action javascript editor, toggle to Textmode. Copy the code in the Declarations-Global tab to the clipboard.

Go to grid properties, Javascript function declaration and paste the code as is.

Go back to the action javascript editor for the row based button code, toggle again to Textmode. Copy the code in the Javascript Attribute tab to any text editor. It should look similar to this:

{grid.componentName}_G__UNBOUND_BUTTON_1_1({grid.rownumber},'{grid.rowId}',this);

change it to something like this

{grid.componentName}_G__UNBOUND_BUTTON_1_1(1,'1',this);

Paste the changed call in the onclick() of your button in the toolbar, i.e.

...onlick()="{grid.componentName}_G__UNBOUND_BUTTON_1_1(1,'1',this);"

Remove the row based button and its code.

Cheers, Wolfgang

Anybody know why this will not work in a linked grid? When I do it from the parent grid it works OK but from a linked child grid it generates an error 'object expected' It works OK in the working preview but not when published. I have tried it on several different grids and get the same result. As a matter of fact if I put just a basic js function call to display an alert message in the onclick method I get the same result.

[wmz]

Re: How do I use a button to call/open Grid in a modal window

Hi

I think it is the same issue we had with Tabbed UI's. The action javascript code to open a grid in a pop-up etc. must be defined in the parent grid, i.e. if I have the following customized toolbar HTML in the child grid (linked content) that defines a toolbar button ...

<tr>
  <td colspan="{grid.colspan}" class="{Grid.style}FooterTD" nowrap="nowrap" >
	<table cellspacing="0" border="0" cellpadding="0" style="width:100%;">
		<tr>
			<td nowrap="nowrap" align="{grid.RecordNavigatorAlignment}">
					{grid.GridViewAddNewRecordHyperlink} {grid.RecordNavigatorButtons} {grid.RecordsPerPage}&nbsp;&nbsp;&nbsp;{grid.toggleQBERowHyperlink}
			</td>
			<td nowrap="nowrap" align="right">
					{grid.grid_part.submitbuttons}
			</td>
			<td nowrap="nowrap" align="right">
				[B][COLOR="Red"]<button type="button" onclick="MyWindow(1,'1',this);">Call</button>[/COLOR][/B]
			</td>

		</tr>
	</table>
</td>
</tr>

... then the code for MyWindow must be defined in the js function declaration of the parent grid, something similar to this:

window['MyWindow'] = function(rowNum,rowId,objEle) {

var windowName = 'WINDOW_eddd56a1_55ba_4fe4_8405_770c444b8048';
var currWindow = {Grid.object}.getWindow(windowName);

var go = new Object();
go.objectId = objEle.id;
go.gridName = 'GRD_ROLES';
go.alias = '{Grid.componentname}_GRD_ROLES_yrah';
go.submitCurrentFieldValues = true;

... and so on	
	
};

Note that I use explicit window naming (here: MyWindow[]), i.e. I changed the window name given by the action js wizard so it is easier to call it.

I haven't fully tested this, nor have I tried, however, to pass child grid data to the action js function that opens the pop-up....

cheers

[frankbicknell]

Re: How do I use a button to call/open Grid in a modal window

Thank you Wolfgang, This should work well for my process. I am simply opening a grid to select some records to add to the linked grid. I am able to get all of my references and data from sql queries and from an id in a session variable.

[frankbicknell]

Re: How do I use a button to call/open Grid in a modal window

Wolfgang,
I was able to put the reference to a hidden button on the parent grid in the javascript function declarations section of the parent grid (single record form). This function is called by a button in the grid toolbar of the child grid. The hidden button on the parent grid opens the grid that I want to select the records from.
At first I didn't like the idea of having a hidden button(s) on the grid, I don't know why it just seemed like there should be a more efficient way, however, after trying a few different methods this is the best for me. A button sitting there doing nothing unless clicked on, or in my case called from a function, really does not use any more resources and it It makes it very easy to change the action javascript, etc in the hidden buttons properties.
Thanks again for pointing me in the right direction.

 in the javascript function declarations of the parent grid;

function SelectReceivedItems()
{{grid.componentName}_G__UNBOUND_BUTTON_4_1(1,'1',this);}

in the customize grid toolbar template on the linked child grid;

<td>
	<button class="GlassBlueButton"
		onclick="SelectReceivedItems();" >
		Select Received Items
	</button>
</td>

[wmz]

Re: How do I use a button to call/open Grid in a modal window

well done. Many roads lead to Rome :) The main thing is that it works and that you know why ....

[richard2007]

Re: How do I use a button to call/open Grid in a modal window

hi,

i have copied the process here to add a button to my toolbar, which is ok, but the button wont fire the actions. it works ok if the button is in the row but i dont need a button each row.

here is the code in the 'Javascript Functions Declarations'

window['{grid.componentName}_G__UNBOUND_BUTTON_1_1'] = function(rowNum,rowId,objEle) {
window['{Grid.ComponentName}__UNBOUND_BUTTON_1_1'] = {grid.object}.createWindow('{grid.componentName}_WINDOW__UNBOUND_BUTTON_1_1','modal-url-resizable',{height: '5in',
width: '8in',
title: {html: 'Window',
location: 'top'},
disableMove: false,
body: {content: {type: 'url',
url: '__workingMessage.a5w'}},
onHide: function() { $(this.getWindowId('body')).src = '__workingMessage.a5w';}}   );
window['{Grid.ComponentName}__UNBOUND_BUTTON_1_1'].show();
$(window['{Grid.ComponentName}__UNBOUND_BUTTON_1_1'].getWindowId('body')).src = 'adv_case_new.a5w?session.caseparent='+{grid.object}._getValue('G','CASE_PARENT_ID',rowNum)+'&session.firstname='+{grid.object}._getValue('G','CLIENTFIRSTNAME',rowNum)+'&session.surname='+{grid.object}._getValue('G','CLIENTSURNAME',rowNum)+'&session.title='+{grid.object}._getValue('G','CLIENTTITLE',rowNum)+'&session.branch='+{grid.object}._getValue('G','BRANCH',rowNum)+'&session.fileloc='+{grid.object}._getValue('G','FILELOCATION',rowNum)+'&session.hometel='+{grid.object}._getValue('G','CLIENTTELHOME',rowNum)+'&session.mobile='+{grid.object}._getValue('G','CLIENTTEL_MOBILE',rowNum)+'&session.adviser='+{grid.object}._getValue('G','ADVISER',rowNum)+'&session.dob='+{grid.object}._getValue('G','CLIENTDOB',rowNum)+'&session.dpar='+{grid.object}._getValue('G','DPA_REVIEW',rowNum)+'&session.dpan='+{grid.object}._getValue('G','DPA_NEWSLETTER',rowNum)+'&session.dpat='+{grid.object}._getValue('G','DPA_THIRDPARTY',rowNum)+'';

}

here is the code int he customise toolbar

<tr>
	<td colspan="{grid.colspan}" class="{Grid.style}FooterTD" nowrap="nowrap" align="{grid.RecordNavigatorAlignment}" >
	{grid.DetailViewAddNewRecordHyperlink}
	{grid.RecordNavigatorButtons} 
	{grid.RecordsPerPage}&nbsp;&nbsp;&nbsp;
	{grid.toggleQBERowHyperlink}
<button onclick()="{grid.componentName}_G__UNBOUND_BUTTON_1_1(1,'1',this);">Add new case for this client</button>
	</td>
</tr>

i have been at this for hours, the button clicks but does nothing