There are so many chart components (Controls) in Radzen. It is very simple and straight forward to use in project. It will save lots of our development time.

In this post, I will take few charts controls

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

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

Line Chart In Radzen

@page "/linechart"
@using RadzenTest.Shared
@inject HttpClient Http
<h3>LineChart Demo</h3>

<RadzenChart>
    <RadzenLineSeries Smooth="true"
                      Data="@forecasts"
                      CategoryProperty="Date"
                      Title="Temp. C"
                      LineType="LineType.Solid"
                      ValueProperty="TemperatureC">
        <RadzenMarkers MarkerType="MarkerType.Circle" />
    </RadzenLineSeries>
    <RadzenLineSeries Smooth="true"
                      Data="@forecasts"
                      CategoryProperty="Date"
                      Title="Temp. F"
                      LineType="LineType.Solid"
                      ValueProperty="TemperatureF">
        <RadzenMarkers MarkerType="MarkerType.Circle" />
    </RadzenLineSeries>
    <RadzenValueAxis>
        <RadzenGridLines Visible="true" />
        <RadzenAxisTitle Text="Temp" />
    </RadzenValueAxis>
</RadzenChart>


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

Column Chart Controls

@page "/columnchart"
<h3>ColumnChart Demo</h3>

<RadzenChart>
  <RadzenColumnSeries Data="@revenue" CategoryProperty="Quarter" ValueProperty="Revenue" />
</RadzenChart>
@code {
  class DataItem
  {
      public string Quarter { get; set; }
      public double Revenue { get; set; }
  }

  DataItem[] revenue = new DataItem[]
  {
      new DataItem
      {
          Quarter = "Q1",
          Revenue = 234000
      },
      new DataItem
      {
          Quarter = "Q2",
          Revenue = 284000
      },
      new DataItem
      {
          Quarter = "Q3",
          Revenue = 274000
      },
      new DataItem
      {
          Quarter = "Q4",
          Revenue = 294000
      }
  };
}

Summary: In the above code snippet, we saw few Radzen chart controls. we saw that it is very simple to use on Blazor project. There are nearly 10 different chart controls in Radzen. We can select the chart control depending on our scenario.

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.

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.

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.