private DateTime _start;

public DateTime Start
{
    get { return _start; }
    set { _start = value; }
}

private DateTime _end;

public DateTime End
{
    get { return _end; }
    set { _end = value; }
}

<TelerikGrid @ref="@_grid" TItem="ChecklistDetailModel" Pageable Page="@_settings.CurrentPageNumber" PageSize="@_settings.Limit" OnRead="@OnPageReadAsync" Width="100%" Height="100%">
    <GridToolBarTemplate>
        <LawAreaSelect SelectedLawAreaId="_settings.SelectedLawAreaId" SelectedCountryId="_settings.SelectedCountryId" OnLawAreaSelected="OnLawAreaSelected" Width="250px" />
        <CountriesSelect Value="_settings.SelectedCountryId" OnChangeCallback="OnCountrySelected" Width="250px" />
        <TelerikButton Icon="FontIcon.FileAdd" OnClick="OnCreateChecklistButtonClick" Title="@Localizer["ChecklistOverview.Create"]" />
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Title="ID" Width="50px">
            <Template Context="checklist">
                @{
                    var model = checklist as ChecklistDetailModel;
                    <span>@model.Id</span>
                }
            </Template>
        </GridColumn>
        <GridColumn Title="@Localizer["Data.LawArea"]">
            <Template Context="checklist">
                @{
                    var model = checklist as ChecklistDetailModel;
                    <span>@model.LawArea.Name</span>
                }
            </Template>
        </GridColumn>
        <GridColumn Title="@Localizer["Data.Country"]">
            <Template Context="checklist">
                @{
                    var model = checklist as ChecklistDetailModel;
                    <span>@model.Country.Name</span>
                }
            </Template>
        </GridColumn>
        <GridColumn Title="@Localizer["Data.Checklist.Revision"]">
            <Template Context="checklist">
                @{
                    var model = checklist as ChecklistDetailModel;
                    @if (model.RevisionName != null)
                    {
                        <span>@model.RevisionName</span>
                    }
                    else
                    {
                        <i>@Localizer["Data.Checklist.NoRevision"]</i>
                    }
                }
            </Template>
        </GridColumn>
        <GridColumn Title="@Localizer["Data.ChecklistRevisionDate"]">
            <Template Context="checklist">
                @{
                    var model = checklist as ChecklistDetailModel;
                    @if (model.LastUpdated.HasValue)
                    {
                        <span>@model.LastUpdated.Value.ToShortDateString()</span>
                    }
                    else
                    {
                        <span>@model.CreatedDate.ToShortDateString()</span>
                    }
                }
            </Template>
        </GridColumn>
        <GridCommandColumn>
            <GridCommandButton Icon="FontIcon.EditTools" OnClick="OnEditChecklistButtonClick" />
            <GridCommandButton Icon="FontIcon.PaperPlane" OnClick="OnAssignChecklistButtonClick" />
        </GridCommandColumn>
    </GridColumns>
    <DetailTemplate Context="checklist">
        <CustomerChecklistGrid ChecklistId="checklist.Id" OnEditCustomerChecklistButtonClick="OnEditCustomerChecklistButtonClick" OnNavigateToCustomerChecklistButtonClick="OnNavigateToCustomerChecklistButtonClick" />
    </DetailTemplate>
</TelerikGrid>

