Grid Headers do not scroll with body

Radzen Studio Blazor Server
1

My horizontal scroll works for the grid's rows but not the headers.

<RadzenContent Container="main">
    <ChildContent>
        <RadzenHeading Size="H1" Text="Calculation Summary">
        </RadzenHeading>
        <RadzenGrid @ref="grid0"
                    Data="@getContractCancelRequestsSummaryResult"
                    AllowFiltering="true"
                    AllowPaging="true"
                    AllowSorting="true"
                    
                    ColumnWidth="200px"
                    FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                    PageSize="25"
                    TItem="ContractCancelRequestSummary">
            <Columns>
                <RadzenGridColumn  TItem="ContractCancelRequestSummary" Property="ContractNumber" Title="Contract Number" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="CustomerName" Title="Customer Name" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="SellerName" Title="Seller Name" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="OrigTotalSalesPrice" Title="Org TSP" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="TotalAdminCost" Title="Total Admin Cost" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="MaxSellerCost" Title="Max Seller Cost" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="CalcSellerCost" Title="Calc Seller Cost" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="SalesTaxReceived" Title="Sales Tax Received" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="SalesTaxPercent" Title="Sales Tax %" FormatString="{0:P2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="SalesTaxRefund" Title="Sales Tax refund" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="CancelPercentUsedForCalc" Title="Cancel % Used" FormatString="{0:P2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="CancelFee" Title="Cancel Fee" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="PaidClaims" Title="Paid Claims" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="CancelFee" Title="Cancel Fee" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="CancelFee3" Title="Cancel Fee3" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="RefundDueCustomer" Title="Refund Due Cust" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="PaidUpCvgExpirationDate" Title="Paid Up Cvg Exp Date" FormatString="{0:d}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="PaidUpCvgExpirationOdometer" Title="Paid Up Cvg Exp OD" FormatString="{0:G2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="TotalSellerMargin" Title="Total Seller Margin" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="MaxSellerMargin" Title="Max Seller Margin" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="CalcSellerMargin" Title="Calc Seller Margin" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="LedgerBalance" Title="Ledger Balance" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="AdminAmntToPpco" Title="Admin Amnt To Ppco" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="SellerAmntToPpco" Title="Seller Amnt To Ppco" FormatString="{0:C2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="CancelDate" Title="Cancel Date" FormatString="{0:d}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="CancelOdometer" Title="Cancel OD" FormatString="{0:G}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="CancelPercentTime" Title="Cancel % Time" FormatString="{0:P2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="CancelPercentOdometer" Title="Cancel % OD" FormatString="{0:P2}" TextAlign="TextAlign.Right" Filterable="false" />
                <RadzenGridColumn TItem="ContractCancelRequestSummary" Property="Id" Title="Id" FormatString="{0:G}" TextAlign="TextAlign.Right" />
            </Columns>
        </RadzenGrid>
        <AuthorizeView>
            <Authorized>
                <p><em>Authorized</em></p>
            </Authorized>
            <NotAuthorized>
                <p><em>Not Authorized.  Please Login.</em></p>
            </NotAuthorized>
        </AuthorizeView>
</ChildContent>
</RadzenContent>

Note that this shows the issue but probably not well. The Cancel Fee column is in the middle of the row and I've scrolled all the way to the end. I'd expect the header for Id to be over the last column.

image
image479×657 19.1 KB

2

Did you include the Radzen JavaScript? It is required to sync the headers with the rest of the body. Here is a live demo that shows horizontal scrolling.

Open the _Host.cshtml file (server-side Blazor) or wwwroot/index.html (client-side WebAssembly Blazor) and include this snippet:
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>

3

Thanks, that was it. I hate when I overlook the obvious :-(.