593
Views
7
Comments
Solved
[OutSystems Data Grid] Add a new row below in Data Grid in Reactive App.
outsystems-data-grid
Reactive icon
Forge asset by OutSystems

How to add a new row in last  in Data Grid in Reactive App.

I am using forge component DataGrid 

I am using data grid client action add row on a click of a button 

but instead of adding row in the last it adding new row above 

but i want it to add row in the last of the grid 

how can i do that 


2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Sourabh,

For your requirement, I found a solution (not tested thoroughly) which you can try. 

  • Create a global Client action with an input parameter i.e. GridId,
  • In the client action flow, define a JS node with the below script.

JS To add DataGrid Bottom row

var gridObj = GridAPI.GridManager.GetGridById($parameters.GridId);
var items = new Array(1).fill(_.cloneDeep({}));

if (gridObj) {
    gridObj.dataSource.addRow(gridObj.rowMetadata._grid.rows.length + 1, items);
}

Check this demo: AddBottomRow_POC

I hope this helps you!


Kind regards,

Benjith Sam

RWA_Lab_AddBottomRow_DataGrid.oml
UserImage.jpg
Sourabh Chaturvedi

Thank you 

UserImage.jpg
Sourabh Chaturvedi

sir oml is not downloading properly can you 

share it again please 

2021-03-18 21-03-15
Benjith Sam
 
MVP

Hi Sourabh,

I'm able to download the previous attachement don't know what went wrong. Anyways, refer to the attached oml.


Kind regards,

Benjith Sam

RWA_Lab_AddBottomRow_DataGrid.oml
2019-12-16 14-44-15
Rúben Santos

Hi Sourabh,

Currently there's no simple way to achieve this. If this is an important feature for your project I suggest duplicating the OutSystems Data Grid extension and then try to adapt the AddNewRows function to meet your needs, you will find this function in the Gridframework JS file.

Hope it helps.

UserImage.jpg
Sourabh Chaturvedi

Thank you

2021-03-18 21-03-15
Benjith Sam
 
MVP
Solution

Hi Sourabh,

For your requirement, I found a solution (not tested thoroughly) which you can try. 

  • Create a global Client action with an input parameter i.e. GridId,
  • In the client action flow, define a JS node with the below script.

JS To add DataGrid Bottom row

var gridObj = GridAPI.GridManager.GetGridById($parameters.GridId);
var items = new Array(1).fill(_.cloneDeep({}));

if (gridObj) {
    gridObj.dataSource.addRow(gridObj.rowMetadata._grid.rows.length + 1, items);
}

Check this demo: AddBottomRow_POC

I hope this helps you!


Kind regards,

Benjith Sam

RWA_Lab_AddBottomRow_DataGrid.oml
UserImage.jpg
Sourabh Chaturvedi

Thank you 

UserImage.jpg
Sourabh Chaturvedi

sir oml is not downloading properly can you 

share it again please 

2021-03-18 21-03-15
Benjith Sam
 
MVP

Hi Sourabh,

I'm able to download the previous attachement don't know what went wrong. Anyways, refer to the attached oml.


Kind regards,

Benjith Sam

RWA_Lab_AddBottomRow_DataGrid.oml
2021-02-21 00-09-48
Itqon

@Benjith Sam
Hi Benjith

Using the JS, the added row on the bottom is not marked as dirty. How to make it as dirty mark ?

Thank you,
Itqon

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