@typeparam T
@typeparam TResource
<div class="row"><label class="col-md-2">@Label</label><div class="col-md-5"><TelerikComboBox Value="@ResultValue" Data="@Resource" Placeholder="@Placeholder" Filterable="@Filterable"
                             TextField="@TextField" ValueField="@ValueField" Enabled="@Enabled" Id="@ID" Width="100%"
                             ValueChanged="@ResultValueChanged"></TelerikComboBox></div></div>

@code {
    [Parameter] public bool bBindData { get; set; } = false;
    [Parameter] public string Label { get; set; }
    [Parameter] public T ResultValue { get; set; }
    [Parameter] public List<TResource> Resource { get; set; }
    [Parameter] public string Placeholder { get; set; } = "Select Item";
    [Parameter] public bool Filterable { get; set; } = false;
    [Parameter] public string Width { get; set; } = "100%";
    [Parameter] public string TextField { get; set; }
    [Parameter] public string ValueField { get; set; }
    [Parameter] public bool Enabled { get; set; }
    [Parameter] public string ID { get; set; } = "TelerikComboBox" + Guid.NewGuid().ToString();
    [Parameter] public EventCallback<T> ResultValueChanged { get; set; }

}

@using System.Linq.Expressions
<div class="card">
    <div class="card-body">
        @foreach (var item in Contents)
        {
            @item
            ;
        }
    </div>
</div>


@code {
    [Parameter]
    public List<Blazor_Dynamic.Shared.FabComponet> Componets { get; set; }

    public List<RenderFragment> Contents { get; set; }

    protected override void OnInitialized()
    {
        if (Componets.Count() > 0 && Componets != null)
        {
            CreateFragment();
        }

        base.OnInitialized();
    }
    public void CreateFragment()
    {
        int iComponent = 0;
        List<RenderFragment> RFTs = new List<RenderFragment>();
        foreach (var area in Componets)
        {

            RenderFragment renderFragment = (builder) =>
            {
                object o = new object();


                builder.OpenComponent(iComponent, area.Type);
                int iDic = 0;
                foreach (var item in area.Dic)
                {
                    builder.AddAttribute(iDic, item.Key, item.Value);
                }
                builder.CloseComponent();
            };
            RFTs.Add(renderFragment);
        }
        Contents = RFTs;
    }
}

@page "/DynamicConnect"
<h3>DynamicConnect</h3>

@inject IProductRepository IProductRepo

<DynamicTable Componets="@liComponets"></DynamicTable>


<p> @CurrentType </p>
<p> @CurrentProduct </p>


@code {
    public List<Product> products { get; set; }
    public List<Selection> productTypes { get; set; }
    private Selection productType { get; set; }
    public Product product { get; set; }
    private string CurrentType { get; set; }
    private Guid? CurrentProduct { get; set; }
    private string sFullProductInfo { get; set; }
    public List<FabComponet> liComponets { get; set; }

    public class Selection
    {
        public string id { get; set; }
        public string text { get; set; }
    }
    protected override void OnInitialized()
    {
        products = IProductRepo.GetProducts();
        productTypes = (from w in products group w by w.Type into g select g.First()).Select(x => new Selection { id = x.Type, text = x.Type }).ToList();


        List<FabComponet> FCs = new List<FabComponet>();
        var dic = new Dictionary<string, object>();
        dic.Add("Label", "Product Category");
        dic.Add("Resource", productTypes);
        dic.Add("ResultValue", CurrentType);
        dic.Add("Placeholder", "Select Somthing??");
        dic.Add("TextField", "id");
        dic.Add("ValueField", "text");
        dic.Add("Filterable", false);
        dic.Add("Enabled", true);
        dic.Add("Id", "cbxType");
        dic.Add("Width", "100%");
        dic.Add("ResultValueChanged", EventCallback.Factory.Create<System.String>(this, str => TypeSelected(str)));

        FabComponet First = new FabComponet() { Type = typeof(FabComboBox<string,Selection>), Row = "1", Length = "6", Seq = "1", Dic = dic };
        FCs.Add(First);

        var dic2 = new Dictionary<string, object>();
        dic2.Add("Label", "Product");
        dic2.Add("Resource", products);
        dic2.Add("ResultValue", CurrentProduct);
        dic2.Add("ValueField", nameof(Product.ID));
        dic2.Add("TextField", nameof(Product.ProductName));
        dic2.Add("Filterable", false);
        dic2.Add("Enabled", (CurrentType != null));
        dic2.Add("Id", "cbxProduct");
        dic2.Add("Width", "100%");
        dic2.Add("ResultValueChanged", EventCallback.Factory.Create<Nullable<System.Guid>>(this, x => ProductSelected(x)));
        FabComponet Sec = new FabComponet() { Type = typeof(FabComboBox<Nullable<Guid>,Product>), Row = "1", Length = "6", Seq = "1", Dic = dic2 };
        FCs.Add(Sec);

        liComponets = FCs;

        base.OnInitialized();
    }
    public void TypeSelected(string SelectionType)
    {
        products = IProductRepo.GetProductsByType(SelectionType);
        productType = productTypes.Where(x => x.id == SelectionType).First();
        CurrentType = SelectionType;
    }
    public void ProductSelected(Guid? SelectionProduct)
    {
        CurrentProduct = SelectionProduct.HasValue ? SelectionProduct.Value : null;
        product = products.Where(p => p.ID == SelectionProduct).First();
    }
}

