@page "/"
@using Telerik.DataSource

<TelerikGrid TItem="@Person"
             OnRead="@LoadGrid"
             SelectionMode="GridSelectionMode.Single"
             FilterMode="GridFilterMode.FilterRow"
             FilterRowDebounceDelay="200"
             Pageable="true"
             PageSize="15"><DetailTemplate>
        @{
            var selected = context as Person;
        }
        <div class="row">
            <div class="col-2">
                <h1>@selected.First</h1>
            </div>
            <div class="col-2">
            <h1>@selected.Last</h1>
            </div>
        </div>
        </DetailTemplate>
        <GridColumns>
            <GridColumn Field="@nameof(Person.First)" Title="First" Filterable="false"></GridColumn>
            <GridColumn Field="@nameof(Person.Last)" Title="Last" Filterable="false"></GridColumn>
            <GridColumn Field="@nameof(Person.Category)" Title="Category">
                <FilterCellTemplate>
                    @{
                        CategoryFilter = context;
                    }
                    <TelerikDropDownList
                        Data="Categories"
                        @bind-Value="SelectedCategory"
                        OnChange="SetupCategoryFilter">
                    </TelerikDropDownList>
                </FilterCellTemplate>
            </GridColumn>
        </GridColumns>
    </TelerikGrid>
@code
{
    private FilterCellTemplateContext CategoryFilter { get; set; } = new();

    private List<int> Categories = [0, 1, 2, 3, 4];
    
    private int SelectedCategory { get; set; }

    private async Task SetupCategoryFilter()
    {
        var filter = CategoryFilter.FilterDescriptor.FilterDescriptors[0] as FilterDescriptor;

        if (filter is null)
        {
            return;
        }

        filter.Value = SelectedCategory;
        filter.Operator = FilterOperator.IsEqualTo;

        await CategoryFilter.FilterAsync();
    }

    protected void LoadGrid(GridReadEventArgs args)
    {
        List<Person> list =
        [
            new Person {First = "John", Last = "Doe", Category = 1},
            new Person {First = "Jane", Last = "Doe", Category = 2},
            new Person {First = "John", Last = "Smith", Category = 3},
            new Person {First = "Jane", Last = "Smith", Category = 4}
        ];

        args.Data = list;
        args.Total = list.Count;
    }
    public class Person
    {
        public string First { get; set; }

        public string Last { get; set; }

        public int Category { get; set; }
    }
}
    
            
                
            
            
                
            
        
    
    
        
        
        
            
            
        
    

@code {
    privateint  _filteredCount = 0; // How to set this?
}
<TelerikGrid Data="@_applications"
             Pageable="false"
             Sortable="true"
             Resizable="true"
             FilterMode="@GridFilterMode.FilterRow"
             Width="100%"
             ScrollMode="@GridScrollMode.Virtual"
             OnStateInit="(GridStateEventArgs<ApplicationListDTO> args) => StateInitHandler(args)"
             OnStateChanged="(GridStateEventArgs<ApplicationListDTO> args) => StateChangedHandler(args)"
             Height="540px" RowHeight="60">
    <GridColumns>
    Column definitions left outfor brevity
    </GridColumns>
</TelerikGrid>
<div class="applicationCount">@(_applications.Count()) applications found, @_filteredCount listed</div>