[Data Grid Web] [Data Grid Web] i want to remove column picker from  the grid
Question
Forge component by OutSystems R&D

Hi

column picker( the left column to make columns visible/invisible) is not needed for my project.

I want to remove or hide it. How can I do it?

Solution

Hello @R R

If you want to remove column picker from the grid with DataGrid Traditional version, you can try the following approach.

1. Create a new webblock and put the javaScript below.

var removeColumnPicker = function(gridId) {
    var gObj = GridOS.ComponentUtils.getGridObjectById(gridId);
    gObj.grid.formatItem.addHandler(function (s, e) {
        var _panel = e.panel;
        var _row = e.row;
        var _col = e.col;
        var _cell = e.cell;
        
    if (_panel.cellType == wijmo.grid.CellType.TopLeft) {
        if (_row === 0 && _col === 0) { // For the top left cell
            if (e.cell.innerHTML.indexOf('column-picker-icon') !== -1) {
                e.cell.innerHTML = e.cell.innerHTML.replace(/column-picker-icon/g,'');
                
                 // The following will also work
                //  e.cell.innerHTML = "";
            };
        }
    }     
 });
}

2. Put JS webblock from DataGridExample inside the newly created webblock.
3. In the JS webblock's (from DataGridExampl) javaScript, put the following script.

"removeColumnPicker('" + EncodeJavaScript(GridWidgetId) + "');"

4. Place the newly created webblock to the screen.

The Column picker will not be displayed and the functionality will also be disabled.

Please let me know if this helps.

Regards
Alam

Hello R R 

Add this JS to OnInitialize event action from the grid block to remove the column

GridAPI.GridManager.GetGridById($parameters.WidgetId).provider.headersVisibility = 1; 


Thank you !!

I will try it.

Hi R R, 

Any update regarding the solution ? Did it solve your issue ?

Regards 

Harika R


Hello @Ramadalai

I think your suggested code is for DataGrid Reactive version.
He is asking about DataGrid Traditional Version I guess.

Solution

Hello @R R

If you want to remove column picker from the grid with DataGrid Traditional version, you can try the following approach.

1. Create a new webblock and put the javaScript below.

var removeColumnPicker = function(gridId) {
    var gObj = GridOS.ComponentUtils.getGridObjectById(gridId);
    gObj.grid.formatItem.addHandler(function (s, e) {
        var _panel = e.panel;
        var _row = e.row;
        var _col = e.col;
        var _cell = e.cell;
        
    if (_panel.cellType == wijmo.grid.CellType.TopLeft) {
        if (_row === 0 && _col === 0) { // For the top left cell
            if (e.cell.innerHTML.indexOf('column-picker-icon') !== -1) {
                e.cell.innerHTML = e.cell.innerHTML.replace(/column-picker-icon/g,'');
                
                 // The following will also work
                //  e.cell.innerHTML = "";
            };
        }
    }     
 });
}

2. Put JS webblock from DataGridExample inside the newly created webblock.
3. In the JS webblock's (from DataGridExampl) javaScript, put the following script.

"removeColumnPicker('" + EncodeJavaScript(GridWidgetId) + "');"

4. Place the newly created webblock to the screen.

The Column picker will not be displayed and the functionality will also be disabled.

Please let me know if this helps.

Regards
Alam

@Ramadalai 

sorry to reply late.

The solution is worked for DataGrid Reactive, and I didn't find the OnInitialize event action in traditional web.

Thank you.

@Alam 

Thank you! It is worked.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.