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

@using Telerik.DataSource

This custom filter menu lets you choose more than one option to match against the data source

<TelerikGrid Data=@GridData FilterMode="@GridFilterMode.FilterMenu"
             Height="400px" Width="600px" Pageable="true">
    <GridColumns>
        <GridColumn Field="Id" Filterable="false" Width="80px" />

        <GridColumn Field="Size">
            <FilterMenuTemplate>
                @{
                    // we store a reference to the filter context to use in the business logic to show we can
                    // we could, alternatively pass it as an argument to the event handler in the lambda expression
                    // which can be useful if you want to use the same filter for several columns
                    // you could then pass more arguments to the business logic such as field name and so on
                    theFilterContext = context;
                }

                @foreach (var size in Sizes)
                {
                    <div>
                        <TelerikCheckBox Value="@(IsCheckboxInCurrentFilter(context.FilterDescriptor, size))"
                                         TValue="bool"
                                         ValueChanged="@((value) => UpdateCheckedSizes(value, size))"
                                         Id="@($"size_{size}")">
                        </TelerikCheckBox>
                        <label for="@($"size_{size}")">
                            @if (size == null) // part of handling nulls - show meaningful text for the end user
                            {
                                <text>Empty</text>
                            }
                            else 
                            {
                                @size
                            }
                        </label>
                    </div>
                }
            </FilterMenuTemplate>
        </GridColumn>

        <GridColumn Field="ProductName" Title="Product" Filterable="false" />
    </GridColumns>
</TelerikGrid>

@code {
    FilterMenuTemplateContext theFilterContext { get; set; }
    public List<string> CheckedSizes { get; set; } = new List<string>();

    public bool IsCheckboxInCurrentFilter(CompositeFilterDescriptor filterDescriptor, string size)
    {
        // get all current filter descriptors and evaluate whether to select the current checkbox
        // the default value for string filter descriptors is null so it would select the null checkbox always
        // so we will add a check to ensure it matches the desired operator - IsNull (see the UpdateCheckedSizes method below)
        if (size == null)
        {
            foreach (FilterDescriptor item in filterDescriptor.FilterDescriptors)
            {
                if(item.Operator == FilterOperator.IsNull)
                {
                    return true;
                }
            }
            return false;
        }
        return filterDescriptor.FilterDescriptors.Select(f => (f as FilterDescriptor).Value?.ToString()).ToList().Contains(size);
    }

    public void UpdateCheckedSizes(bool value, string itemValue)
    {
        // update the list of items we want to filter by
        var isSizeChecked = CheckedSizes.Contains(itemValue);
        if (value && !isSizeChecked)
        {
            CheckedSizes.Add(itemValue);
        }

        if (!value && isSizeChecked)
        {
            CheckedSizes.Remove(itemValue);
        }

        // prepare filter descriptor
        var filterDescriptor = theFilterContext.FilterDescriptor;

        filterDescriptor.FilterDescriptors.Clear();
        // use the OR logical operator so we include all possible values
        filterDescriptor.LogicalOperator = FilterCompositionLogicalOperator.Or;
        CheckedSizes.ForEach(s => {
            // instantiate a filter descriptor for the desired field, and with the desired operator and value
            FilterDescriptor fd = new FilterDescriptor("Size", FilterOperator.IsEqualTo, s);
            // set its type to the field type you filter (the Size field in this example)
            fd.MemberType = typeof(string);
            // handle null values - use a specific filter operator that the user cannot select on their own
            // in this custom filter template (the grid has it in a dropdown by default)
            if(s == null)
            {
                fd.Operator = FilterOperator.IsNull;
            }

            filterDescriptor.FilterDescriptors.Add(fd);
        });

        //ensure there is at least one blank filter to avoid null reference exceptions
        if (!filterDescriptor.FilterDescriptors.Any())
        {
            filterDescriptor.FilterDescriptors.Add(new FilterDescriptor());
        }
    }

    // sample grid data

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

    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 70).Select(x => new SampleData
        {
            Id = x,
            Size = Sizes[x % Sizes.Length],
            ProductName = $"Product {x}"
        }).ToList();
        base.OnInitialized();
    }

    public class SampleData
    {
        public int Id { get; set; }
        public string Size { get; set; }
        public string ProductName { get; set; }
    }

    public string[] Sizes = new string[] { "XS", "S", "M", "L", "XL", null };
}