Search code examples
griddhtmlx

colspan and collapse for the same header - possible?

I am currently developing a table using dhtmlx grid. I need to achieve the below table construction. I tried many way to achieve this but I wasn't able to apply the colspan and collapse for the same td element in the header.

Please check the attachment and help me to get the exact output.

enter image description here

Solution

  • Such output is not available using the column_collapse extension. But you can place any html content in your header and hide the required columns on clicking it. As a draft:

        function hiding(){
    if (!collapse){
    myGrid.setColumnHidden(2,true)
    myGrid.setColumnHidden(3,true)
    myGrid.setColumnHidden(4,true)
    document.getElementById("collapse").value="show"
    collapse=true
    }
    else
    {
            myGrid.setColumnHidden(3,true)
    myGrid.setColumnHidden(2,false)
    myGrid.setColumnHidden(3,false)
    myGrid.setColumnHidden(4,false)
    document.getElementById("collapse").value="hide"
    collapse=false
    }
}

        myGrid.setHeader("<input type='button' id='collapse' value='hide' onclick='(arguments[0]||window.event).cancelBubble=true;hiding()'>,#cspan,#cspan,#cspan,#cspan");
        myGrid.attachHeader("1,2,3,4,5")