Hi @KATHIRESAN MARKANDAN ,

Have you gone thought this document -https://outsystemsui.outsystems.com/OutSystemsDataGridSample/GroupColumn

Hi @KATHIRESAN MARKANDAN

For achieving this scenario use the Data Grid's built-in row grouping feature. The grid supports a Group Panel where users can drag a column and group rows by that column.

Steps:

1 Select your Data Grid.

2 Set HasGroupPanel = True.

3 Publish the application.

Run the screen and drag the source column (for example, Country) into the grouping area.

The grid will automatically group rows according to that column's values.

Hi @KATHIRESAN MARKANDAN ,

You can achieve this with a custom Wijmo MergeManager. Wijmo calls this restricted merging.

The standard MergeColumnCells action merges cells based only on their own value.

You can use the following JS in the OnInitialize event of the grid, you will need the GridWidgetId and column IDs of your Country & Country Threat columns. In order to get those IDs you can name the columns and then use the IDs from the Widget folder.

1. const grid = OutSystems.GridAPI.GridManager
2. .GetGridById($parameters.GridWidgetId).provider;
3. const countryColumn = OutSystems.GridAPI.ColumnManager .GetColumnById($parameters.CountryColumnWidgetId).provider;
4. 
   
5. const threatColumn = OutSystems.GridAPI.ColumnManager
6.     .GetColumnById($parameters.CountryThreatColumnWidgetId).provider;
7. 
   
8. class CountryMergeManager extends wijmo.grid.MergeManager {
9.     getMergedRange(panel, row, column, clip = true) {
10.         const isDataCell =
11.             panel.cellType === wijmo.grid.CellType.Cell;
12. 
    
13.         const isManagedColumn =
14.             column === countryColumn.index ||
15.             column === threatColumn.index;
16. 
    
17.         if (!isDataCell || !isManagedColumn) {
18.             return super.getMergedRange(panel, row, column, clip);
19.         }
20. 
    
21.         const range = new wijmo.grid.CellRange(row, column);
22.         const countryValue =
23.             panel.getCellData(row, countryColumn.index, false);
24.         const cellValue =
25.             panel.getCellData(row, column, false);
26. 
    
27.         while (
28.             range.row > 0 &&
29.             panel.getCellData(
30.                 range.row - 1,
31.                 countryColumn.index,
32.                 false
33.             ) === countryValue &&
34.             panel.getCellData(
35.                 range.row - 1,
36.                 column,
37.                 false
38.             ) === cellValue
39.         ) {
40.             range.row--;
41.         }
42. 
    
43.         while (
44.             range.row2 < panel.rows.length - 1 &&
45.             panel.getCellData(
46.                 range.row2 + 1,
47.                 countryColumn.index,
48.                 false
49.             ) === countryValue &&
50.             panel.getCellData(
51.                 range.row2 + 1,
52.                 column,
53.                 false
54.             ) === cellValue
55.         ) {
56.             range.row2++;
57.         }
58. 
    
59.         return range.isSingleCell ? null : range;
60.     }
61. }
62. 
    
63. grid.allowMerging = wijmo.grid.AllowMerging.Cells;
64. countryColumn.allowMerging = true;
65. threatColumn.allowMerging = true;
66. grid.mergeManager = new CountryMergeManager();

I attached a sample OML with the implementation.

Result: