@using System.Dynamic

<TelerikGrid Data="@Data" 
             Pageable="true" Sortable="true" Groupable="true"
             FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
             EditMode="@GridEditMode.Incell"
             Resizable="true" Reorderable="true">
        <GridColumns>
            <GridColumn Field="Id" FieldType="typeof(string)" Width="120px" />
            <GridColumn Field="DetailData.PropertyInt" Title="Column A" FieldType="@typeof(int)"  />
            <GridColumn Field="DetailData.ProptertyString" Title="Column B" FieldType="@typeof(string)"/>
            <GridColumn Field="DetailData.PropertyDate" Title="Column C" FieldType="@typeof(DateTime)"/>
        </GridColumns>
</TelerikGrid>


@code {
    public ExpandoObject[] Data { get; set; } = Array.Empty<ExpandoObject>();

    protected override async Task OnInitializedAsync()
    {
        Data = new ExpandoObject[]
            {
            GetPopulatedExpando(1),
            GetPopulatedExpando(2),
            GetPopulatedExpando(3),
            GetPopulatedExpando(4),
            GetPopulatedExpando(5),
            };
    }

    private ExpandoObject GetPopulatedExpando(int id)
    {
        dynamic expando = new ExpandoObject();
        expando.Id = id;
        dynamic nested = new ExpandoObject();
        nested.PropertyInt = id;
        nested.ProptertyString = "ID " + id;
        nested.PropertyDate = new DateTime(2022, 4, id);
        expando.DetailData = nested;

        return expando;
    }
}

@using System.Collections.Generic;
@using System.Dynamic;
    <span>Selection bind not working as expected:</span>
    <TelerikGrid TItem="ExpandoObject"
    @bind-SelectedItems="@gSelectedItems"
                 OnRowClick="@OnGridRowClicked"
                 SelectionMode="GridSelectionMode.Multiple"
                 OnRead=@gHLReadItems
                 RowHeight="60">
        <RowTemplate Context="ctx">
            <td>
                @{
                    var it = (ctx as IDictionary<string, object>);
                    @(it["Name"].ToString())
                }
            </td>
        </RowTemplate>
        <GridColumns>
            <GridCheckboxColumn CheckBoxOnlySelection="true" Visible="false" @key="@("sIDX1")" SelectAll="false" />
            <GridColumn Field="Name" FieldType=@typeof(string) Title="Name" />
        </GridColumns>
    </TelerikGrid>
<span>WORKs OK:</span>
    <TelerikGrid TItem="ExpandoObject"
    @bind-SelectedItems="@gSelectedItems"
                 OnRowClick="@OnGridRowClicked"
                 SelectionMode="GridSelectionMode.Multiple"
                 OnRead=@gHLReadItems
                 RowHeight="60">
        <GridColumns>
            <GridCheckboxColumn CheckBoxOnlySelection="true" Visible="false" @key="@("sIDX2")" SelectAll="false" />
            <GridColumn Field="Name" FieldType=@typeof(string) Title="Name" />
        </GridColumns>
    </TelerikGrid>
        
@code
{
    private List<ExpandoObject> RowData;
    IEnumerable<ExpandoObject> gSelectedItems { get; set; } = Enumerable.Empty<ExpandoObject>();
    protected override void OnInitialized()
    {
        
        RowData = new List<ExpandoObject>();
        dynamic obj0 = new ExpandoObject();
        obj0.Name = "Tester";
        RowData.Add(obj0);
        dynamic obj1 = new ExpandoObject();
        obj1.Name = "Testovicz";
        RowData.Add(obj1);
        dynamic obj2 = new ExpandoObject();
        obj2.Name = "Selectant";
        RowData.Add(obj2);
    }
    protected async Task gHLReadItems(GridReadEventArgs args)
    {
        //RowData are readen from DYNAMIC source, cannot add any NEW property to it
        args.Data = RowData;
        args.Total = 3;
    }
    protected void OnGridRowClicked(GridRowClickEventArgs args)
    {
        var it = args.Item as ExpandoObject;
        if (gSelectedItems.Any(x => x == it))
        {
            gSelectedItems = gSelectedItems.Where(x => x != it);
        }
        else
        {
            gSelectedItems = gSelectedItems.Union(RowData.Where(x => x == it));
        }
    }
}

public class DateModel
{
  [Display(Order = 2)]
  public string Id { get; set; }
  [Display(Order = 1)]
  public string Text { get; set; }
}