<TelerikGrid @ref="_grid" TItem="CustomerChecklistModel" Pageable Page="_settings.CurrentPageNumber" PageSize="_settings.Limit" OnRead="OnPageReadAsync">
    <GridToolBarTemplate>
        <CustomerSelect OnCustomerSelected="OnCustomerSelected" SelectedCustomerId="_settings.SelectedCustomerId" Width="250px" />
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Title="ID" Width="50px">
            <Template Context="customerChecklist">
                @{
                    var model = customerChecklist as CustomerChecklistModel;
                    <span>@model.Id</span>
                }
            </Template>
        </GridColumn>
        <GridColumn Title="@Localizer["Data.Customer"]">
            <Template Context="customerChecklist">
                @{
                    var model = customerChecklist as CustomerChecklistModel;
                    <span>@model.Customer.Name</span>
                }
            </Template>
        </GridColumn>
        <GridColumn Title="@Localizer["ChecklistsOverview.CompletedOn"]">
            <Template Context="customerChecklist">
                @{
                    var model = customerChecklist as CustomerChecklistModel;
                    @if (model.CompletedOn.HasValue)
                    {
                        <span>@model.CompletedOn.Value.ToShortDateString()</span>
                    }
                    else
                    {
                        <i>@Localizer["ChecklistsOverview.NotCompleted"]</i>
                    }
                }
            </Template>
        </GridColumn>
        <GridCommandColumn Context="customerChecklist">
            <GridCommandButton Icon="FontIcon.EditTools" OnClick="OnEditCustomerChecklistButtonClickAsync" />
            @{
                var model = customerChecklist as CustomerChecklistModel;
                if (!model.CompletedOn.HasValue)
                {
                    <GridCommandButton Icon="FontIcon.PaperPlane" OnClick="OnNavigateToCustomerChecklistButtonClickAsync" />
                }
            }
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

public partial class CustomerChecklistGrid
{
    [Parameter] public int ChecklistId { get; set; }
    [Parameter] public EventCallback<CustomerChecklistModel> OnEditCustomerChecklistButtonClick { get; set; }
    [Parameter] public EventCallback<CustomerChecklistModel> OnNavigateToCustomerChecklistButtonClick { get; set; }
    [Inject] public ICustomerChecklistService CustomerChecklistService { get; set; }
    [Inject] public IStringLocalizer<SharedResources> Localizer { get; set; }
    [CascadingParameter] public Routes App { get; set; }

    private CustomerChecklistSettings _settings = new();
    private PageResult<CustomerChecklistModel> _data = new();

    private TelerikGrid<CustomerChecklistModel> _grid;

    private async void OnPageReadAsync(GridReadEventArgs args)
    {
        var newOffset = args.Request.PageSize * (args.Request.Page - 1);
        _settings.Offset = newOffset;
        _settings.CurrentPageNumber = args.Request.Page;
        var request = new CustomerChecklistRequestModel
        {
            Offset = _settings.Offset,
            Limit = _settings.Limit,
            ChecklistId = ChecklistId,
            OrderBy = _settings.OrderBy,
            IsCompleted = _settings.IsCompleted,
            CustomerId = _settings.SelectedCustomerId
        };

        _data = await CustomerChecklistService.GetPageAsync(request);
        args.Data = _data.Items;
        args.Total = _data.Total;
        StateHasChanged();
    }

    private void OnCustomerSelected(int customerId)
    {
        _settings.SelectedCustomerId = customerId;
        _settings.CurrentPageNumber = 1;
        _grid.Rebind();
    }

    private async Task OnEditCustomerChecklistButtonClickAsync(GridCommandEventArgs args)
    {
        var customerChecklist = args.Item as CustomerChecklistModel;
        if (OnEditCustomerChecklistButtonClick.HasDelegate)
        {
            await OnEditCustomerChecklistButtonClick.InvokeAsync(customerChecklist);
        }
    }

    private async Task OnNavigateToCustomerChecklistButtonClickAsync(GridCommandEventArgs args)
    {
        var customerChecklist = args.Item as CustomerChecklistModel;
        if (OnNavigateToCustomerChecklistButtonClick.HasDelegate)
        {
            await OnNavigateToCustomerChecklistButtonClick.InvokeAsync(customerChecklist);
        }
    }

    private sealed class CustomerChecklistSettings
    {
        public int Offset { get; set; }
        public int Limit { get; set; } = 25;
        public int CurrentPageNumber { get; set; } = 1;
        public int? SelectedCustomerId { get; set; }
        public bool? IsCompleted { get; set; }
        public string OrderBy { get; set; } = "customer";
    }
}