@page "/"


<TelerikTabStrip Class="LeftPanelTabstrip" TabPosition="Telerik.Blazor.TabPosition.Top">
    <TabStripTab Title="paging">
        <button @onclick="buttonClick">Refresh</button>
        <TelerikTreeList Data="@Data"
                         IdField="EmployeeId"
                         ParentIdField="ReportsTo"
                         Pageable="true"
                         Class="MyTreeList">
            <TreeListColumns>
                <TreeListColumn Field="FirstName"></TreeListColumn>
                <TreeListColumn Field="LastName"></TreeListColumn>
                <TreeListColumn Field="DOB"></TreeListColumn>
                <TreeListColumn Field="EmployeeId"></TreeListColumn>
            </TreeListColumns>
        </TelerikTreeList>
    </TabStripTab>
    <TabStripTab Title="virtualized">
        <button @onclick="buttonClick">Refresh</button>
        <TelerikTreeList Data="@Data"
                         IdField="EmployeeId"
                         ParentIdField="ReportsTo"
                         ColumnVirtualization="true" Width="700px" Height="700px"
                         Class="MyTreeList">
            <TreeListColumns>
                <TreeListColumn Field="FirstName"></TreeListColumn>
                <TreeListColumn Field="LastName"></TreeListColumn>
                <TreeListColumn Field="DOB"></TreeListColumn>
                <TreeListColumn Field="EmployeeId"></TreeListColumn>
            </TreeListColumns>
        </TelerikTreeList>
    </TabStripTab>
    <TabStripTab Title="Not virtualized">
        <button @onclick="buttonClick">Refresh</button>
        <TelerikTreeList Data="@Data"
                         IdField="EmployeeId"
                         ParentIdField="ReportsTo"
                         Width="700px" Height="700px"
                         Class="MyTreeList">
            <TreeListColumns>
                <TreeListColumn Field="FirstName"></TreeListColumn>
                <TreeListColumn Field="LastName"></TreeListColumn>
                <TreeListColumn Field="DOB"></TreeListColumn>
                <TreeListColumn Field="EmployeeId"></TreeListColumn>
            </TreeListColumns>
        </TelerikTreeList>
    </TabStripTab>
    <TabStripTab Title="List View">
        <button @onclick="buttonClick">Refresh</button>
        <TelerikListView Data="@Data" Width="700px" Height="700px">
            <Template>
                <div style="display: grid;height: 40px;grid-template-columns: 1fr 1fr 1fr 1fr;grid-column-gap: 20px;">
                    <div>@context.FirstName</div>
                    <div>@context.LastName</div>
                    <div>@context.DOB</div>
                    <div>@context.EmployeeId.ToString()</div>
                </div>
            </Template>
        </TelerikListView>
    </TabStripTab>
    <TabStripTab Title="virtualize">
        <button @onclick="buttonClick">Refresh</button>
        <div style="height:700px">
            <Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize Items="Data" Context="context">
                <tr>
                    <td>
                        <div style="display: grid;height: 40px;grid-template-columns: 1fr 1fr 1fr 1fr;grid-column-gap: 20px;">

                            <div>@context.FirstName</div>
                            <div>@context.LastName</div>
                            <div>@context.DOB</div>
                            <div>@context.EmployeeId.ToString()</div>
                        </div>
                    </td>

                </tr>
            </Microsoft.AspNetCore.Components.Web.Virtualization.Virtualize>
        </div>
    </TabStripTab>
</TelerikTabStrip>
@code {
    public List<Employee> Data { get; set; }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string DOB { get; set; }

    }

    protected override void OnInitialized()
    {
        Populate();
    }

    public void Populate()
    {
        Data = new List<Employee>();
        var rand = new Random();
        int currentId = 1;

        for (int i = 1; i < 3000; i++)
        {
            string text = rand.Next().ToString();
            Data.Add(new Employee()
            {
                EmployeeId = currentId,

                FirstName = text + i.ToString(),
                LastName = text + i.ToString(),
                DOB = text + i.ToString()
            });

            currentId++;
        }
    }

    public void buttonClick()
    {
        Populate();
    }
}