Blazor Telerik

Creating Auto Expand of popup Width of Telerik Blazor DropDownList.

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