Just received the new Version 2.0 controls and now have an issue.
Within a DHTMLXTabber control, we have two tabs that each contain another DHTMLXTabber control of various tabs. Within each of those tabs, we have added a DHTMLXToolbar and DHTMLXGrid control. We have an input field which we use to set filters on rows as well as clear the filters. We also have the undo/redo functionality enabled.
When we use drag and drop, the onGridReconstruction event does not fire. The rows can be moved without a problem, but when we do a serialization, the XML comes back as if it were originally loaded AND then the onGridReconstruction event fires. It’s as if something has stopped the onGridReconstruction event from firing before it gets to my handler. BTW: I always return true for the handler.
We added a button and input field to the toolbar to allow us to filter a particular column as well as a clear button where we set the filter to a zero-length string (grid.filterBy(0, ‘’)) which returns the lines back to their order if we were doing a filter. Here’s the interesting twist…
If I load the grid with XML, drag a line to anywhere, then click the button I assigned to clear the filter (which is not set), the rows magically return back to the way they were on the initial load… THEN the onGridReconstruction event fires.
Attached is the javascript file that sets up the grids, toolbars, and tabs. I don’t think there is anything wrong with it, just give you an idea of where I’m at.
Thanks.
// JScript File
function InitializeGrid(strDivID, pfEnableDrag) {
var thisGrid = new dhtmlXGridObject(strDivID);
thisGrid.setImagePath(‘codebase/imgs/’);
thisGrid.setSkin(‘xp’);
// dhtmlxError.catchError(‘LoadXML’, GridCatchError);
if (pfEnableDrag)
thisGrid.enableDragAndDrop(true);
return thisGrid;
}
function GridCatchError(plngType, pstrDesc, aobjData) {
//alert(‘Error caught!!’);
alert(‘plngType = ’ + plngType + ’ - pstrDescr = ’ + pstrDesc);
return false;
}
/* SelectTabView */
function SelectTabView(pobjTab, pstrID) {
var objTab = null;
var strHeader = ‘’;
var strAjaxURL = ‘’;
switch (pstrID) {
case ‘pu_tab1’:
break;
case ‘pu_tab2’:
break;
case ‘pu_tab3’:
break;
case ‘pu_satab1’:
strAjaxURL = ‘ajax_planutilities_getItemA.aspx’;
strHeader = ‘fa_’;
break;
case ‘pu_satab2’:
strAjaxURL = ‘ajax_planutilities_getItemB.aspx’;
strHeader = ‘pt_’;
break;
case ‘pu_satab3’:
strAjaxURL = ‘ajax_planutilities_getItemC.aspx’;
strHeader = ‘bf_’;
break;
case ‘pu_satab4’:
strAjaxURL = ‘ajax_planutilities_getItemD.aspx’;
strHeader = ‘bi_’;
break;
case ‘pu_satab5’:
strAjaxURL = ‘ajax_planutilities_getItemE.aspx’;
strHeader = ‘bl_’;
break;
case ‘pu_sbtab1’:
break;
case ‘pu_sbtab2’:
break;
case ‘pu_sbtab3’:
break;
// case ‘pu_sctab1’:
// break;
//
// case ‘pu_sctab2’:
// break;
//
}
// here we go…
if (strAjaxURL.length != 0) {
objTab = LoadTabInfo(pobjTab, pstrID, strAjaxURL, true);
if (objTab) {
// add buttons…
objTab._tbar.addButton(strHeader + ‘new’, 0, ‘New’, ‘new.gif’, ‘new_dis.gif’);
objTab._tbar.addButton(strHeader + ‘del’, 1, ‘Delete’, ‘iconDelete.gif’, ‘iconDelete_dis.gif’);
objTab._tbar.addButton(strHeader + ‘save’, 2, ‘Save’, ‘save.gif’, ‘save_dis.gif’);
objTab._tbar.addButton(strHeader + ‘print’, 3, ‘Print’, ‘print.gif’, ‘print_dis.gif’);
objTab._tbar.addSeparator(strHeader + ‘sep1’,4);
objTab._tbar.addButton(strHeader + ‘search’, 5, ‘Search’, ‘iconSearch.gif’, ‘iconSearch_dis.gif’);
objTab._tbar.addInput(strHeader + ‘filter’, 6, ‘’, 150);
objTab._tbar.addButton(strHeader + ‘searchclear’, 7, ‘Clear’);
objTab._tbar.addSeparator(strHeader + ‘sep2’,8);
objTab._tbar.addButton(strHeader + ‘undo’, 9, ‘Undo’, ‘undo.gif’, ‘undo_dis.gif’);
objTab._tbar.addButton(strHeader + ‘redo’, 10, ‘ReDo’, ‘redo.gif’, ‘redo_dis.gif’);
objTab._tbar.addText(strHeader + ‘msg’, 11, ‘’);
objTab._tbar.disableItem(strHeader + ‘del’);
objTab._tbar.disableItem(strHeader + ‘save’);
objTab._tbar.disableItem(strHeader + ‘print’);
objTab._tbar.attachEvent(‘onClick’, function(pstrBtnId) {
ProcessTBClicks(pstrBtnId);
return true;
}
);
objTab._tbar.attachEvent(‘onEnter’, function(pstrBtnId, pstrValue) {
ProcessFilter(pstrBtnId, pstrValue);
return true;
}
);
objTab._grid.attachEvent(‘onCellChanged’, function(strRowID, lngCell, strNewValue) {
objTab._dirtyflag = true;
objTab._tbar.enableItem(strHeader + ‘save’);
return true;
}
);
objTab._grid.attachEvent(‘onGridReconstructed’, function() {
objTab._dirtyflag = true;
objTab._tbar.enableItem(strHeader + ‘save’);
return true;
}
);
objTab._grid.attachEvent(‘onRowCreated’, function(strRowID, objRow, strXML) {
if (objTab.isLoaded) {
objTab._dirtyflag = true;
objTab._tbar.enableItem(strHeader + ‘save’);
objTab._grid.selectRowById(strRowID, null, true);
}
return true;
}
);
objTab._grid.attachEvent(‘onRowSelect’, function(strRowID) {
if (strRowID.substring(0, 1) == ‘N’)
objTab._tbar.enableItem(strHeader + ‘del’);
else
objTab._tbar.disableItem(strHeader + ‘del’);
return true;
}
);
objTab._grid.attachEvent(‘onDrag’, function(src, tgt) {
objTab._dirtyflag = true;
objTab.tbar.enableItem(strHeader + ‘save’);
if (strHeader == 'bl’) {
var strSType = ‘’;
var strTType = ‘’;
strSType = src.substring(0, 1);
strTType = src.substring(0, 1);
if (strSType == strTType)
objTab._grid.moveRowTo(src, tgt, “move”, “sibling”);
else
if ((strTType == ‘g’) && (strSType == ‘l’))
objTab._grid.moveRowTo(src, tgt, “move”, “child”);
else
if ((strTType == ‘c’) && (strSType == ‘g’))
objTab.grid.moveRowTo(src, tgt, “move”, “child”);
return false;
}
return true;
}
);
}
}
}
function LoadTabInfo(pobjTab, pstrTabID, pstrURL, pfEnableDrag) {
var strWDiv = '’ + pstrTabID + ‘wrap’;
var strCDiv = '’ + pstrTabID + ‘cmd’;
var strGDiv = '’ + pstrTabID + ‘_grid’;
var objWDiv = document.getElementById(strWDiv);
if (!objWDiv) {
var objWDiv = document.createElement(‘div’);
objWDiv.id = strWDiv;
objWDiv.style.width = ‘100%’;
objWDiv.style.height = ‘100%’;
objWDiv.style.display = ‘block’;
document.getElementById(‘pu_stagearea’).appendChild(objWDiv);
var objCDiv = document.createElement(‘div’);
objCDiv.id = strCDiv;
objCDiv.style.width = ‘100%’;
objCDiv.style.height = ‘25px’;
objCDiv.style.display = ‘block’;
objWDiv.appendChild(objCDiv);
objWDiv._tbar = new dhtmlXToolbarObject(objCDiv, ‘standard’);
objWDiv._tbar.setIconsPath(‘img/Toolbar/’);
objWDiv._tbdiv = objCDiv;
var objGDiv = document.createElement(‘div’);
objGDiv.id = strGDiv;
objGDiv.style.width = ‘100%’;
objGDiv.style.height = ‘95%’;
objGDiv.style.display = ‘block’;
objWDiv.appendChild(objGDiv);
pobjTab.setContent(pstrTabID, objWDiv.id);
objWDiv._griddiv = objGDiv;
objWDiv._grid = InitializeGrid(objGDiv.id, pfEnableDrag);
objWDiv._grid.attachEvent(‘onXLE’, function() {objWDiv.isLoaded = true; return true;});
objWDiv._grid.enableMultiselect(false);
objWDiv._grid.setSerializationLevel();
objWDiv.grid.enableUndoRedo();
objWDiv.grid.loadXML(pstrURL);
objWDiv.dirtyflag = false;
return objWDiv;
}
}
function ProcessFilter(pstrButtonID, pstrValue) {
var objWrap = GetContainerByButtonId(pstrButtonID);
if (objWrap.isLoaded) {
objWrap.grid.filterBy(0, pstrValue);
// objWrap.grid.filterBy(1, pstrValue, true);
}
}
function ProcessTBClicks(pstrBtnID) {
var objWrap = GetContainerByButtonId(pstrBtnID);
if (objWrap) {
var strHdr = pstrBtnID.substring(0, 3);
var strCmd = pstrBtnID.substring(3);
var strNewValues = ‘’;
switch (strCmd) {
case ‘new’:
if (strHdr != 'bl’) {
if (strHdr == 'fa’)
strNewValues = ‘New ItemA, ItemA Description’;
if (strHdr == 'pt’)
strNewValues = ‘New ItemB, ItemB Description, 2100, 1’;
if (strHdr == 'bf’)
strNewValues = ‘New ItemC, ItemC Description’;
if (strHdr == 'bi’)
strNewValues = ‘New ItemD, ItemD’;
objWrap._grid.addRow(‘N’ + objWrap._grid.getRowsNum(), strNewValues);
}
else {
}
// scrolling doesn’t work in row select, so force the scrollbar to move up
objWrap._grid.objBox.scrollTop = 15000;
break;
case ‘del’:
var strRows = objWrap._grid.getSelectedRowId();
if (strRows) {
if (confirm(‘Delete Selected Row?’)) {
objWrap.grid.deleteSelectedRows();
objWrap.tbar.disableItem(strHdr + ‘del’);
}
}
break;
case ‘save’:
var strURL = ‘’;
var strFilter = objWrap.tbar.getValue(strHdr + ‘filter’)
// Clear the filter first and see if this works…
if (strFilter.length != 0) {
// Clear filter.
objWrap.tbar.setValue(strHdr + ‘filter’, ‘’);
objWrap.grid.filterBy(0, ‘’);
}
var objHash = new Hash();
var strData = objWrap.grid.serialize();
$(‘xmlout’).value = strData;
objHash.set(‘xml’, encodeURI(strData));
if (strHdr == 'fa’)
strURL = ‘ajax_planutilities_itemA.aspx’;
if (strHdr == 'pt’)
strURL = ‘ajax_planutilities_itemB.aspx’;
if (strHdr == 'bi’)
strURL = ‘ajax_planutilities_itemC.aspx’;
if (strHdr == 'bf’)
strURL = ‘ajax_planutilities_itemD.aspx’;
if (strHdr == 'bl’)
strURL = ‘ajax_planutilities_itemE.aspx’;
//post the data to the server and see
new Ajax.Updater(‘pu_workmsg’, strURL, {
method: ‘post’,
parameters: objHash,
onSuccess: function() {
objWrap_dirtyflag = false;
objWrap_tbar.disableItem(strHdr + ‘save’);
objWrap_tbar.setItemText(strHdr + ‘msg’, $(‘pu_workmsg’).innerHTML);
},
onFailure: function () {
$(‘pu_workmsg’).style.height = ‘120px’;
$(‘pu_workmsg’).style.display = ‘block’;
}
});
break;
case ‘search’:
if (strHdr != 'bl’) {
objWrap._grid.filterBy(0, objWrap._tbar.getValue(strHdr + ‘filter’));
// objWrap._grid.filterBy(1, objWrap._tbar.getValue(strHdr + ‘filter’), true);
}
else
{}
break;
case ‘searchclear’:
objWrap._tbar.setValue(strHdr + ‘filter’, ‘’);
objWrap._grid.filterBy(0, ‘’);
// objWrap._grid.filterBy(1, ‘’, true);
break;
case ‘undo’:
objWrap._grid.doUndo();
break;
case ‘redo’:
objWrap._grid.doRedo();
break;
default:
}
}
}