dhtmlxAccordion multimode open one cell and close others

Suite and Optimus Suite 5
#1

Hi is there any way to get all cells closed but one if the grid has multimode enabled?

I tried with following functions (most of the code I got it from ‘setIcon’ function myAcc.cells(id).setIcon(“icon.png”); ):

dhtmlXAccordionCell.prototype.setMaximizeCell = function(icon) {
    var acc=this.acc;
    var _cell = this;
    var dhx_cell_hdr_max = ' position:absolute; top:6px; right:4px; width:16px; height:16px; margin-right:20px; cursor:pointer;';
    var t = this.cell.childNodes[this.conf.idx.hdr];
    if (t.lastChild.className != "dhx_cell_hdr_max") {
        t.lastChild.className += " dhx_cell_hdr_max";
        var k = document.createElement("IMG");
        k.className = "dhx_cell_hdr_max";
        k.style.cssText += dhx_cell_hdr_max;

        k.addEventListener('click',function (e) {
            // avoid event propagation so that cell is not clicked and close/open cell is not triggered.
            e = e||event;
            if (typeof e.stopPropagation != "undefined")e.stopPropagation();
            else e.cancelBubble = true;

            acc.forEachItem(function (cell) {
                cell.close();
            });
            _cell.open();
        });

        t.insertBefore(k,null); // insert last;
        k = null;
    }
    t.lastChild.src = this.acc.conf.icons_path+icon;
    t = null;
};

and :

dhtmlXAccordionCell.prototype.setMaximizeCell = function(icon) {
    var acc=this.acc;
    var _cell = this;
    var dhx_cell_hdr_max = ' position:absolute; top:6px; right:4px; width:16px; height:16px; margin-right:20px; cursor:pointer;';
    var t = this.cell.childNodes[this.conf.idx.hdr];
    if (t.lastChild.className != "dhx_cell_hdr_max") {
        t.lastChild.className += " dhx_cell_hdr_max";
        var k = document.createElement("IMG");
        k.className = "dhx_cell_hdr_max";
        k.style.cssText += dhx_cell_hdr_max;

        k.addEventListener('click',function (e) {
            // avoid event propagation so that cell is not clicked and close/open cell is not triggered.
            e = e||event;
            if (typeof e.stopPropagation != "undefined")e.stopPropagation();
            else e.cancelBubble = true;

            acc.forEachItem(function (cell) {
                    if(cell.isOpened())
                        acc._hdrClick(cell.getId());
            });
            if(!_cell.isOpened())
                acc._hdrClick(_cell.getId());
        });

        t.insertBefore(k,null); // insert last;
        k = null;
    }
    t.lastChild.src = this.acc.conf.icons_path+icon;
    t = null;
};

I also tried an external function like that (in this example the accordion has only 4 cells a,b,c,d) and this didn’t work either:

function openCellCloseOther(cellId){
    accordionBarraEines.cells('a').close();
    accordionBarraEines.cells('b').close();
    accordionBarraEines.cells('c').close();
    accordionBarraEines.cells('d').close();
    accordionBarraEines.cells(cellId).open();
}

In all this cases, it almost works correctly but something fails. The opened cell does not expand to its maximum height, or all cells stay closed.

Thanks ind advance.

#2

Can you please provide a bit more info, why you need such a functionality? The behavior when all cells except of one are closed is a single mode, so why not use it instead of multimode in the first place?

#3

Hi,
thanks for your quick reply.

I need to have multiple cells opened at the same time.
I want to add this functionality to be able to close them all and let one open (kind of a shortcut, so i don’t need to close all cells one by one and let the one i want open).

Thanks.

#4

Hi,
meanwhile, that’s the best solution found :

dhtmlXAccordionCell.prototype.setMaximizeCell = function(icon) {
    var acc=this.acc;
    var _cell = this;
    var dhx_cell_hdr_max = ' position:absolute; top:6px; right:4px; width:16px; height:16px; margin-right:20px; cursor:pointer;';
    var t = this.cell.childNodes[this.conf.idx.hdr];
    if (t.lastChild.className != "dhx_cell_hdr_max") {
        t.lastChild.className += " dhx_cell_hdr_max";
        var k = document.createElement("IMG");
        k.className = "dhx_cell_hdr_max";
        k.style.cssText += dhx_cell_hdr_max;

        k.addEventListener('click',function (e) {
            // avoid event propagation so that cell is not clicked and close/open cell is not triggered.
            e = e||event;
            if (typeof e.stopPropagation != "undefined")e.stopPropagation();
            else e.cancelBubble = true;

            acc.conf.multi_mode = false;// workarround // temporally disable multimode.
            acc.forEachItem(function (cell) {
                cell.close();
            });
            _cell.open();
            acc.setSizes();
            acc.enableMultiMode();
        });

        t.insertBefore(k,null); // insert last;
        k = null;
    }
    t.lastChild.src = this.acc.conf.icons_path+icon;
    t = null;
};

There is a little workarround; I disable the multimode temporally , close all cells, open the one i clicked, setSizes (for visual effects), and re-enable multimode.

However i would prefer to find a better solution, if there is a better way.

Thanks.

#5

Hi, did you find some better solution?

Thanks.

#6

Hi,

There are no simple way to achieve such result and your solution has not any serious drawbacks.
We will consider adding a similar functionality as a part of standard API in next builds.