@using System.ComponentModel.DataAnnotations
@using System.Reflection

<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px"
             OnUpdate="@UpdateHandler" FilterMode="@GridFilterMode.FilterRow">
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="ID" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
        <GridColumn Field=@nameof(SampleData.Role) Title="Position">       
            <Template>
                @{
                    var currentEmployee = context as SampleData;
                    var currentRole = GetDisplayName(currentEmployee.Role);                        
                }

                @currentRole
            </Template>
        </GridColumn>
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    //custom method to check whether Display attribute is defined and get and display its Name property, otherwise display the Enum's member name
    public string GetDisplayName(Enum val)
    {
        return val.GetType()
                  .GetMember(val.ToString())
                  .FirstOrDefault()
                  ?.GetCustomAttribute<DisplayAttribute>(false)
                  ?.Name
                  ?? val.ToString();
    }


    public void UpdateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        //update the view-model
        var index = MyData.FindIndex(i => i.ID == item.ID);
        if (index != -1)
        {
            MyData[index] = item;
        }

        //perform actual data source operations here
    }

    //model and dummy data generation
    public class SampleData
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public Role Role { get; set; }
    }

    public enum Role
    {
        [Display(Name = "Manager")]
        ManagerRole,
        [Display(Name = "Employee")]
        EmployeeRole,
        [Display(Name = "Contractor")]
        ContractorRole
    }

    public List<SampleData> MyData { get; set; }

    protected override void OnInitialized()
    {
        MyData = new List<SampleData>();

        for (int i = 0; i < 50; i++)
        {
            MyData.Add(new SampleData()
            {
                ID = i,
                Name = "name " + i,
                Role = (Role)(i % 3) // just some sample to populate initial values for the enum
            });
        }
    }
}

@using System.Collections.ObjectModel
@using Telerik.FontIcons

<TelerikGrid Data="@Cards"
             Height="800px"
             FilterMode="GridFilterMode.FilterRow"
             EditMode="GridEditMode.Inline"
             OnCreate="NewCard"
             OnUpdate="UpdateCard"
             OnDelete="DeleteCard"
             ConfirmDelete="true"
             @ref="@GridReference">
    <GridToolBarTemplate>
        <GridCommandButton Command="Add" Icon="@FontIcon.Plus">New</GridCommandButton>
    </GridToolBarTemplate>
    <GridColumns>
        <GridColumn Field="@nameof(AdminCard.SerialNumber)" Title="Serial number" />
        <GridColumn Field="@nameof(AdminCard.DisplayNumber)" Title="Display number" />
        <GridColumn Field="@nameof(AdminCard.Name)" />
        <GridCommandColumn Width="140px">
            <GridCommandButton Command="Save" Icon="@FontIcon.Save" ShowInEdit="true" />
            <GridCommandButton Command="Edit" Icon="@FontIcon.Pencil" />
            <GridCommandButton Command="Delete" Icon="@FontIcon.Trash" />
            <GridCommandButton Command="Cancel" Icon="@FontIcon.Cancel" ShowInEdit="true" />
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    TelerikGrid<AdminCard> GridReference { get; set; }

    public ObservableCollection<AdminCard> Cards { get; set; } = new();

    protected override async Task OnInitializedAsync() =>
      Cards = new ObservableCollection<AdminCard>{
        new AdminCard{SerialNumber="123", DisplayNumber="1234 1234", Name="Jim"}
                      };

    private async Task NewCard(GridCommandEventArgs args)
    {
        AdminCard card = (AdminCard)args.Item;
        Cards.Add(card);

        //apply this after saving the new record to the database
        var gridState = GridReference.GetState();
        gridState.InsertedItem = null;
        gridState.OriginalEditItem = null;
        await GridReference.SetStateAsync(gridState);
    }

    private async Task UpdateCard(GridCommandEventArgs args)
    {
        AdminCard fromGrid = (AdminCard)args.Item;
        AdminCard existing = Cards.Single(c => c.Id == fromGrid.Id);
        existing.SerialNumber = fromGrid.SerialNumber;
        existing.DisplayNumber = fromGrid.DisplayNumber;
        existing.Name = fromGrid.Name;
    }

    private async Task DeleteCard(GridCommandEventArgs args)
    {
        AdminCard card = (AdminCard)args.Item;
        Cards.Remove(card);
    }

    public class AdminCard
    {
        public string Id { get; set; } = Guid.NewGuid().ToString();
        public string SerialNumber { get; set; } = "";
        public string DisplayNumber { get; set; } = "";
        public string Name { get; set; } = "";
    }
}

@using Telerik.DataSource
@using Telerik.DataSource.Extensions
 
