@inject IJSRuntime _js

@* Move JavaScript code to a separate JS file in production *@
<script suppress-error="BL9992">
    function uncheckGrid() {
        var checkboxes = document.querySelectorAll(".no-select .k-grid-checkbox");
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = false;
        }
    }
</script>

<style>
    .no-select {
        cursor: not-allowed;
    }

    .no-select .k-checkbox {
        pointer-events: none;
    }
</style>

<TelerikGrid Data=@GridData
             SelectionMode="@GridSelectionMode.Multiple"
             SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
             SelectedItems="@SelectedEmployees"
             Pageable="true"
             Height="400px">
    <GridColumns>
        <GridCheckboxColumn SelectAll="true" OnCellRender="@OnGridCellRender" />
        <GridColumn Field="@nameof(Employee.Name)" />
        <GridColumn Field="@nameof(Employee.Team)" />
        <GridColumn Field="@nameof(Employee.Active)" />
    </GridColumns>
</TelerikGrid>

@if (SelectedEmployees != null)
{
    <ul>
        @foreach (Employee employee in SelectedEmployees)
        {
            <li>
                @employee.Name
            </li>
        }
    </ul>
}

@code {
    private List<Employee> GridData { get; set; } = new List<Employee>();

    private IEnumerable<Employee> SelectedEmployees { get; set; } = new List<Employee>();

    private void OnGridCellRender(GridCellRenderEventArgs args)
    {
        var product = (Employee)args.Item;
        if (!product.Active)
        {
            args.Class = "no-select";
        }
    }

    protected void OnSelect(IEnumerable<Employee> newSelected)
    {
        var validItemsToSelect = newSelected.Where(x => x.Active);
        SelectedEmployees = validItemsToSelect;
        if (validItemsToSelect.Count() < newSelected.Count())
        {
            _js.InvokeVoidAsync("uncheckGrid");
        }
    }

    protected override void OnInitialized()
    {
        for (int i = 1; i <= 7; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = $"Employee {i}",
                Team = $"Team {i % 3 + 1}",
                Active = i % 2 == 0
            });
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string Name { get; set; } = string.Empty;
        public string Team { get; set; } = string.Empty;
        public bool Active { get; set; }
    }
}

<GridColumn Field="@nameof(SalesOrderLineItem.Quantity)">
    <HeaderTemplate>
        <span title="Order Quantity">Order Quantity</span>
    </HeaderTemplate>
</GridColumn>

@using System.Collections.ObjectModel;

<div style="align-self:center;text-align:center" class="alert-danger">
    @errorMessages
</div>
<div style="align-self:center;text-align:center" class="alert-success">
    @successMessages
</div>
<TelerikGrid Data=@entitlementsExtended
             Pageable="true"
             Groupable="false"
             PageSize="@PageSize"
             OnUpdate="@UpdateHandler"
             Sortable="false"
             FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu">
    <GridColumns>
        <GridColumn Field="@nameof(EntitlementValueDTOExtended.Description)" Editable="false" />
        <GridColumn Field=@nameof(EntitlementValueDTOExtended.Value)>
            <EditorTemplate>
                @{
                    CurrentlyEditedEntitlement = context as EntitlementValueDTOExtended;
                    <div>
                        <TelerikDropDownList Data="@entitlementOptions" @bind-Value="CurrentlyEditedEntitlement.Value" Width="60px" PopupHeight="auto"></TelerikDropDownList>
                    </div>
                }
            </EditorTemplate>
        </GridColumn>

        <GridCommandColumn Width="300px">
            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
        </GridCommandColumn>
    </GridColumns>
</TelerikGrid>

@code {
    int PageSize = 10;
    public EntitlementValueDTOExtended CurrentlyEditedEntitlement { get; set; } = new EntitlementValueDTOExtended();

        //changing this to List<> works
    public ObservableCollection<EntitlementValueDTOExtended> entitlementsExtended { get; set; } = new ObservableCollection<EntitlementValueDTOExtended>();

    public static List<string> entitlementOptions = new List<string> { "I", "E" };

    public string errorMessages { get; set; } = "";
    public string successMessages { get; set; } = "";

    protected async override Task OnInitializedAsync()
    {
        IEnumerable<int> entitlements = Enumerable.Range(1, 50);

        //this is a simplified workaround for people needing nested models
        foreach (var entitlement in entitlements)
        {
            EntitlementValueDTOExtended entitlementExtended = new EntitlementValueDTOExtended();
            entitlementExtended.Id = Guid.NewGuid();
            entitlementExtended.Description = $"descr {entitlement}";
            entitlementExtended.Value = $"value {entitlement}";
            entitlementExtended.EntitlementTypeId = entitlement;

            entitlementsExtended.Add(entitlementExtended);
        }
        StateHasChanged();

        await base.OnInitializedAsync();
    }

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

        var matchingItem = entitlementsExtended.FirstOrDefault(c => c.Id == item.Id);
        if (matchingItem != null)
        {
            matchingItem.Description = item.Description;
            matchingItem.EntitlementTypeId = item.EntitlementTypeId;
            matchingItem.Value = item.Value;
        }

        successMessages = $"updated grid on {DateTime.Now}";
        StateHasChanged();

    }

    public class EntitlementValueDTOExtended
    {
        public Guid Id { get; set; }
        public string Description { get; set; } = "";
        public string Value { get; set; } = "";
        public int EntitlementTypeId { get; set; } = 0;
    }

<ColumnMenuTemplate>
<CustomColumnMenuItem/>
<ColumnMenuFiltering/>
<ColumnMenuSorting/>
....
</ColumnMenuTemplate>

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