503
Views
9
Comments
Solved
[OutSystems Data Grid] Outsystems Datagrid Column auto adjust
outsystems-data-grid
Reactive icon
Forge asset by OutSystems

Hello,


I am new to outsystems. I am currently using a datagrid in my screen and I have a few questions that I hope someone can help answer:

1) Am I able to format the datagrid in a way that there is no empty space to the side. Is there a setting where I can get the columns shown to fill the empty space

2) Datagrid allows the user to drag and drop columns to create groups. Is there a way to group it by the Month column for example by default? So everytime i launch the application, the datagrid will automically be grouped by Month and I dont have to manually drag the month column.

3) The datagrid in outsystems service studio looks like the image shown below. Is there a way for it to show the columns in the datagrid similar to how it would look like after publishing?



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

Hello @Low Ding En 

Let me try to answer one by one

  1. You can fill in the space by using the OnInitialize of the Grid (not the screen) in the following script:

    OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider.columns.forEach( function(col) { col.width = '*'; });

  2. You can achieve that by using the client action AddColumnsToGroupPanel (take a look at all available APIs when you have these questions here)

  3. This is an OutSystems block so you can't do more than use the column blocks instead of the autogenerated Grid since in design time you don't have any data being fetched.

Hope it helps!

Cheers,
GM

UserImage.jpg
Low Nico

Hello,

Thank you so much for the clarification! I appreciate it!

UserImage.jpg
Low Nico

Hello,

Sorry, for further clarification,

1) For this script that I will be adding to the OnInitialise event of the grid:

OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider.columns.forEach( function(col) { col.width = '*'; });

How am I able to get the GridWidgetId? And am i suppose to put this in a Javascript node in a event handler?


2) Same question here, how am I able to find the GridWidgetId and the ColumnWidgetIds?

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

Hello @Low Ding En 

For both scenarios, like in any element in OutSystems language, you just need to provide a name to the element and it will be available on every expression editor:

UserImage.jpg
Low Nico

Hello,

Thank you again. Sorry again for the many questions!

1) Am I doing it right? I have rename the grid to Savings but it still doesnt seem to work.


2) I assume that the  AddColumnsToGroupPanel client action doesnt work with the autogenerated Grid? So I had have manually add the different columns instead of using a autogenerated grid?

2022-11-12 11-28-30
Gonçalo Martins
Staff
  1. No that's not correct! This is nothing related to the Grid, it's simply passing a parameter like any other:

  2. Exactly, this works with column blocks. All advanced and extended features are only applicable to Grids using column blocks


UserImage.jpg
Low Nico

1) Thank you so much! Its working now! I am new to outsystems and this is my first time working with Javescript! Sorry for taking so long to understand this!

2) One last question! For the column blocks, I am struggling with getting the binding portion:

 I understand it needs to be in the format of entityname.fieldname but I dont have any option when selecting it. What am i suppose to do?


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

The binding of a column is the field that will be mapped into this column. Remember that the Datagrid receives JSON so the binding is for instance <EntityName>.<AttributeName> - e.g. "User.Name" will be binding to a column where you want to show the user's name if you're listing the list of Users.

If you're new to OutSystems and using the Data Grid I would advise taking the learning paths to learn how to work with the platform since the Data Grid is a more advanced use case. For the Data Grid, I would really suggest checking the Sample that can be found here, where you can see a lot of information about the features and where you have access to the working examples to learn how to do it.

Cheers and good luck on this journey (welcome :) )

UserImage.jpg
Low Nico

Will do! Thanks again for taking the time to help me with this! I really appreciate it!

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