Month: February 2023

How to convert Synchronous code to Asynchronous code in Blazor ?

ChandradevLeave 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 ?

ChandradevLeave 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; }
    }
}