DataGrid is not interactive -- Paging, Filter, and Sort does nothing

Radzen.Blazor Components
1

I have a RadzenDataGrid in a Blazor component. The component is actually rendered inside of a .cshtml page. After the component is rendered and the data is displayed in the grid, there is no functionality when you click on the Pager, Filter or Sort buttons. I have set the rendermode in the component to InterfactiveServer, but that doesn't seem to help.

Here is my component:

@using AutomationDashbaord.Models
@using Microsoft.AspNetCore.Components
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@rendermode InteractiveServer

<RadzenContent>
	<ChildContent>
		@* <RadzenHeading Size="H2" Text="Today's Requests" /> *@
		<div class="table">
			<div class="row">
				<div class="col-12">
					<RadzenDataGrid @ref="ListGrid"
						AllowColumnResize="true"
							AllowFiltering="true"
							FilterMode="Radzen.FilterMode.Advanced"
							AllowPaging="true"
							ShowPagingSummary="true"
							PagerHorizontalAlign="HorizontalAlign.Right"
							AllowSorting="true"
							Data="@AutoRunRequests"
							Count="@AutoRunRequestsCount"
							SelectionMode="DataGridSelectionMode.Single"
							FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
							@rendermode="RenderMode.InteractiveServer"
							IsLoading="@IsLoading"
							TItem="AutoRunRequest"
							PageSize="25"
							LoadData="@GridLoadData">
						<Columns>
							<RadzenDataGridColumn TItem="AutoRunRequest"
								Filterable="true"
								Property="RequestDate"
								Title="Request Date" />
							<RadzenDataGridColumn TItem="AutoRunRequest"
								Property="RequestType"
								Title="Request Type" />
							<RadzenDataGridColumn TItem="AutoRunRequest"
								Property="Status"
								Title="Status" />
							<RadzenDataGridColumn TItem="AutoRunRequest"
								Property="Errors"
								Title="Errors" />
							<RadzenDataGridColumn TItem="AutoRunRequest"
								Filterable="false"
								Sortable="false"
								Width="75px"
								TextAlign="TextAlign.Center">
								<Template Context="autoRunRequest">
									<RadzenButton ButtonStyle="ButtonStyle.Danger"
										Icon="close"
										Size="ButtonSize.Small"
										Click="@((args) => GridDeleteButtonClick(args, autoRunRequest))"
										@onclick:stopPropagation="true" />
								</Template>
							</RadzenDataGridColumn>
						</Columns>
					</RadzenDataGrid>
				</div>
			</div>
		</div>
	</ChildContent>
</RadzenContent>

Here is the .cshtml that renders the component:

@page "{showAll:int?}"
@model AutomationDashbaord.Pages.RunRequest.IndexModel

@using AutomationDashbaord.Pages.Components
@{
	ViewData["Title"] = "Request List";
}

<p>
	<div>
		<table>
			<tr>
				<td style="width:200px; white-space:nowrap">
					<h3>Today's Requests</h3>
				</td>
				<td width="100%"></td>
				
			</tr>
		</table>

	</div>
	<div class="head-divider row">
		<div width="50%" class="col"><button class="btn btn-primary" onclick="window.location.href='/'"><i class="fa fa-fw fa-plus-circle"></i>New</button></div>
		<div width="50%" class="col" style="display:block;margin:auto" align="right"><a href="Request/Index/1">Show All</a></div>
	</div>
</p>
@(await Html.RenderComponentAsync<RequestListComponent>(RenderMode.ServerPrerendered))

And here is the code behind the component:

public partial class RequestListComponent : ComponentBase
{
    protected RadzenDataGrid<AutoRunRequest> ListGrid;

    private IEnumerable<AutoRunRequest> _autoRunRequests;

    [Inject]
    AutomationDashbaordContext Context { get; set; }
    public RequestListComponent()
    {
    }

    protected IEnumerable<AutoRunRequest> AutoRunRequests
    {
        get
        {
            return _autoRunRequests;
        }
        set
        {
            if(!Equals(_autoRunRequests, value))
            {
                _autoRunRequests = value;
            }
        }
    }

    protected int AutoRunRequestsCount
    {
        get;
        set;
    }

    protected bool IsLoading
    {
        get; set;
    }

    protected async Task GridLoadData(LoadDataArgs args)
    {
        try
        {
            IsLoading = true;

            var query = Context.AutoRunRequest.AsQueryable();

            if(!string.IsNullOrWhiteSpace(args.Filter))
            {
                query = query.Where(ListGrid.ColumnsCollection);
            }

            if(!string.IsNullOrWhiteSpace(args.OrderBy))
            {
                query = query.OrderBy(args.OrderBy);
            }

            AutoRunRequestsCount = query.Count();

            AutoRunRequests = await query.Skip(args.Skip.Value)
                .Take(args.Top.Value)
                .ToListAsync();
        }
        finally
        {
            IsLoading = false;
        }
    }

    protected Task GridDeleteButtonClick(MouseEventArgs args, dynamic autoRunRequest)
    {
        return Task.CompletedTask;
    }
}

Any help would be greatly appreciated. Thanks.

2

Never mind. I finally figured it out. I was missing the radzen javascript reference in my Layout.