Cascading ComboBox in Telerik Blazor


Recently I got a chance to work with Cascading ComboBox using Telerik. We can implemented this functionalities as given below.

<p>Category</p>
<TelerikComboBox Value="@Currentproduct.CategoryId"
                 Data="@Categories"
                 Placeholder="Select Category"
                 TextField="CategoryName" ValueField="CategoryId" Filterable="true"
                 ValueChanged="@( (int? c) => CategorySelected(c) )">
</TelerikComboBox>
<br />
<br />
<p>Product</p>
<TelerikComboBox Value="@Currentproduct.ProductId" Data="@CurrentProducts"
                 Placeholder="Select Product" Filterable="true"
                 TextField="ProductName" ValueField="ProductId"
                 Enabled="@( Currentproduct.CategoryId > 0 )">
</TelerikComboBox>

<p>Selected CategoryId:@Currentproduct.CategoryId </p> 
<p>Selected CategoryName:@Currentproduct.CategoryName</p>


@code {
    // data sources
    List<Category> Categories { get; set; }
    List<Product> AllProducts { get; set; }
    List<Product> CurrentProducts { get; set; }
    List<int> Quantities { get; set; }
    // model
    Product Currentproduct { get; set; } = new Product();

    protected override void OnInitialized()
    {
        base.OnInitialized();

        Categories = Enumerable.Range(1, 6).Select(x => new Category
            {
                CategoryId = x,
                CategoryName = $"Category {x}"
            }).ToList();

        AllProducts = Enumerable.Range(1, 50).Select(x => new Product
            {
                ProductId = x,
                ProductName = $"Product {x}",
                CategoryId = (int)Math.Ceiling((double)x % 7)
            }).ToList();
    }

    //ValueChanged handlers - for cascading comboBox
    void CategorySelected(int? category)
    {
        // the default value - the user selected the default item == deselected the current item
        if (category == null) 
        {
            //reset the "form" / process
            Currentproduct = new Product();
            return;
        }

        // cascade the selection by filtering the data for the next dropdown
        CurrentProducts = AllProducts.Where(p => p.CategoryId == category).ToList();

        // get the selected model from the data source
        Category SelectedCategory = Categories.Where(c => c.CategoryId == category).First();

        // business logic
        Currentproduct.CategoryId = SelectedCategory.CategoryId;
        Currentproduct.CategoryName = SelectedCategory.CategoryName;
    }

    public class Category
    {
        public int CategoryId { get; set; }
        public string CategoryName { get; set; }
    }

    public class Product
    {
        public int CategoryId { get; set; }
        public string CategoryName { get; set; }
        public int ProductId { get; set; }
        public string ProductName { get; set; }
    }
}

Hey, Thanks for reading the blog post, I am in the market, looking for new freelance employment opportunities. If you need assistance on any of your ASP.NET Core Blazor projects, I am available for hire for freelance work.

Databinding in Blazor Teleric Grid


Recently I was doing POC demo with Telerik Blazor Grid. It is very powerful and user friendly to developer.

Here is the complete code snippet for data binding in grid

@page "/grid"
<h3>GridDemo</h3>

<TelerikGrid Data="@GridData" SelectionMode="@selectionMode"
             Pageable="true" @bind-SelectedItems="@SelectedItems"
             Sortable="true"
             FilterMode="@GridFilterMode.FilterRow">
    <GridColumns>
        <GridCheckboxColumn SelectAll="@ShowSelectAll"></GridCheckboxColumn>
        <GridColumn Field="Name" Title="Product Name" />
        <GridColumn Field="Price" />
        <GridColumn Field="@(nameof(Product.Released))" />
        <GridColumn Field="@(nameof(Product.Discontinued))" />
    </GridColumns>
</TelerikGrid>
<h2>Selected Items:</h2>
<ul>
    @foreach (Product product in SelectedItems)
    {
        <li>
            @product.Name 
        </li>
    }
</ul>

@code {
    GridSelectionMode selectionMode { get; set; } = GridSelectionMode.Multiple;
    List<Product> GridData { get; set; }
    bool ShowSelectAll => selectionMode == GridSelectionMode.Multiple;
    public IEnumerable<Product> SelectedItems { get; set; } = new List<Product>();

    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 30).Select(x => new Product
            {
                Id = x,
                Name = "Product name " + x,
                Price = (decimal)(x * 3.14),
                Released = DateTime.Now.AddMonths(-x).Date,
                Discontinued = x % 5 == 0
            }).ToList();

        base.OnInitialized();
    }

    void ClearSelection(ChangeEventArgs e)
    {
        Enum.TryParse(e.Value.ToString(), out GridSelectionMode chosenMode);
        selectionMode = chosenMode;
        if (chosenMode == GridSelectionMode.Single)
        {
            Product selectedItem = null;
            if (SelectedItems.Count() > 0)
            {
                selectedItem = SelectedItems.Last();
            }
            var TempItems = new List<Product>();
            if (selectedItem != null)
            {
                TempItems.Add(selectedItem);
            }
            SelectedItems = TempItems.AsEnumerable<Product>();
        }
    }
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
        public DateTime Released { get; set; }
        public bool Discontinued { get; set; }
    }
}