@using System.ComponentModel.DataAnnotations
@* Used for the model annotations only *@

<strong>REPRO: activate the validation for the Name field to see the issue - click Save with an empty input</strong>

<TelerikGrid Data=@MyData EditMode="@GridEditMode.Popup" Pageable="true" Height="500px"
             OnUpdate="@UpdateHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler">
    <GridToolBar>
        <GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>
    </GridToolBar>
    <GridColumns>
        <GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />
        <GridColumn Field=@nameof(SampleData.Name) Title="Name" />
        <GridCommandColumn>
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
            <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {

    public class SampleData
    {
        public int ID { get; set; }

        [Required(ErrorMessage = "aa something else")] // the first word is 1 or 2 characters to show the issue
        public string Name { get; set; }
    }

    async Task UpdateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        // perform actual data source operations here through your service

        // if the grid Data is not tied to the service, you may need to update the local view data too
        var index = MyData.FindIndex(i => i.ID == item.ID);
        if (index != -1)
        {
            MyData[index] = item;
        }
    }

    async Task DeleteHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        // perform actual data source operation here through your service

        // if the grid Data is not tied to the service, you may need to update the local view data too
        MyData.Remove(item);
    }

    async Task CreateHandler(GridCommandEventArgs args)
    {
        SampleData item = (SampleData)args.Item;

        // perform actual data source operation here through your service

        // if the grid Data is not tied to the service, you may need to update the local view data too
        item.ID = MyData.Count + 1;
        MyData.Insert(0, item);
    }


    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.ToString()
            });
        }
    }
}

<p>The <strong>Name</strong> column index will always be 0.
    The Grid will either move the reordered column to index 1, or put it back to its previous index (revert).</p>

<p><label><TelerikCheckBox @bind-Value="@ShouldRevertGridColumnOrder" /> Revert Invalid Column Reordering</label></p>

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             TItem="@SampleModel"
             Pageable="true"
             Sortable="true"
             Reorderable="true"
             OnStateChanged="@OnGridStateChanged">
    <GridColumns>
        <GridColumn Field="@nameof(SampleModel.Name)" Reorderable="false" />
        <GridColumn Field="@nameof(SampleModel.GroupName)" />
        <GridColumn Field="@nameof(SampleModel.Price)" />
        <GridColumn Field="@nameof(SampleModel.Quantity)" />
        <GridColumn Field="@nameof(SampleModel.StartDate)" />
        <GridColumn Field="@nameof(SampleModel.IsActive)" />
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<SampleModel>? GridRef { get; set; }

    private List<SampleModel> GridData { get; set; } = new();

    private bool ShouldRevertGridColumnOrder { get; set; }

    private IEnumerable<int>? CachedGridColumnIndexes { get; set; }

    private async Task OnGridStateChanged(GridStateEventArgs<SampleModel> args)
    {
        if (args.PropertyName == "ColumnStates")
        {
            if (args.GridState.ColumnStates.First().Index > 0 && GridRef != null)
            {
                if (ShouldRevertGridColumnOrder)
                {
                    await RevertGridColumnOrder();
                }
                else
                {
                    args.GridState.ColumnStates.First(x => x.Index == 0).Index = 1;

                    args.GridState.ColumnStates.First().Index = 0;

                    await GridRef.SetStateAsync(args.GridState);
                }
            }

            CacheGridColumnOrder();
        }
    }

    private void CacheGridColumnOrder()
    {
        var gridColumnState = GridRef?.GetState().ColumnStates;

        if (gridColumnState != null)
        {
            CachedGridColumnIndexes = gridColumnState.Select(x => x.Index);
        }
    }

    private async Task RevertGridColumnOrder()
    {
        var gridState = GridRef?.GetState();

        if (gridState != null && CachedGridColumnIndexes != null)
        {
            for (int i = 0; i < gridState.ColumnStates.Count; i++)
            {
                gridState.ColumnStates.ElementAt(i).Index = CachedGridColumnIndexes.ElementAt(i);
            }

            await GridRef!.SetStateAsync(gridState);
        }
    }

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            CacheGridColumnOrder();
        }

        base.OnAfterRender(firstRender);
    }

    protected override void OnInitialized()
    {
        var rnd = new Random();

        for (int i = 1; i <= 7; i++)
        {
            GridData.Add(new SampleModel()
            {
                Id = i,
                Name = $"Name {i}",
                GroupName = $"Group {i % 3 + 1}",
                Price = rnd.Next(1, 100) * 1.23m,
                Quantity = rnd.Next(0, 1000),
                StartDate = DateTime.Now.AddDays(-rnd.Next(60, 1000)),
                IsActive = i % 4 > 0
            });
        }
    }

    public class SampleModel
    {
        public int Id { get; set; }
        public string Name { get; set; } = string.Empty;
        public string GroupName { get; set; } = string.Empty;
        public decimal Price { get; set; }
        public int Quantity { get; set; }
        public DateTime StartDate { get; set; }
        public bool IsActive { get; set; }
    }
}

