Hide the column if the checkbox is checked

[Tejas]

Issue1. how can I hide the Unit Of measure column from the grid if the checkbox is checked.

Please refer the below link:

https://jsfiddle.net/virendraparade01/bfgumzo2/

code:
Show Unit Of measure:  <input type="checkbox" name="mycheckbox" id="mycheckbox" /> <br>
<div id="grid_editing" style="margin: auto;"></div>



    $(function () {
 

   var data = [
            { "id": "TH-P-P150-4", "UnitOfMeasure": "Kg", "Description": "HEX BOLT" },
            { "id": "TH-P-P150-5", "UnitOfMeasure": "PC", "Description": "PEN" },
        ];


        obj = {
            dragColumns: { enabled: false },
            hwrap: false,
            resizable: true,
            rowBorders: false,
            autoRow: false,
            rowHt: 50,
            trackModel: { on: true },
            scrollModel: { autoFit: true },
            editor: { select: true },
            colModel: [
            
                {title: "<span title = 'ITEM'>ITEM</span>", dataIndx: "id", width: 120, },
                { title: '<span title = "UNIT OF MEASURE">UNIT OF MEASURE</span>', width: 100, dataType: "string", dataIndx: "UnitOfMeasure" },
                { title: '<span title = "DESCRIPTION">DESCRIPTION</span>', width: 100, dataType: "string", align: "center", dataIndx: "Description", },
            ],

           dataModel: { data: data },

            postRenderInterval: -1, //synchronous post render.
            pageModel: { type: "local", rPP: 20 },
        };



        var grid = pq.grid("#grid_editing", obj);

    });

Issue2: Incase any of the column is hidden over here and I copy paste, then the data gets pasted also in hidden column how can I avoid it.

I kindly request you to reply as earliest as possible you can.

Thank you.

[Tejas]

Hello Paramvir.. Could u plz let me know for the soln for above..

[paramvir]

Please use grid.Columns().hide() API to show/hide columns.

https://paramquery.com/pro/api#method-Columns

Code: [Select]

$("#mycheckbox").click(function(evt){
        var val = evt.target.checked,
          obj = {};

        obj[val? 'diHide': 'diShow'] = ['UnitOfMeasure']
        grid.Columns().hide(obj)
})

https://jsfiddle.net/fj52hv6m/

[Tejas]

yeah the above solution is working and copy paste is working thankx sir.