BuyLog In
Ticket T1287368
Visible to All Users

DxGrid - Prevent Scrolling in DetailRowTemplate

created 11 days ago

Is there a way to prevent the DetailRowTemplate from scrolling within the Master Grid? In the below example, I want to restrict the Detail from moving when scrolling in the Master Grid:

Razor
<div style="width: 500px">
    <DxGrid Data="DataSource"               
            ColumnResizeMode="GridColumnResizeMode.ColumnsContainer">
        <Columns>
            @for (int iCount = 1; iCount <= 10; iCount++)
            {
                <DxGridDataColumn Caption="@($"Column {iCount}")" Width="100px"  />
            }
        </Columns>
        <DetailRowTemplate>
            <div style="width: 430px; background-color: red;">
                <text>Don't Scroll</text>
            </div>
        </DetailRowTemplate>
    </DxGrid>
</div>

@code
{
    private string[] DataSource => [""];
}

Initial Render:
DetailGridNoScroll.png

Scrolling the Grid:
DetailGridScroll.png

Is there a way to prevent the Detail Template from moving? Thanks,

Mike

Comments (2)
John (DevExpress Support) 10 days ago

    Hello Mike,

    The DxGrid component does not have an API for this use case. Unfortunately, there are no workarounds to achieve this usage scenario either. Would you please elaborate on your requirements so we can offer you alternatives for it? We'll do our best to help.

    Regards,
    John

    MZ MZ
    Mike Zach 10 days ago

      John,

      My scenario is almost identical in design to the Master-Detail Row Preview demo, except backwards. In this demo there are only 4 columns in the master grid, but the detail is much larger and the user is unable to scroll the contents of the detail. I have the opposite scenario, where I have many columns (18) in the master grid, but can fit the entire contents of the detail within the bounds of the container, and when the user scrolls the master's columns, the detail is scrolled off-screen. I'm looking for a way to have the detail not move (or some kind of effect where it's always centered to the width of the grid). Thanks,

      Mike

      Sign in to comment on this post

      Answers approved by DevExpress Support

      created 9 days ago

      Hi,

      As John said, DxGrid does not have an API to fix the position of the detail row content.

      As a workaround, you can manually track the horizontal scroll offset of the grid and use JavaScript to apply it to the detail row content. The idea is to subscribe to the grid's internal scroll event and update the left style of the detail row content dynamically so that it remains visually fixed in place.

      Razor
      <DetailRowTemplate>
    <div class="fixed-detail-content">
        <text>Don't Scroll</text>
    </div>
</DetailRowTemplate>
      CSS
      .fixed-detail-content {
    position: absolute;
    left: 0;
    width: 430px;
    background-color: red;
}
      JavaScript
      window.setupFixedDetailScroll = function () {
    const grid = document.getElementById('my-grid');
    const scrollViewer = grid.querySelector('.dxbl-scroll-viewer-content');
    debugger;

    scrollViewer.addEventListener('scroll', function(e) { document.querySelector('.fixed-detail-content').style.left = this.scrollLeft + "px"; })
};
      C#
      protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JS.InvokeVoidAsync("setupFixedDetailScroll");
    }
}

      I attached a sample project for your reference.

      Regards,
      Gian

        Comments (2)
        MZ MZ
        Mike Zach 9 days ago

          Gian,

          Thanks, this will work as a workaround for now, but I would like to suggest an API be added as a feature. Ideally the ability to scroll the master or detail independently, or both together, would cover both use cases (my example and the demo I referenced above). Thanks,

          Mike

          Tim (DevExpress Support) 8 days ago

            Hi Mike,

            Thank you for your feedback. We backlogged your request.

            In the meantime, please use the workaround recommended by Gian.

            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.