Month: September 2022

DataGrid Control in Blazor Radzen (Part 3)

ChandradevLeave a comment

DataGrid is one of the most used controls in web application. Radzen is giving us very powerful grid controls. Which has default support of Sorting, Filtering, paging and Virtualization

Before using this code, Please configure your project for Radzen Controls like this

https://chandradev819.wordpress.com/2022/09/28/getting-started-with-radzen-blazor-controls/

@page "/grid"
@using RadzenTest.Shared
@inject HttpClient Http
<h3>RadzenGrid</h3>

<RadzenDataGrid Data="@forecasts"
                TItem="WeatherForecast"
                AllowVirtualization="true"
                AllowPaging="true"
                 PageSize="10"
                AllowFiltering="true"
                FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
                LogicalFilterOperator="LogicalFilterOperator.Or"
                AllowSorting="true">
    <Columns>
        <RadzenDataGridColumn TItem="WeatherForecast" Property="Date" Title="Date">
            <Template Context="forecasts">
                @forecasts.Date.ToShortDateString()
            </Template>
        </RadzenDataGridColumn>

         <RadzenDataGridColumn TItem="WeatherForecast" Property="TemperatureC" Title="TemperatureC" />
        <RadzenDataGridColumn TItem="WeatherForecast" Property="Summary" Title="Summary" />
        <RadzenDataGridColumn TItem="WeatherForecast" Property="TemperatureF" Title="TemperatureF" />

    </Columns>
</RadzenDataGrid>


@code {
    private WeatherForecast[]? forecasts;
   
    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast");
    }
}

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.

Displaying Popup window in Blazor using Radzen Control

ChandradevLeave a comment

We can display the Popup window in Blazor using Radzen Controls like this

Step 1: Configure the project setup like this https://chandradev819.wordpress.com/2022/09/28/getting-started-with-radzen-blazor-controls/

Step 2: Register the Dialogs service like this

Step 3: Include <RadzenDialog/> component as global in Shared\MainLayout.razor

Step 4: Create any Razor component and write the code for simple popup window like this

@page "/popup"
@inject DialogService DialogService

<RadzenButton ButtonType="ButtonType.Submit" Text="Test Popup" TextTransform="None" 
Click=@(args => DialogService.Confirm("Confirm Action?", "Test Popup", new ConfirmOptions() { OkButtonText = "Yes", CancelButtonText = "No" })) />

Now we will create cascading popup window

@page "/SimplePopup"
@inject DialogService DialogService
<RadzenButton Text="Show dialog with inline Blazor content" Click=@ShowInlineDialog />

@code {
    async Task ShowInlineDialog()
    {
        var result = await DialogService.OpenAsync("Login Popup", ds =>
    @<div>
        <div class="row">
            <fieldset class="border p-2">
                <legend class="w-auto">
                    <div class="col-md-6">
                        <RadzenButton Text="Login as User" Click="() => LoginAsUser()"
                                  Style="margin-bottom: 10px; width: 250px" />
                        <RadzenButton Text="Login as Guest" Click="() => LoginAsGuest()"
                                  Style="margin-bottom: 10px; width: 250px" />
                        <RadzenButton Text="Login as Admin" Click="() => LoginAsAdmin()"
                                  Style="margin-bottom: 10px; width: 250px" />
                    </div>
                </legend>
            </fieldset>
        </div>
    </div>
    );

        Console.WriteLine($"Dialog result: {result}");
    }

    async Task ShowInlineDialog1()
    {
        var result = await DialogService.OpenAsync("Login Popup", ds =>
    @<div>
        <div class="row">
            <fieldset class="border p-2">
                <legend class="w-auto">
                    <div class="col-md-12">
                        <p>Testing</p>
                    </div>
                </legend>
            </fieldset>
        </div>
    </div>
    );

        Console.WriteLine($"Dialog result: {result}");
    }
    private void LoginAsUser()
    {
        ShowInlineDialog1();
    }
    private void LoginAsGuest()
    {

    }
    private void LoginAsAdmin()
    {

    }
}

Summary: In above post we saw that it is very straight forward to create model popup in Blazor using Radzen Controls.

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.

Getting started with Radzen Blazor Controls

ChandradevLeave a comment

In recent few months I got a chance to work with Radzen Blazor Controls. It is good for rapid development on Blazor project.

why should we choose this controls ?

  1. It is free open source controls.
  2. They have created 60+ free and open source native Blazor UI controls.
  3. Latest Version controls are fully stable and bugs free.

How to integrate in Blazor Project ?

It is very simple to integrate in Blazor Project

Step 1: Create the Blazor Project

Step 2: Add  Radzen.Blazor from Nuget package manager.

Step 3: Add the CSS and Javascript file like this

For Blazor Server .NET 6+

 >> Pages\_Layout.cshtml

For Blazor WebAssembly

>> wwwroot/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>RadzenTest</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="RadzenTest.Client.styles.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
    <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
    
    <link rel="stylesheet" href="_content/Radzen.Blazor/css/standard-base.css">
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
    <script>navigator.serviceWorker.register('service-worker.js');</script>
</body>

</html>

Step 4: Now use the controls like this

Step 5: Run the application, It will look like this

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.

Cascading ComboBox in Telerik Blazor

ChandradevLeave a comment

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.