Right Click on column header to hide or show columns

PHPMaker User Submitted Tips (PHPMaker)
1

Place the following code in client script > List Page > Startup Script (v2022)

$( "<img id='resizecolumn' src='phpimages/shrinkh.gif' title='Right Click on column header to hide or show columns'>" ).insertBefore( ".ew-message-dialog.d-none" );

$('th').on("contextmenu",function(){
// Toggle the image
    if ($("#resizecolumn").attr("src")=="phpimages/shrinkh.gif") { // You may put the images into any folder
        $("#resizecolumn").attr("src","phpimages/extendh.gif");
    }
    else {
        $("#resizecolumn").attr("src","phpimages/shrinkh.gif");
    }
// Toggle columns 
    let thetable=$(this).parents("table");
    let colheader = thetable.find("tr:first th");
    let namestohide =["columnNametoHide1","columnNametoHide2","columnNametoHide3","columnNametoHide4","columnNametoHide5"]
    colheader.each(function(){
        for (let names of namestohide) {
            if ($(this).text().indexOf(names)!=-1){
                thetable.find("th:nth-child("+($(this).index()+1)+")").toggle();
                thetable.find("td:nth-child("+($(this).index()+1)+")").toggle();
            }
        }
        });
})
2

I tried your code using demo2022 project in orders table for List Page, and I put the code in Startup Script of the List page as follows:

$( "<img id='resizecolumn' src='images/shrinkh.png' title='Right Click on column header to hide or show columns'>" ).insertBefore( ".ew-message-dialog.d-none" );

$('th').on("contextmenu",function(){
// Toggle the image
    if ($("#resizecolumn").attr("src")=="images/shrinkh.png") {
        $("#resizecolumn").attr("src","images/extendh.png");
    }
    else {
        $("#resizecolumn").attr("src","images/shrinkh.png");
    }
// Toggle columns 
    let thetable=$(this).parents("table");
    let colheader = thetable.find("tr:first th");
    let namestohide =["OrderID","CustomerID"];
    colheader.each(function(){
        for (let names of namestohide) {
            if ($(this).text().indexOf(names)!=-1){
                thetable.find("th:nth-child("+($(this).index()+1)+")").toggle();
                thetable.find("td:nth-child("+($(this).index()+1)+")").toggle();
            }
        }
    });
});

Unfortunately, it does not work properly. No Javascript error message.

After right-clicking on OrderDate column, then the images are toggling as expected, but that OrderDate column does not hide. It always shows.Thoughts?

3

hi,
namestohide is the text description of the column

If you change the following line to
let namestohide =[“Order ID”,“Customer ID”];it works.

Thanks/Rex

4

Thanks for the info. Now it works.