<TelerikEditor @ref="@SummaryEditor"
                         Class="rich-editor"
                         EditMode="@EditorEditMode.Iframe"
                         Value="@TextDisplayModel.Text"
                         ValueChanged="@RichEditorValueChanges"
                         ValueExpression="@((()=> TextDisplayModel.Text))">
          </TelerikEditor>

@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; }
    }
}
    
            
                
            
            
                
            
        
    
    
        
        
        
            
            
        
    

@* This example shows the basic configuration of the Drawer and how to expand or collapse a Drawer with a click of a button. *@

<TelerikButton OnClick="@(() => DrawerRef.ToggleAsync())"
               Icon="@SvgIcon.Menu">
    Toggle drawer
</TelerikButton>

<TelerikDrawer Data="@Data" Mode="@DrawerMode.Push"
               @ref="@DrawerRef">
    <DrawerContent>lorem ipsum</DrawerContent>
</TelerikDrawer>

@code {
    Telerik.Blazor.Components.TelerikDrawer<DrawerItem> DrawerRef { get; set; }

    IEnumerable<DrawerItem> Data { get; set; } =
        new List<DrawerItem>
            {
            new DrawerItem { Text = "Counter", Icon = SvgIcon.Plus },
            new DrawerItem { Text = "FetchData", Icon = SvgIcon.GridLayout },
            };

    public class DrawerItem
    {
        public string Text { get; set; }
        public ISvgIcon Icon { get; set; }
    }
}

<GridColumn Field="L1" Title="Level 1" FieldType="@typeof(string)">
    <Template>
                @{
                    var item = (TaxonomyGrid)context;
                }
                @item.L1
                <TelerikButton OnClick="@(() => PopupRef.Popup_OpenAsync())" Class="popup-target" Icon="@SvgIcon.User" Title="The name of the owner" />
    </Template>
    <FilterMenuTemplate>
        <div>
            <TelerikMultiSelect Width="300px" AutoClose=false Data="@L1List" TextField="Name" ValueField="TaxonomyId" OnChange="@(() => FilterGrid(1, SelectedL1Ids))" @bind-Value=@SelectedL1Ids > </TelerikMultiSelect>
        </div>
    </FilterMenuTemplate>
    <FilterMenuButtonsTemplate />
</GridColumn>

<TelerikPopup
    @ref="@PopupRef"
    AnchorSelector=".popup-target">
    I am a Telerik Popup.
</TelerikPopup>

        <GridColumn Field="L2" Title="Level 2" FieldType="@typeof(string)">
            <Template>
                @{
                    var item = (TaxonomyGrid)context;
                }
                @item.L2
                @{
                    if (item.L2OwnerId != null)
                    {
                        <TelerikButton OnClick="@(() => PopupRef.Popup_OpenAsync())" Class="popup popup-target" Icon="@SvgIcon.User" Title="The name of the owner" />
                        <TelerikPopup Class="popup" @ref="@PopupRef"
                                        MinHeight="500px"
                                        MinWidth="300px"
                                        AnchorSelector=".popup-target">
                            <span>@item.L2OwnerName</span>
                            <span>@item.L2OwnerEmail</span>
                        </TelerikPopup>
                    }
                }
            </Template>
            <FilterMenuTemplate>
                <div>
                    <TelerikMultiSelect Width="300px" AutoClose=false Data="@L2List" TextField="Name" ValueField="TaxonomyId" OnChange="@( () => FilterGrid(2, SelectedL2Ids))" @bind-Value=@SelectedL2Ids> </TelerikMultiSelect>
                </div>
            </FilterMenuTemplate>
            <FilterMenuButtonsTemplate />
        </GridColumn>

        
public void Openpopup()
        {
            PopupRef.AnchorAlign.HorizontalAlign = PopupHorizontalAlign.Right;
            PopupRef.AnchorAlign.VerticalAlign = PopupVerticalAlign.Top;
            PopupRef.Popup_OpenAsync();
        }