Blazor – Chandradev's Blog

How to use html dropdown in Blazor

March 30, 2024ChandradevLeave a comment

While working on a Blazor project, so many times we will use plain HTML dropdown. In this scenario, we will get a requirement to trigger the event and reset the selection item to the initial state.

Here are some code snippets for completing this task.

Approach 1:

@page "/counter"

<select @onchange="OptionChanged" value="@selectedOption">
    <option value="-1">Select Option</option>
    @foreach (var option in options)
    {
        <option value="@option">@option</option>
    }
</select>

<button @onclick="ClearSelection">Clear Selection</button>

@code {
    private List<string> options = new List<string> { "Option 1", "Option 2", "Option 3" };
    private string selectedOption { get; set; } = "-1"; // Set default value to "-1"

    private void OptionChanged(ChangeEventArgs e)
    {
        // Extract the selected value from the event argument
        string selectedValue = e.Value.ToString();
        Console.WriteLine($"Selected option: {selectedValue}");
        // Assign the selected value to the selectedOption variable
        selectedOption = selectedValue;
    }

    private void ClearSelection()
    {
        // Clear the selected option
        selectedOption = "-1"; // Reset to default value "-1"
        StateHasChanged(); // Trigger a UI update
    }
}

Approach 2:

@page "/"

<PageTitle>Home</PageTitle>

<select @onchange="OptionChanged" value="@selectedOption">
    <option value="">Select Option</option>
    @foreach (var option in options)
    {
        <option value="@option">@option</option>
    }
</select>

<button @onclick="ClearSelection">Clear Selection</button>

@code {
    private List<string> options = new List<string> { "Option 1", "Option 2", "Option 3" };
    private string selectedOption { get; set; } = "";

    private void OptionChanged(ChangeEventArgs e)
    {
        // Extract the selected value from the event argument
        string selectedValue = e.Value.ToString();
        Console.WriteLine($"Selected option: {selectedValue}");
        // Assign the selected value to the selectedOption variable
        selectedOption = selectedValue;
    }

    private void ClearSelection()
    {
        // Clear the selected option
        selectedOption = "";
        // Trigger a UI update
        StateHasChanged();
    }
}

Summary:

In this code snippet, we demonstrate how to handle various scenarios using an HTML dropdown in Blazor.

Creating Auto Expand of popup Width of Telerik Blazor DropDownList.

July 17, 2023July 17, 2023ChandradevLeave a comment

So many we will get requirement to expand popup width on basis of text Content while working with Blazor Telerik dropdown.

We can do like this

@page "/counter"

<TelerikDropDownList Data="@DropDownData" Width="auto" 
                     Value="@DropDownValue" 
                     ValueChanged="@( (string newValue) => OnDropDownValueChanged(newValue) )">
                     <DropDownListSettings>
                         <DropDownListPopupSettings Width="Auto"/>
                     </DropDownListSettings>
</TelerikDropDownList>

@code {
    private List<string> DropDownData { get; set; } = new List<string> {
        "Manager", "Developer", "QA", "Technical Writer Technical Write", "Support Engineer"
    };

    private string DropDownValue { get; set; } = "Developer";
    private void OnDropDownValueChanged(string newValue)
    {
        DropDownValue = newValue;
    }
}

How to convert Synchronous code to Asynchronous code in Blazor ?

February 25, 2023ChandradevLeave a comment

If we are going to keep progress bar in Blazor then method should be Asynchronous otherwise it will not work.

If your code is Synchronous, then we need to convert Asynchronous code like given below

How to create cascading grid in Blazor Telerik Grid ?

February 23, 2023ChandradevLeave a comment

In Blazor Telerik Grid, we can easily achieve using DetailTemplate. We donot have to keep grid inside another grid.

Here is the code snippet.

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

<TelerikGrid Data="salesTeamMembers"
             OnRowCollapse="@OnRowCollapseHandler">
    <DetailTemplate>
        @{
            var employee = context as MainModel;
            <TelerikGrid Data="employee.Orders" Pageable="true" PageSize="5">
                <GridColumns>
                    <GridColumn Field="OrderId"></GridColumn>
                    <GridColumn Field="DealSize"></GridColumn>
                </GridColumns>
            </TelerikGrid>
        }
    </DetailTemplate>
    <GridColumns>
        <GridColumn Field="Id"></GridColumn>
        <GridColumn Field="Name"></GridColumn>
    </GridColumns>
</TelerikGrid>

<br />


@code {
    void OnRowCollapseHandler(GridRowCollapseEventArgs args)
    {
        MainModel item = args.Item as MainModel;
    }
 
    List<MainModel> salesTeamMembers { get; set; }

    protected override void OnInitialized()
    {
        salesTeamMembers = GenerateData();
    }

    private List<MainModel> GenerateData()
    {
        List<MainModel> data = new List<MainModel>();
        for (int i = 0; i < 5; i++)
        {
            MainModel mdl = new MainModel { Id = i, Name = $"Name {i}" };
            mdl.Orders = Enumerable.Range(1, 15).Select(x => new DetailsModel { OrderId = x, DealSize = x ^ i }).ToList();
            data.Add(mdl);
        }
        return data;
    }

    public class MainModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public List<DetailsModel> Orders { get; set; }
    }

    public class DetailsModel
    {
        public int OrderId { get; set; }
        public double DealSize { get; set; }
    }
}

How to change port number in Blazor 6.0/7.0 ?

January 13, 2023ChandradevLeave a comment

If we are working on asp.net core web api or Blazor application, so many time we will get requirement to change the port number. but on dotnet 6.0 and 7.0, they have changed the approach to change port number. Now we cannot do using right click and properties options.

For this we need to do

Step 1: Go to debug properties