49
Views
3
Comments
Solved
[OutSystems Data Grid] Hide Certain Autogenerated Columns On Initialize
data-grid-reactive
Reactive icon
Forge component by Gonçalo Martins

Hi, I have a grid table with 50+ columns and currently the columns are autogenerated based on the data from an entity. However, I have a two extra conditions that I want to apply:

  1. Forbid certain columns to show at all. For example, forbid 3 columns from showing, and user won't be able to see the columns as options in the column picker as well.
  2. Show only certain columns on default. For example, show only 10 columns on initialize and user can still show/hide the remaining columns in the column picker (except the forbidden one).

Can these two conditions be done? I think it is impractical to create all required columns and set their visibilities manually since there are a lot of columns. My assumption is that I need to write custom JS code, but I am not sure how to. Or is there any other workaround to achieve this? 

Also I have come across some discussion that shows JS code snippet for manipulating the grid table, such as this

Does anyone know where can I find the documentation for the GridAPI?

Thank you.

Solution

Hello @Max Chia 

From the description you could create your own structure that will be bound to the Data Grid in order to map only the attributes you need and add as well the two extra columns that you need to populate, doing the logic before calling ArrangeData server action in your fetch data action.

About having to manually set visibility, we always try to promote the usage of the column blocks since they will be easier to use and have more customizations - our focus is the low code experience so autogenerated columns are just a plus we provide to cover other use cases but aren't the focus of this component, so to achieve some use cases you'll need to extend the code by using Javascript code. 
To access the GridAPI you have our public GitHub repository but the best approach is always to check how to do it in Wijmo's documentation (which is the underlying provider) and then explore the code in the console, by typing OutSystems.GridAPI.

If you have more specific use cases and an oml to share we can try to help where you're having more struggles

Cheers,
GM

Hello...I am sorry if this is a stupid question but what do you mean by "explore the code in the console".  Which console are you referring to?

Hi @Jason Beatty ,

this is a reference to the browser dev tools.  One of them is the console, where you can examine logs, but also examine data / elements in your application.

One of the ways to get to them, is right clicking and choosing 'inspect' in a web page in your browser, it will open lots of tools on several tabs, one of them is the console.

this is not outsystems, so you can google it or search in youtube or ask ChatGPT for tips and tutorials.  All browsers have them, they all work and look slightly different.

Dorine


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