Hi @Mihai Melencu  thanks for reply

I need some space like the screenshot below.

Is this possible in DataGrid?

Hi,

I've reviewed the documentation and searched through both the OutSystems and Wijmo FlexGrid forums, but I couldn’t find anything directly addressing this. The closest workaround I’ve found is increasing the row height, as I mentioned in my initial post. 

You might wanna try your luck by posting your issue in the wijmo forum: General Discussion | MESCIUS Forums .

Hi @Mihai Melencu 

Thanks for reply.

I don't want to increase the row height ,I want to give space between one row and another.

Hello @Vijay Malviya 

The way to achieve that requires some complex custom JavaScript that I was able to simplify to the following:

- Add the following code in a JSNode in Grid’s OnInitialize event handler:

const theGrid = OutSystems.GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider;

var margin = 10; // row spacing sizevar 
rowPositionDictionary = theGrid.rows.map((row) => row.pos);
var originalTotalSize = theGrid.rows._szTot;

theGrid.updatingView.addHandler(() => {    
    var totalMargin = 0;    
    theGrid.rows.forEach(function (row, index) {        
        row._pos = rowPositionDictionary[index] + margin * (index + 1); // add margin top to each row        
        totalMargin += margin; // calculate total margin    
    });    

theGrid.rows._szTot += originalTotalSize + totalMargin; // adjust total size of rows});

// Being $parameters.GridWidgetId the Grid block identifier

To improve the look, you can add the following CSS:

.wj-cell { 
    border-top: var(--datagrid-cell-border-bottom);
}

Here's the final result:

Hope it helps!

Cheers,
GM

Hi Goncalo Martins,

I am attaching this OML. I have tried to implement the same but I am facing other issue that is when I am adding javascript then after that only one row is visible and all the rows are getting hide data is showing on the browser when we inspect it but not showing in the screen. 

This is before adding the javascript

This is after adding the javascript

Hi @Gonçalo Martins 

Thanks for replying, after implementation I am also facing the same issue as Aditi, Please suggest what else we can do.

Thanks

Vijay M.

Hello @Vijay Malviya 

Not sure why (didn't have time to look into it), but it seems that it only happens when inside a block. If directly on the screen, it works as expected. So I would start from that.

Cheers,
GM

Hi Goncalo Martins,

I am facing one more issue I have given the border to the bottom of each row but in last row that border is not visible also I need some space between the table and scroll that is also not working. 

What have you found so far? And where's an oml with that being replicated?