Creating a Block Display within a Syncfusion dropdown menu

Question

I am trying to create a Syncfusion Blazor component that shows the title of the dropdown (Client Name) and then underneath, within the dropdown item, shows how many projects and users are assigned to that specific client.

I have methods to get the number of projects and users, however I am struggling with the component to display them correctly within my program:

Component:

@using Syncfusion.Blazor.DropDowns
@typeparam TItem
@typeparam TValue
@inherits ContextAwareComponent

<SfDropDownList TItem="TItem" TValue="TValue">
    @foreach(var client in Clients)
    {
        <option value="@client.Id">
            <div>
                <div>
                    <span>@client.Name</span>
                </div>
                <div>
                    <span>
                           @(ClientProjectCount()) Project
                        <svg>
                            <circle r="5px"></circle>
                        </svg>
                           @(ClientUserCount()) Users
                    </span>
                </div>
            </div>
        </option>
    }
</SfDropDownList>

The design looks like this:

Can anybody enlighten me as to how I can create this?

Thanks in advance.

Answer 1

You can use ValueTemplate and ItemTemplate for your requirement. ValueTemplate specifies the template that will be used to display the selected value in the dropdown. ItemTemplate specifies the template that will be used to display each item in the dropdown list.

@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns

<div style="margin:130px auto;width:300px">
    <SfDropDownList TValue="string" TItem="client" Placeholder="Select a customer" Index="0" DataSource="@ClientProject">

        <DropDownListTemplates TItem="client">

            <ItemTemplate>

                <div><span class='name'>@((context as client).Name)</span><br /><span class='project'>@((context as client).Project)  Project</span><span class='users'>@((context as client).Users) Users</span></div>

            </ItemTemplate>

            <ValueTemplate>

                <div><span class='name'>@((context as client).Name)</span><br /><span class='project'>@((context as client).Project)  Project</span><span class='users'>@((context as client).Users) Users</span></div>

            </ValueTemplate>

        </DropDownListTemplates>
        <DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>
    </SfDropDownList>
</div>

@code {

    public class client
    {
        public string Name { get; set; }
        public string Id { get; set; }
        public string Project { get; set; }
        public string Users { get; set; }

    }

    List<client> ClientProject = new List<client>
    {
        new client() { Name = "User 1", Id = "1", Project="1", Users= "2"},
        new client() { Name = "User 2", Id = "2", Project="2", Users= "5"},
        new client() { Name = "User 3", Id = "3", Project="3", Users= "7"},
        new client() { Name = "User 4", Id = "4", Project="4", Users= "3"}
    };
}

<style>
    .name {
        color: cadetblue;
        font-size: 16px;
    }
    .project {
        float: left;
        font-size: 12px;
    }
    .users {
        float: left;
        font-size: 12px;
        margin-left: 10px;
    }
    .e-ddl.e-input-group .e-input-value{
        padding:3%;
    }
</style>

OutPut Reference:

Also, you can refer to the below shared documentation for more information,

https://blazor.syncfusion.com/documentation/dropdown-list/templates