[OutSystems Data Grid] Add a new row below in Data Grid in Reactive App.
data-grid-reactive
Reactive icon
Forge component by Platform Maintenance

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 


mvp_badge
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

Thank you 

sir oml is not downloading properly can you 

share it again please 

mvp_badge
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

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.

Thank you

mvp_badge
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

Thank you 

sir oml is not downloading properly can you 

share it again please 

mvp_badge
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

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