<TelerikGrid Data="Items" Navigable="false" EditMode="GridEditMode.Incell" Width="400px">
	<GridColumns>
		<GridColumn Field="Name" Title="Name" />
		<GridColumn Field="Phone" Title="Phone" />
		<GridColumn Field="Address" Title="Address" />
	</GridColumns>
</TelerikGrid>

@code {
	private List<Item> Items = new()
	{
	   new Item {Name = "User1", Phone = "1111111", Address = "Address1" },
	   new Item {Name = "User2", Phone = "2222222", Address = "Address2" },
	   new Item {Name = "User3", Phone = "3333333", Address = "Address3" }
	};

	private class Item
	{
	   public string Name { get; set; }
	   public string Phone { get; set; }
	   public string Address { get; set; }
	}
}

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