<TelerikGrid TItem="@Employee"
             OnRead="@OnReadHandler"
             Pageable="true"
             FilterMode="@GridFilterMode.FilterMenu"
             FilterMenuType="@FilterMenuType.CheckBoxList"
             ShowColumnMenu="true"
             Height="400px">
    <GridColumns>
        <GridColumn Field="@(nameof(Employee.EmployeeId))" Filterable="false" />
        <GridColumn Field="@nameof(Employee.Name)">
            <FilterMenuTemplate Context="context">
                <TelerikCheckBoxListFilter Data="@NameOptions"
                                           Field="@(nameof(NameFilterOption.Name))"
                                           @bind-FilterDescriptor="@context.FilterDescriptor">
                </TelerikCheckBoxListFilter>
            </FilterMenuTemplate>
            <FilterMenuButtonsTemplate Context="filterContext">
                <TelerikButton OnClick="@( async () => await ApplyFilterAsync(filterContext) )"
                               ThemeColor="primary">Filter</TelerikButton>
                <TelerikButton OnClick="@( async () => await ClearFilterAsync(filterContext) )">Clear</TelerikButton>
            </FilterMenuButtonsTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Employee.Team)" Title="Team">
            <FilterMenuTemplate Context="context">
                <TelerikCheckBoxListFilter Data="@TeamsList"
                                           Field="@(nameof(TeamNameFilterOption.Team))"
                                           @bind-FilterDescriptor="@context.FilterDescriptor">
                </TelerikCheckBoxListFilter>
            </FilterMenuTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Employee.IsOnLeave)" Title="On Vacation" />
    </GridColumns>
</TelerikGrid>

@code {
    List<Employee> AllGridData { get; set; }

    #region custom-filter-data
    List<TeamNameFilterOption> TeamsList { get; set; }
    List<NameFilterOption> NameOptions { get; set; }

    private async Task ApplyFilterAsync(FilterMenuTemplateContext filterContext)
    {
        var hasFilters = filterContext.FilterDescriptor.FilterDescriptors.OfType<FilterDescriptor>().Any(x => !string.IsNullOrEmpty(x.Value.ToString()));

        if (hasFilters)
        {
            await filterContext.FilterAsync();
        }
        else
        {
            await filterContext.ClearFilterAsync();
        }
    }

    private async Task ClearFilterAsync(FilterMenuTemplateContext filterContext)
    {
        await filterContext.ClearFilterAsync();
    }

    //obtain filter lists data from the data source to show all options
    async Task GetTeamOptions()
    {
        if (TeamsList == null) // sample of caching since we always want all distinct options,
                               //but we don't want to make unnecessary requests
        {
            TeamsList = await GetNamesFromService();
        }
    }

    async Task<List<TeamNameFilterOption>> GetNamesFromService()
    {
        await Task.Delay(500);// simulate a real service delay

        // this is just one example of getting distinct values from the full data source
        // in a real case you'd probably call your data service here instead
        // or apply further logic (such as tie the returned data to the data the grid will have according to your business logic)
        List<TeamNameFilterOption> data = AllGridData.OrderBy(z => z.Team).Select(z => z.Team).
            Distinct().Select(t => new TeamNameFilterOption { Team = t }).ToList();

        return await Task.FromResult(data);
    }

    async Task GetNameOptions()
    {
        if (NameOptions == null)
        {
            NameOptions = await GetNameOptionsFromService();
        }
    }

    async Task<List<NameFilterOption>> GetNameOptionsFromService()
    {
        await Task.Delay(500);// simulate a real service delay

        List<NameFilterOption> data = AllGridData.OrderBy(z => z.Name).Select(z => z.Name).
            Distinct().Select(n => new NameFilterOption { Name = n }).ToList();

        return await Task.FromResult(data);
    }
    #endregion custom-filter-data

    async Task OnReadHandler(GridReadEventArgs args)
    {
        //typical data retrieval for the grid
        var filteredData = await AllGridData.ToDataSourceResultAsync(args.Request);
        args.Data = filteredData.Data as IEnumerable<Employee>;
        args.Total = filteredData.Total;
    }

    protected override async Task OnInitializedAsync()
    {
        AllGridData = new List<Employee>();
        var rand = new Random();
        for (int i = 1; i <= 15; i++)
        {
            AllGridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3,
                IsOnLeave = i % 2 == 0
            });
        }

        await GetTeamOptions();
        await GetNameOptions();
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public bool IsOnLeave { get; set; }
    }

    // in this sample we use simplified models to fetch less data from the service
    // instead of using the full Employee model that has many fields we do not need for the filters

    public class TeamNameFilterOption
    {
        public string Team { get; set; }
    }

    public class NameFilterOption
    {
        public string Name { get; set; }
    }
}