Start Building Professional
Web Apps Today

How to refesh a grid in a layout/tab from another window

SCENARIO
========
I have a main page containing a 2 column layout where the right hand cell contains a row of tabs each containing a grid. I can't use edit in place at the moment so I need to pop up a window to add a new row. This works perfectly and I'm able to save the new record.

PROBLEM
=======
What I haven't been able to do is to update the relevant grid with the new row and display a progress image in the relevant tab. Note that the progress image works fine from a refresh button on a toolbar in the same tab as the grid. Note that I'm also using Symfony as a framework but that shouldn't be relevant.

REFERENCES
==========
I've read section 3.5.1 and 3.5.2 from the documentation on dealing with access to inner window content and all other parts of the documentation. Also from the Knowledge Base:
http://www.dhtmlx.com/docs/products/kb/index.shtml?cat=18&page=1&q=9455
http://www.dhtmlx.com/docs/products/kb/index.shtml?cat=18&page=2&q=8083
http://www.dhtmlx.com/docs/products/kb/index.shtml?cat=18&page=3&q=7250

CODE SNIPPETS
=============
Relevant code from the my page is:

var dhxLayout;
dhxLayout = new dhtmlXLayoutObject(document.body, "2U", "dhx_blue");
dhxLayout.cells("b").attachObject("container");
<div id="container" >

var tabbarJob;
var toolbarNotes;
var gridNotes;

function updateGrid(grid, ajax, indicator)
{
json = ajax.responseJSON;
grid.clearAll(false);
grid.parse(json,'json');
Element.hide(indicator);
}

function doAddNote(){
dhxLayout.dhxWins.createWindow("add_note", 0, 0, 500, 400);
dhxLayout.dhxWins.window("add_note").attachURL("<?php echo url_for("note/edit").'?layout=false&client_id='.$job->getClientId().'&job_id='.$job->getId(); ?>");
}

function doInitObjects(){
tabbarJob = new dhtmlXTabBar("tabbar_job","top");
tabbarJob.addTab("tab_notes","Notes <img id='loading_indicator_notes' src='/jobtracker/images/loader.gif' style='height:16px;width:16px;vertical-align: middle; display: none' />","100px");
tabbarJob.setContent("tab_notes","tab_content_notes");
toolbarNotes = new dhtmlXToolbarObject("toolbar_notes");
toolbarNotes.addButton("button_notes_add", <?php echo $buttonNo++; ?>, "Add", "icons/Blue/18/add.png", "icons/Blue/18/add.png");
toolbarNotes.addButton("button_notes_refresh", <?php echo $buttonNo++; ?>, "Refresh", "icons/Blue/18/refresh.png", "icons/Blue/18/refresh.png");
toolbarNotes.attachEvent("onClick", function(id){
if (id == "button_notes_add")
doAddNote();
else if (id == "button_notes_refresh"){
<?php echo remote_function(array(
'url' => 'note/getNotesJSON?job_id='.$job->getId(),
//'update' => array('success' => 'posts', 'failure' => 'error'),
'loading' => "Element.show('loading_indicator_notes');",
'complete' => 'updateGrid(gridNotes, request, "loading_indicator_notes")'
)) ?>};
});
gridNotes = new dhtmlXGridObject('grid_notes');
gridNotes.init();
gridNotes.load("<?php echo url_for("note/getNotesJSON?job_id=".$job->getId()); ?>","json");
}
dhtmlxEvent(window,"load",doInitObjects);

<div id="tabbar_job" class="dhtmlxTabBar" style="width:100%;height:100%;overflow:auto;" ></div>
<div id="tab_content_notes" name="Notes">
<div id="grid_notes" style="width:100%;height:100%;overflow:auto;"></div>
</div>
</div>
</div>

When I click the Add note button it creates a window from a URL containing:

var window_self = parent.dhxLayout.dhxWins.window("<?php echo ($note->isNew() ? 'add_note' : 'edit_note'.$note->getId()) ?>");
dhxToolbar = window_self.attachToolbar();
dhxToolbar.addButton("save", <?php echo $buttonNo++; ?>, "Save", "icons/dhtmlx/iconSave.gif", "icons/dhtmlx/iconSave_dis.gif");
dhxToolbar.attachEvent("onClick", function(id){
var gridNotes = parent.dhxLayout.dhxWins.window("grid_notes");
if (id == "save")
{
????
????
}

QUESTIONS
=========
What do i put where the question marks are to access the grid and the loading indicator?

Above code snippet shows how only one tab with created, but you have multiple similar tabs, right?

You can change 
if (id == "button_notes_add") 
doAddNote(); 

to the 
if (id == "button_notes_add") 
doAddNote(gridNotes); 

and next line
dhxToolbar = window_self.attachToolbar(); 

to the 
dhxToolbar = window_self.attachToolbar(); 
dhxToolbar._related_grid = gridNotes; //where gridNotes - incoming parameter of doAddNote method

Now, in onclick method of toolbar, you can use this._related_grid to access the grid, for which window was opened.