207
Views
7
Comments
Solved
[OutSystems Data Grid] OutSystem Data Grid - Remove Column Picker
outsystems-data-grid
Reactive icon
Forge asset by OutSystems
Application Type
Reactive
Service Studio Version
11.53.16 (Build 61265)

Hi All,

How can we remove/hide the column picker on Grid Reactive.?

Regards,

Vinod

2022-09-29 13-59-54
AndreRocha
Solution

Hey @Vinod Kumar
I was trying to do the same thing on my project and achieved it with this code in the OnInitialize event of the grid:


var gridObj = GridAPI.GridManager.GetGridById($parameters.GridId);
gridObj.provider.headersVisibility = 1;

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Vinod Kumar 

In order to achieve that you can use our API to achieve that use case.

For that you can follow this approach:

  1. Using the OnInitialize event from the Grid block
  2. Add the following script on a Js node

OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId).features.columnPicker.dispose(); 
var colPick = document.querySelector('.column-picker-icon').parentElement if(colPick) { colPick.remove(); }



Just FYI, we also have in our backlog a task to make that an option, but I can't provide any ETA.

Cheers,
GM

2023-03-08 10-32-19
Vinod Kumar R

Thanks Goncalo,

Above mentioned Js hided the column picker, but how can i hide the entire column since without rownumber and column picker the first column is not going to be usefull.


 

Regards,

Vinod

2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @Vinod Kumar 

Have you tried to explore the API? Can you share your findings?
That use case for a Grid is strange since is more usual on tables/lists. Every spreadsheet has that column to allow selecting the whole row.


2023-03-08 10-32-19
Vinod Kumar R

Hello @Gonçalo Martins

The use case is we should be able to get closer to tables/lists UI with Grid functionalities like  column move, sort etc.

Regards,

Vinod


2022-11-12 11-28-30
Gonçalo Martins
Staff

Could you find that use case in Wijmo documentation?
It would help to have that because if Wijmo doesn't have that, Data Grid won't have it as well.
You could use CSS but a lot of handlers will still exist since you'll not be able to select a row and so on.

But it seems that what you need is a list that you need to customize in order to have draggable columns since all the other functionalities you mentioned are already available on the table record widget (platform widget, not UI component from OutSystems UI)

2022-09-29 13-59-54
AndreRocha
Solution

Hey @Vinod Kumar
I was trying to do the same thing on my project and achieved it with this code in the OnInitialize event of the grid:


var gridObj = GridAPI.GridManager.GetGridById($parameters.GridId);
gridObj.provider.headersVisibility = 1;

2025-12-04 09-01-03
Kiet Phan
Champion

FYI,

If you want to hide both row header and column header. Set it to 4.

var gridObj = GridAPI.GridManager.GetGridById($parameters.GridId);
gridObj.provider.headersVisibility = 4; 

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