BuyLog In
Ticket T1285876
Visible to All Users

DxDataGrid css/js to change row height and minimize wasted space

created 10 days ago

I build a DataGrid using RAZOR ( if that matters ).

I'd like to minimize the padding or wasted space around the content. This Grid will be used for display purposes mainly. Not for editing.

Clipboard-File-1.png

I already tried

// https://supportcenter.devexpress.com/ticket/details/t233080/datagrid-how-to-set-row-height function dgOnRowPrepared(e) { e.rowElement.css({ height: 15, padding: 0 }); }

And it works to set the height to 50 pixels … but not tighter to 15 pixels. Also changed the font using this:
<style> .dx-datagrid{ font:9px verdana; margin: 0px; padding: 0px; }

Any CSS / js solution to removing this wasted white space ( yes, it is green on this grid ).

Sign in to comment on this post

Answers approved by DevExpress Support

created 7 days ago

Hello Brian,

Thank you for the image and code snippets.

Several CSS properties can impact an element's height: ChatGPT list. I examined each property and found that, besides height and padding, you need to override the line-height property to decrease the row height (refer to the attached video).

I hope this helps.

    Comments (3)
    BL BL
    Brian Lara 1 7 days ago

      THANK YOU

      ( nice video too )

      I'm sure this will help many others.
      Best Regards. Have a great day.

      BL BL
      Brian Lara 1 6 days ago

        FollowUp. As mentioned, most of the fields are display (read only) but a couple may be editable. Especially this one lookup column.

        The issue is that on edit mode, the height once again changes. Managed to change the font but the height issue remains as can be seen on the space between the 'No's on the prior column.

        Clipboard-File-1.png

        Mark Ramirez (DevExpress Support) 6 days ago

          Hello Brian,

          Thank you for the image.

          dxDataGrid has no built-in API to adjust the row height directly. You need to manually specify the required row height via CSS. To accomplish this task, you can use the same technique I illustrated in the video earlier. The idea is to examine elements and determine which CSS rules affect their height (see Examine CSS). I attached another video that shows which elements and CSS properties need to be modified to reduce the row height in edit mode.

          Regards,
          Mark

          Sign in to comment on this post

          Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

          Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.