DataGrid - How to set row height?

Nikita Kuznetsov

created 10 years ago

Hi,

I'm new to DevExtreme but it looks like the DataGrid control adjusts all the row heights to be equally stretched along the control's height. How would I set a fixed height to all rows? Can I set height separately for any row by index? I know it should be an easy task, but wasn't obvious from my brief search of the supporting docs.

Thanks.

Answers approved by DevExpress Support

DevExpress Support Team

created 10 years ago (modified 2 years ago)

Hi Nikita,

Set the row height in the dxDataGrid.onRowPrepared event handler as shown below:

jQuery
Angular/React/Vue

JavaScript
onRowPrepared(e) {
  if (e.rowIndex % 2 === 0)
      e.rowElement.css({ height: 50});
}

JavaScript
onRowPrepared(e) {
  if (e.rowIndex % 2 === 0)
      e.rowElement.style.height = "50px";
}

Show previous comments (4)

Puneet Dhingreja 8 years ago

Thanks , it worked

Eric Comte Marois 6 years ago

What about when the row has a focused editor?

DevExpress Support Team 6 years ago

Hello David,

I've created a separate ticket on your behalf (T701751: DataGrid - How to set row height). It has been placed in our processing queue and will be answered shortly.

AndréFM 5 years ago

Hi, I just used the demos from website and tried to tweak them, but couldn't find a way to make the grid rows more compact.
I noticed that increase the height is not an issue using the event handler above, but it seems to have a minimum height.

IMO there is still a lot of pixel space which I would like to remove. I know for a "normal" grid application the standard size is OK, but for certain scenarios I would need it more compact. See screenshots attached for an idea

Compact Form.png Grid.png

DevExpress Support Team 5 years ago

Hello,

I've created a separate ticket on your behalf (T879889). It has been placed in our processing queue and will be answered shortly.

Paul 4 years ago

Is there a good CSS override for this? Seems like using onRowPrepared is a resource hog? It has to loop through every row just to place a height?

DevExpress Support Team 4 years ago

Hello,

I created a separate ticket on your behalf: (T981017: DataGrid - How to set height of each rows?). We placed it in our processing queue and will process it shortly.

DataGrid - How to set row height?

Answers approved by DevExpress Support

Recently viewed tickets