@using Telerik.DataSource
@using Telerik.DataSource.Extensions

<TelerikGrid TItem="@Employee"
             OnRead="@OnReadHandler"
             Pageable="true"
             FilterMode="@( NameOptions != null ? GridFilterMode.FilterMenu : GridFilterMode.None )"
             FilterMenuType="@FilterMenuType.CheckBoxList"
             Height="400px">
    <GridColumns>
        <GridColumn Field="@(nameof(Employee.EmployeeId))" Filterable="false" />
        <GridColumn Field="@nameof(Employee.Name)">
            <FilterMenuTemplate Context="context">
                <TelerikGrid Data="@NameOptions"
                             ScrollMode="@GridScrollMode.Virtual"
                             Height="240px"
                             RowHeight="36"
                             FilterMode="@GridFilterMode.FilterRow"
                             SelectionMode="@GridSelectionMode.Multiple"
                             SelectedItems="@SelectedGridItems"
                             SelectedItemsChanged="@( (IEnumerable<NameFilterOption> newSelected) =>
                                                      GridSelectedItemsChanged(newSelected, context.FilterDescriptor) )">
                    <GridColumns>
                        <GridCheckboxColumn SelectAllMode="@GridSelectAllMode.All" />
                        <GridColumn Field="@nameof(NameFilterOption.Name)"></GridColumn>
                    </GridColumns>
                </TelerikGrid>
            </FilterMenuTemplate>
            <FilterMenuButtonsTemplate Context="filterContext">
                <TelerikButton OnClick="@(async _ => await filterContext.FilterAsync())"
                               ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Filter </TelerikButton>
                <TelerikButton OnClick="@(() => ClearFilterAsync(filterContext))">Clear</TelerikButton>
            </FilterMenuButtonsTemplate>
        </GridColumn>
        <GridColumn Field="@nameof(Employee.Team)" Title="Team" />
        <GridColumn Field="@nameof(Employee.IsOnLeave)" Title="On Vacation" />
    </GridColumns>
</TelerikGrid>

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

    private IEnumerable<NameFilterOption> SelectedGridItems { get; set; } = new List<NameFilterOption>();

    private void GridSelectedItemsChanged(IEnumerable<NameFilterOption> newSelectedItems, CompositeFilterDescriptor cfd)
    {
        SelectedGridItems = newSelectedItems;
        cfd.LogicalOperator = FilterCompositionLogicalOperator.Or;
        cfd.FilterDescriptors.Clear();
        foreach (var sgi in SelectedGridItems)
        {
            cfd.FilterDescriptors.Add(new FilterDescriptor()
            {
                Member = nameof(Employee.Name),
                MemberType = typeof(string),
                Operator = FilterOperator.IsEqualTo,
                Value = sgi.Name
            });
        }
    }

    private async Task ClearFilterAsync(FilterMenuTemplateContext filterContext)
    {
        SelectedGridItems = new List<NameFilterOption>();
        await filterContext.ClearFilterAsync();
    }

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

    //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()
    {
        // generate data that simulates the database for this example
        // the actual grid data is retrieve in its OnRead handler
        AllGridData = new List<Employee>();
        var rand = new Random();
        for (int i = 1; i <= 1000; i++)
        {
            AllGridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                Team = "Team " + i % 3,
                IsOnLeave = i % 2 == 0
            });
        }

        // get custom filters data. In a future version you will be able to call these methods
        // from the template initialization instead of here (or in OnRead) so that they fetch data
        // only when the user actually needs filter values, instead of always - that could improve server performance
        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; }
    }
}

<TelerikButton OnClick="@(_ => OZRowCmd(null,20))" Icon="@FontIcon.Play" Title="Zahájit novou" Class="bg-primary" Size="@Telerik.Blazor.ThemeConstants.Button.Size.Large">Zahájit novou</TelerikButton>