39
Views
7
Comments
Solved
[OutSystems Data Grid Web] CSS issue with autogenerated grid (AutoGenerateColumns: true)
outsystems-data-grid-web
Web icon
Forge asset by OutSystems
Application Type
Traditional Web

Hello, 


I have an autogenerated grid (AutoGenerateColumns: true), but I would like the width of the column to fit the content of the cells.

For example in this screenshot, you can see that you cannot see the full content of the first column.

I tried to use this: https://www.grapecity.com/wijmo/api/classes/wijmo_angular2_grid.wjflexgrid.html#autosizecolumns 

But I didn't get it to work.

I need some advice on how to implement the autosizecolumns function (this function works on datagrid web, right?) or an other alternative way of making the content of the first column automatically visible.



Thanks in advance!



kr, 

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

Hello @Shirley Grenelle 

In order to achieve that in OutSystems DataGrid Web you can follow these 2 simple steps:

  1. In the screen script, define the function that will call the internal method from Wijmo:

  2. In the Grid AdvancedFormat add the following to call that method once the Grid is loaded:

Hope it helps!

Cheers,
GM 

UserImage.jpg
Shirley Grenelle

OMG, this works perfectly! @Gonçalo Martins thank you so much for your help!

Question: I spent a lot of time looking in the documentation of Wijmo, but I couldn't find any clear way to use this function. Could you point me in the right direction (an url, or a pdf or something else ...) where I can find documentation to use this kind of advanced JavaScript/function for the datagrid? For example: the "onLoadedRows", first time I see this possibility and I read all I could find yesterday about wijmo datagrids :p I am clearly not looking in the right places.

Thanks again!


Kind regards, 


Shirley


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

Hi @Shirley Grenelle 

Glad to know it helped to unblock your use case đŸ˜€
Unfortunately, there's no documentation besides the one available in the official documentation and the sample that contains advanced samples that, together with the source code in the browser development tools are the two resources I always use together with Wijmo's examples in javascript. And it makes sense, given the fact that these are features not available nor maintained directly in the product but yet a way to have an open door for more advanced developers to achieve unsupported features, unblocking them. 

Cheers,
GM

2022-04-08 16-49-21
José Rio

Hi @Shirley Grenelle,

Here how you can use that method you need:

- 1st: Add the OnInitalize event to the DataGrid:


- 2nd, at the GridOnInitialize client action, just place a JS node that receives the GridWidgetId. Inside that JS node, just place the following code:

// Get the dataGrid instance
const myDg = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId);

// Trigger provider method!
myDg.provider.autoSizeColumns();


The result should be:


Hope it help!

PS: Do not forget to close the Post if you consider it answered.

Cheers,
JR

UserImage.jpg
Shirley Grenelle

Hey @José Rio


Thank you for your reply, unfortunately I'm using the OutSystems Data Grid Web because I'm working on a traditional web app and not a reactive app. The proposed solution only works for reactive apps =(

Kind regards, 

Shirley 

2022-04-08 16-49-21
José Rio


Hi @Shirley Grenelle,

I was sleepy, It's only explanation to this stupid confusion I did! :P 
ahaha

Well, lucky of us on having @Gonçalo Martins aboard!

Sorry for the confusion.

Cheers,
JR

UserImage.jpg
Shirley Grenelle

hey @José Rio

No worries, I"m very grateful you tried to help me with my issue! 


Kind regards, 


Shirley

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

Hello @Shirley Grenelle 

In order to achieve that in OutSystems DataGrid Web you can follow these 2 simple steps:

  1. In the screen script, define the function that will call the internal method from Wijmo:

  2. In the Grid AdvancedFormat add the following to call that method once the Grid is loaded:

Hope it helps!

Cheers,
GM 

UserImage.jpg
Shirley Grenelle

OMG, this works perfectly! @Gonçalo Martins thank you so much for your help!

Question: I spent a lot of time looking in the documentation of Wijmo, but I couldn't find any clear way to use this function. Could you point me in the right direction (an url, or a pdf or something else ...) where I can find documentation to use this kind of advanced JavaScript/function for the datagrid? For example: the "onLoadedRows", first time I see this possibility and I read all I could find yesterday about wijmo datagrids :p I am clearly not looking in the right places.

Thanks again!


Kind regards, 


Shirley


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

Hi @Shirley Grenelle 

Glad to know it helped to unblock your use case đŸ˜€
Unfortunately, there's no documentation besides the one available in the official documentation and the sample that contains advanced samples that, together with the source code in the browser development tools are the two resources I always use together with Wijmo's examples in javascript. And it makes sense, given the fact that these are features not available nor maintained directly in the product but yet a way to have an open door for more advanced developers to achieve unsupported features, unblocking them. 

Cheers,
GM

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