DataGrid rows expand outside (below) parent

We upgraded from Radzen.Blazor 2 to Radzen 3 in order take advantage of the DataGrid control.

The old Grid (v 2) scrolls nicely within it's parent. However the DataGrid expanded below the bottom of the parent.

Looking at the HTML the Grid has quite a bit HTML relating to the scrolling behaviour, however there is a lot less in the DataGrid.

Grid 2.0

<div style="height:100%" class="rz-data-grid rz-has-paginator rz-datatable rz-datatable-scrollable rz-has-height rz-selectable" id="XHY80vqRhE" _bl_e154fbf5-ae54-40a3-aa75-1cc58a827e83="">
    <div class="rz-data-grid-data">
        <table class="rz-grid-table rz-grid-table-fixed">
            <colgroup>...</colgroup>
            <thead>...</thead>
            <tbody>...</tbody>
        </table>
    </div>
</div>

DataGrid

<div style="height:100%" class="ui-has-paginator ui-datatable ui-widget ui-datatable-scrollable ui-has-height ui-selectable ui-datatable-reflow" id="hamMXiWkrU" _bl_b456ea4c-5f3c-4ae5-851f-efe0fb4f0996="">
    <div class="ui-datatable-scrollable-wrapper ui-helper-clearfix" style="">
        <div class="ui-datatable-scrollable-view"><div class="ui-widget-header ui-datatable-scrollable-header">
            <div class="ui-datatable-scrollable-header-box" style="margin-left: 0px;" _bl_165bf93c-de65-4009-9e1b-c1e9adfea877="">
                <table>
                    <colgroup class="ui-datatable-scrollable-colgroup">...</colgroup>
                    <thead class="ui-datatable-thead">...</thead>
                </table>
            </div>
        </div>

        <div class="ui-datatable-scrollable-body" onscroll="Radzen.scrollDataGrid(event)" _bl_eaf0cf3e-9610-4fea-903e-5da55aa366b7="">
            <div class="ui-datatable-scrollable-table-wrapper" style="position:relative">
                <table style="top:0px">
                    <colgroup class="ui-datatable-scrollable-colgroup">...</colgroup>
                    <tbody class="ui-datatable-data ui-widget-content ui-datatable-hoverable-rows">...</tbody>
                 </table>
            </div>
        </div>
    </div>
 </div>

Is there someting specific I need to do to get the DataGrid to scroll in the same way as the Grid 2.0 and prevent the rows extending below the bottom of the parent?

1 Like

Any additional info how to reproduce this? Check the forum FAQ for reference how to improve your post.