英文:
Creating a Block Display within a Syncfusion dropdown menu
问题
我试图创建一个Syncfusion Blazor组件,用于显示下拉菜单的标题(客户名称),然后在下拉菜单项内显示分配给特定客户的项目数和用户数。
我有获取项目数和用户数的方法,但是我在组件中如何正确显示它们方面遇到了问题:
组件:
@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()) 项目
<svg>
<circle r="5px"></circle>
</svg>
@(ClientUserCount()) 用户
</span>
</div>
</div>
</option>
}
</SfDropDownList>
有人能告诉我如何创建这个吗?
提前感谢。
英文:
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>
Can anybody enlighten me as to how I can create this?
Thanks in advance.
答案1
得分: 1
可以使用ValueTemplate和ItemTemplate来满足您的需求。ValueTemplate指定用于在下拉列表中显示所选值的模板。ItemTemplate指定用于在下拉列表中显示每个项目的模板。
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.DropDowns
<div style="margin:130px auto;width:300px">
<SfDropDownList TValue="string" TItem="client" Placeholder="选择客户" 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) 项目</span><span class='users'>@((context as client).Users) 用户</span></div>
</ItemTemplate>
<ValueTemplate>
<div><span class='name'>@((context as client).Name)</span><br /><span class='project'>@((context as client).Project) 项目</span><span class='users'>@((context as client).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 = "用户 1", Id = "1", Project="1", Users= "2"},
new client() { Name = "用户 2", Id = "2", Project="2", Users= "5"},
new client() { Name = "用户 3", Id = "3", Project="3", Users= "7"},
new client() { Name = "用户 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>
输出参考:
还可以参考下面共享的文档以获取更多信息:
https://blazor.syncfusion.com/documentation/dropdown-list/templates
英文:
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>
Also, you can refer to the below shared documentation for more information,
https://blazor.syncfusion.com/documentation/dropdown-list/templates
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论