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

<TelerikGrid Data="salesTeamMembers" PageSize="4" Pageable="true" @bind-SelectedItems="@SelectedItemsMainGrid" SelectionMode="@GridSelectionMode.Single">
    <DetailTemplate>
        @{
            var employee = context as MainModel;
            <TelerikGrid Data="employee.Orders" Pageable="true" PageSize="7" SelectionMode="@GridSelectionMode.None">
                <GridColumns>
                    <GridColumn Field="OrderId"></GridColumn>
                    <GridColumn Field="DealSize"></GridColumn>
                </GridColumns>
            </TelerikGrid>
        }
    </DetailTemplate>
    <GridColumns>
        <GridColumn Field="Id"></GridColumn>
        <GridColumn Field="Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

@foreach (var item in SelectedItemsMainGrid)
{
    <div>@item.Name</div>
}

@code {
    List<MainModel> salesTeamMembers { get; set; }
    public IEnumerable<MainModel> SelectedItemsMainGrid { get; set; } = Enumerable.Empty<MainModel>();

    protected override void OnInitialized()
    {
        salesTeamMembers = GenerateData();
    }

    private List<MainModel> GenerateData()
    {
        List<MainModel> data = new List<MainModel>();
        for (int i = 1; i < 16; i++)
        {
            MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
            mdl.Orders = Enumerable.Range(1, 15).Select(x => new DetailsModel { OrderId = x, DealSize = x ^ i }).ToList();
            data.Add(mdl);
        }
        return data;
    }

    public class MainModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<DetailsModel> Orders { get; set; }
    }

    public class DetailsModel
    {
        public int OrderId { get; set; }
        public double DealSize { get; set; }
    }
}

@selectedValue

<TelerikDropDownList Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="@selectedValue">
</TelerikDropDownList>

@code {
    //in a real case, the model is usually in a separate file
    //the model type and value field type must be provided to the dropdpownlist
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    int selectedValue { get; set; }
}

<TelerikComboBox Data="@MyList" @bind-Value="MyItem">
</TelerikComboBox>

@code {
    protected List<string> MyList = new List<string>() { "first", "second", "third" };
    protected string MyItem { get; set; } = "second";
}

<TelerikGrid Data=@sysVars.Dtos Pageable="true" Sortable="true" FilterMode="Telerik.Blazor.GridFilterMode.FilterRow" PageSize="20" TotalCount=@sysVars.Count OnRead=@ReadItems>
        <GridColumns>
            <GridColumn Field=@nameof(SysVar.SysVarType.Name) Title="Type" Editable="false">
                <Template>
                    @{
                        var data = context as SysVar;
                        @data.SysVarType.Name
                    }
                </Template>
            </GridColumn>
            <GridColumn Field=@nameof(SysVar.Value) Title="Value">
                <Template>
                    @{
                        var data = context as SysVar;
                        var link = SysVarDto.FrontEndEditUrl(data.Id.Value);
                        <NavLink href=@link>@data.Value</NavLink>
                    }
                </Template>
            </GridColumn>
            <GridColumn Field=@nameof(SysVar.Hierarchy.Description) Title="Hierarchy">
                <Template>
                    @{
                        var data = context as SysVar;
                        @data.Hierarchy.Description
                    }
                </Template>
            </GridColumn>
        </GridColumns>
    </TelerikGrid>

 public class SysVar 
    {
        public string Value { get; set; }

        public Hierarchy Hierarchy { get; set; }

        public SysVarType SysVarType { get; set; }
}

public class Hierarchy 
{
      public string Description { get; set; }
}

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

https://localhost:44335/odata/v1/SysVarOData?$count=true&$expand=sysVarType($select=name),hierarchy($select=description)&$skip=0&$top=20&$orderby=value,sysVarType/name

https://localhost:44335/odata/v1/SysVarOData?$count=true&$expand=sysVarType($select=name),hierarchy($select=description)&$skip=0&top=20&$orderby=Name