BuyLog In
Ticket T1279983
Visible to All Users

Bootstrap dropdown menu clipped in DxGrid cell

created 2 days ago

Just finished migrating the DxDataGrid in our application to DxGrid.

Example:

Razor
<DxGrid Data="@dataSource"
  CssClass="simple-grid"
  ShowFilterRow="false"
  PagerVisible="false"
  AllowSelectRowByClick="false"
  SelectionMode="GridSelectionMode.Single"
  PageSize="50">
  <Columns>
    <DxGridDataColumn TextAlignment="GridTextAlignment.Left" FieldName="@nameof(TicketInListViewModel.Id)" Caption="Ticket">
      <CellDisplayTemplate>
        <TicketInList Ticket="@((TicketInListViewModel)context.DataItem)" DataWasStored="@(async () => await handleDataWasStored())" BackUrl="@BackUrl"/>
      </CellDisplayTemplate>
    </DxGridDataColumn>
  </Columns>
</DxGrid>

I'm using a CellDisplayTemplate to completely provide my own content for each row.

In each row I'm using a Bootstrap Dropdown menu.

This worked perfectly well in DxDataGrid.

After migrating to DxGrid I discovered that the menu is clipped to the bounds of the owning cell of the DxGrid.

I was able to achieve some improvements by defining some custom CSS:

Code
.simple-grid {
    &.dxbl-grid {
        .dxbl-grid-table {
            > tbody > tr > td,
            > thead > tr > th {
                overflow: visible !important;
            }
        }
    }
}

This works for all cell except the last one, where it seems other parent elements also have clipping configured (I assume some overflow: hidden in the owning table or even higher in the DOM).

My question

How can I have a Bootstrap 5.x Dropdown menu in a DxGrid's CellDisplayTemplate without the menu being clipped?

Sign in to comment on this post

Answers approved by DevExpress Support

created 2 days ago

Hello Uwe,

You can assign the same CSS class to each cell in the CustomizeElement event handler. Then, show the hidden content in the corresponding CSS class.

C#
private void OnCustomizeElement(GridCustomizeElementEventArgs e){
    if (e.ElementType == GridElementType.DataCell){
        e.CssClass = "my-cell";
    }
}

Note: We have implemented a similar component called DxDropDownButton in v24.2. With this component, you don't need to apply additional CSS to grid cells. Refer to our demos to see this component in action: Styles.

I hope this helps.

    Comments (1)
    UK UK
    Uwe Keim 2 days ago

      Thank you very much, Tim.

      Your suggested OnCustomizeElement does not provide any improvement, it behaves the same as my custom CSS solution (not clipped in all cells except the last row's cell).

      Since the Bootstrap Dropdown menu is much faster than the DxDropDownButton, I'll try to stick to Bootstrap.

      I'll continue investigating on how to solve this.

      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.