As my first question in here, it is possible that I am doing something wrong. Please do not hesitate to tell me - we all learn the first time :)
Context of my problem:
I have a database with 2 tables: Scales and Items. 1 Scale can have different Scales related (relation that I called Scale Parent - Scale Childs). Scale Childs can have Items. Scale Parents don't.
So I decided to work in the frontiers of my knowledge with Grids, and build up a Sub-SubGrid for this case:
Grid of Scale Parents. - SubGrid with Scale Childs for each Scale Parent. - - SubGrid with Items for each Scale Child.
Works. And it does it good: Adding, Editing, custom dialogs works for Scale Parents and Scale Childs.
But not for the Item ones. Custom dialogs opened in the Sub-SubGrid (I add Add, Edit and Delete as custom actions in a Item Action column) work in the Sub-SubGrid context which is very limited, so it does not fit and gets hidden by the Grid rows.
I attached a ScreenShoot with this for a better understanding of what I am saying. You can see Scale name at top, followed by Scale Child's Name and the third Child has a SubSubGrid with Scale Item Id at Top. In the middle at bottom New Item Dialog, with the bottom of the Scale Name Grid blocking the dialog.
Link to the Image, as I am too newbie to post Images... http://imageshack.us/photo/my-images/703/subsubgriddialogopened.png/
Now, my question is:
How can I avoid the Floating attribute of the Dialog, so it does not hide behind the Grid? Some research brought me to this link: Incorrect Z-Order - the jqgrid Add/Edit screen shows up behind if you the grid is on a jquery ui dialog
...which is good for the standard buttons add, edit and delete, but does not work for custom dialogs.
Thank you all for reading my problem. As it is not a problem with the code (it works all), I did not post it, but in case someone thinks it would help solving the problem, I will add it in here.
EDIT: Code.
jQuery(document).ready(function(){
var $Grid_scaleParent = jQuery("#scaleOverviewList");
$Grid_scaleParent.jqGrid({
url:'/scaleoverview/scaleParentsData/',
datatype: 'json',
mtype: 'POST',
colNames:[
//Colnames is the visual name of the column, which appears at the top.
'Scale Id',
'Scale Name',
'Completed Scale',
'Childs related',
'Childs with Items related',
'Scale Actions'
],
colModel :[
//ColModel defines the columns and its names.
//Name is the key of the column. Index is needed for sorting the grid.
{name:'scaleId', index:'sPId', sortable:true, hidden:true},
{name:'scaleName', index:'sPName', sortable:true, align:'left', required: true, editable:true, edittype:'text'},
{name:'completedScale', sortable:false},
{name:'childsRelated', sortable:false},
{name:'childsItemsRelated', sortable:false},
{name:'scaleActions', sortable:false}
],
//Toppager adds the pagination to the top of the form.
toppager: true,
height: "100%",
rowNum:10,
rowList:[10,40,100],
pager: '#gridpager',
sortname: 'sPName',
sortorder: "asc",
viewrecords: true,
// Options to enable subGrid.
subGrid: true,
subGridRowExpanded: function(Grid_scaleChild, rowId_scaleParent) {
////////////////////////////////////
// Starting Scale Child SubGrid //
////////////////////////////////////
var Table_scaleChild, Pager_scaleChild;
Table_scaleChild = Grid_scaleChild+"_t";
Pager_scaleChild = "p_"+Table_scaleChild;
$('#'+Grid_scaleChild).html("<table id='"+Table_scaleChild+"' class='scroll'></table><div id='"+Pager_scaleChild+"' class='scroll'></div>");
jQuery('#'+Table_scaleChild).jqGrid({
url:'scaleoverview/scaleChildsData/'+rowId_scaleParent+'/',
datatype: "json",
mtype: 'POST',
colNames: [
'Scale Child Id',
'Scale Child Name',
'Items Related',
'Scale Child Actions'
],
colModel: [
{name:"scaleChildId",index:"sCId", sortable:true, hidden:true},
{name:"scaleChildName",index:"sCName", width:600, sortable:true, align:'left', required: true, editable:true, edittype:'text'},
{name:"itemsRelated", sortable: false, width:300},
{name:"scaleChildActions", sortable:false, width:200}
],
autowidth:false,
rowNum:20,
pager: Pager_scaleChild,
sortname: 'sCId',
sortorder: "asc",
height: '100%',
subGrid: true,
subGridRowExpanded: function(Grid_scaleItems, rowId_scaleChild) {
////////////////////////
// Starting Scale Items SubSubGrid //
////////////////////////
var Table_scaleItems, Pager_scaleItems;
Table_scaleItems = Grid_scaleItems+"_t";
Pager_scaleItems = "p_"+Table_scaleItems;
$('#'+Grid_scaleItems).html("<table id='"+Table_scaleItems+"' class='scroll'></table><div id='"+Pager_scaleItems+"' class='scroll'></div>");
jQuery('#'+Table_scaleItems).jqGrid({
url:'scaleoverview/scaleItemsData/'+rowId_scaleChild+'/',
datatype: "json",
mtype: 'POST',
colNames: [
'Scale Item Id',
'Min.Amount',
'Max.Amount',
'Percentage',
'Start Date',
'End Date',
'Scale Item Actions'
],
colModel: [
{name:"scaleItemId",index:"sIId", sortable:true},
{name:"minAmount", sortable:false, align:'left', required: true, editable:true, edittype:'text'},
{name:"maxAmount", sortable:false, align:'left', required: true, editable:true, edittype:'text'},
{name:"percentage", sortable:false, align:'left', required: true, editable:true, edittype:'text'},
{name:"startDate", sortable:false, align:'left', required: true, editable:true, edittype:'text'},
{name:"endDate", sortable:false, align:'left', required: true, editable:true, edittype:'text'},
{name:"scaleItemActions", sortable:false, width:100}
],
autowidth:false,
rowNum:20,
pager: Pager_scaleItems,
sortname: 'sIId',
sortorder: "asc",
height: '100%',
loadComplete: function(){
//Getting the ID array of the list.
var scaleItemIds = jQuery('#'+Table_scaleItems).getDataIDs();
//Constructing action buttons.
for(var scaleItemAuxId=0;scaleItemAuxId< scaleItemIds.length;scaleItemAuxId++){
var scaleItemId = scaleItemIds[scaleItemAuxId];
//Construction of the custom option for each row.
//Note that we need to pass to the function the subGrid for the correct form construction.
var scaleItemActions = '<button class="scaleItemEdition" onclick="scaleItemEdition(\'' + scaleItemId + '\', \''+ Table_scaleItems +'\');"></button>';
//Constructing property management buttons.
scaleItemActions += '<button class="scaleItemDeletion" onclick="scaleItemDeletion(\'' + scaleItemId + '\', \''+ Table_scaleItems +'\');"></button>';
//Adding options to the Action Column
jQuery('#'+Table_scaleItems).setRowData(scaleItemIds[scaleItemAuxId],{"scaleItemActions":scaleItemActions});
}
//Construction of the visual features of the buttons.
$(".scaleItemEdition").button({
icons: {
primary: 'ui-icon-pencil'
},
text: false
});
$(".scaleItemDeletion").button({
icons: {
primary: 'ui-icon-close'
},
text: false
});
}
});
jQuery("#"+Table_scaleItems).jqGrid('navGrid',"#"+Pager_scaleItems,{edit:false,add:false,del:false}, {multipleSearch:true, overlay:false});
jQuery("#"+Table_scaleItems).navButtonAdd(Pager_scaleItems,{
caption: 'New Item',
title:'New Item',
buttonicon :'ui-icon-plus',
onClickButton:function(){
//Definition of the columns to be shown.
jQuery('#'+Table_scaleItems).jqGrid('editGridRow', 'new', {
zIndex:2000,
addCaption: 'New Item',
reloadAfterSubmit:true,
closeAfterAdd:true,
recreateForm:true,
beforeShowForm: function (form)
{
var $grid = $('#'+Table_scaleItems);
var dlgDiv = $("#editmod" + $grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
},
url: '/scaleoverview/addItem/'+rowId_scaleChild+'/'
});
}
});
/////////////////////////////////////
// Ending Scale Items SubSubGrid //
/////////////////////////////////////
},
loadComplete: function(){
//Getting the ID array of the list.
var scaleChildIds = jQuery('#'+Table_scaleChild).getDataIDs();
//Constructing action buttons.
for(var scaleChildAuxId=0;scaleChildAuxId< scaleChildIds.length;scaleChildAuxId++){
var scaleChildId = scaleChildIds[scaleChildAuxId];
//Construction of the custom option for each row.
//Note that we need to pass to the function the subGrid for the correct form construction.
var scaleChildActions = '<button class="scaleChildEdition" onclick="scaleChildEdition(\'' + scaleChildId + '\', \''+ Table_scaleChild +'\');"></button>';
//Constructing property management buttons.
scaleChildActions += '<button class="scaleChildDeletion" onclick="scaleChildDeletion(\'' + scaleChildId + '\', \''+ Table_scaleChild +'\');"></button>';
//Adding options to the Action Column
jQuery('#'+Table_scaleChild).setRowData(scaleChildIds[scaleChildAuxId],{"scaleChildActions":scaleChildActions});
}
//Construction of the visual features of the buttons.
$(".scaleChildEdition").button({
icons: {
primary: 'ui-icon-pencil'
},
text: false
});
$(".scaleChildDeletion").button({
icons: {
primary: 'ui-icon-close'
},
text: false
});
}
});
jQuery("#"+Table_scaleChild).jqGrid('navGrid',"#"+Pager_scaleChild,{edit:false,add:false,del:false});
// SubGrid Adding Scale
jQuery("#"+Table_scaleChild).navButtonAdd(Pager_scaleChild,{
caption: 'New Child',
title:'New Child',
buttonicon :'ui-icon-plus',
onClickButton:function(){
//Definition of the columns to be shown.
jQuery('#'+Table_scaleChild).jqGrid('editGridRow', 'new', {
addCaption: 'New Child',
reloadAfterSubmit:true,
closeAfterAdd:true,
recreateForm:true,
beforeShowForm: function (form)
{
// Styling the editing form to the center of the page
var $grid = $('#'+Table_scaleChild);
var dlgDiv = $("#editmod" + $grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
},
url: '/scaleoverview/addScale/'+rowId_scaleParent+'/'
});
}
});
//////////////////////////////////
// Ending Scale Child SubGrid //
//////////////////////////////////
},
loadComplete: function(){
//Resizing grid in order to make it 100% width.
resize_the_grid($Grid_scaleParent);
//Getting the ID array of the list.
var ids = $Grid_scaleParent.getDataIDs();
//Constructing action buttons.
for(var i=0;i< ids.length;i++){
var cl = ids[i];
//Construction of the custom option for each row.
var scaleActions = '<button class="edit" onclick="parentScaleEdition(\'#scaleOverviewList\', \'' + cl + '\');"></button>';
scaleActions += '<button class="delete" onclick="parentScaleDeletion(\'#scaleOverviewList\', \'' + cl + '\');"></button>';
//Construction of the custom option for new Tab and the name of the tab.
//var nameOfTheTab = jQuery('#siteOverviewList').getCell(cl,'Client') + '::' + jQuery("#siteOverviewList").getCell(cl,'Name');
//siteActions += '<button class="seeGames" onclick="createtab(\''+ nameOfTheTab +'\', '+ cl +');"></button>';
//Adding options to the Action Column
$Grid_scaleParent.setRowData(ids[i],{'scaleActions':scaleActions});
}
//Construction of the visual features of the buttons.
$(".edit").button(
{
text: false,
label: 'Edit Scale',
icons: {
primary: 'ui-icon-pencil',
secundary: null
}
});
$(".delete").button(
{
text: false,
label: 'Delete Scale',
icons: {
primary: 'ui-icon-close',
secundary: null
}
});
/*
$(".seeGames").button(
{
text: false,
label: 'Open tab with Games related to this Site',
icons: {
primary: 'ui-icon-folder-open',
secundary: null
}
});
*/
setHighlightedRows();
}
});
// 2 - Adding aditional options to the grid
$Grid_scaleParent.navGrid('#gridpager',{edit:false,add:false,del:false,search:false,refresh:true,cloneToTop: true},
{}, // edit options
{}, // add options
{}, //del options
{} // search options
);
// 3 - Adding a custom option to the grid.
// It is important to declare this custom button after the standard ones. Otherwise it will not appear.
$Grid_scaleParent.navButtonAdd("#gridpager",{
caption:'New Parent',
buttonicon :'ui-icon-plus',
onClickButton:function(){
$Grid_scaleParent.jqGrid('editGridRow', 'new', {
addCaption: 'New Parent',
reloadAfterSubmit:true,
closeAfterAdd:true,
recreateForm:true,
beforeShowForm: function (form)
{
// Styling the editing form to the center of the page
var $grid = $Grid_scaleParent;
var dlgDiv = $("#editmod" + $grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
},
beforeInitData: function() {
//Redefine of the cols that need to be set for adding.
},
afterShowForm: function () {
//Redefine of the cols, so other actions will not see them.
},
url: '/scaleoverview/addScale/'
});
}
});
});
function scaleItemEdition (scaleItemId, subSubGridId)
{
//Declaring subGrid in which the form has to be inserted.
var $subSubGrid = jQuery('#'+subSubGridId);
$subSubGrid.jqGrid('editGridRow', scaleItemId, {
editCaption:'Edit Scale Item',
beforeShowForm: function(form)
{
// Styling the editing form to the center of the page
var $grid = $subSubGrid;
var dlgDiv = $("#editmod" + $grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
},
width:400,
recreateForm:true,
reloadAfterSubmit:true,
closeAfterEdit:true,
url:'/scaleoverview/scaleItemEdition'
});
resize_the_grid(jQuery('#scaleOverviewList'));
}
function scaleItemDeletion (scaleItemId, subSubGridId)
{
//Declaring subGrid in which the form has to be inserted.
var $subSubGrid = jQuery('#'+subSubGridId);
$subSubGrid.jqGrid('delGridRow', scaleItemId,
{
caption:'Delete Scale Item',
msg:'Delete this Scale Item.',
beforeShowForm: function(form)
{
// Styling the editing form to the center of the page
var $grid = $subSubGrid;
var dlgDiv = $("#delmod" + $grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
},
reloadAfterSubmit:true,
url:'/scaleoverview/scaleItemDeletion'
});
}
