在Syncfusion下拉菜单中创建一个块级显示

huangapple go评论66阅读模式
英文:

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>

设计看起来像这样:
在Syncfusion下拉菜单中创建一个块级显示

有人能告诉我如何创建这个吗?

提前感谢。

英文:

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

&lt;SfDropDownList TItem=&quot;TItem&quot; TValue=&quot;TValue&quot;&gt;
    @foreach(var client in Clients)
    {
        &lt;option value=&quot;@client.Id&quot;&gt;
            &lt;div&gt;
                &lt;div&gt;
                    &lt;span&gt;@client.Name&lt;/span&gt;
                &lt;/div&gt;
                &lt;div&gt;
                    &lt;span&gt;
                           @(ClientProjectCount()) Project
                        &lt;svg&gt;
                            &lt;circle r=&quot;5px&quot;&gt;&lt;/circle&gt;
                        &lt;/svg&gt;
                           @(ClientUserCount()) Users
                    &lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/option&gt;
    }
&lt;/SfDropDownList&gt;

The design looks like this:
在Syncfusion下拉菜单中创建一个块级显示

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>

输出参考:

在Syncfusion下拉菜单中创建一个块级显示

还可以参考下面共享的文档以获取更多信息:

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
&lt;div style=&quot;margin:130px auto;width:300px&quot;&gt;
&lt;SfDropDownList TValue=&quot;string&quot; TItem=&quot;client&quot; Placeholder=&quot;Select a customer&quot; Index=&quot;0&quot; DataSource=&quot;@ClientProject&quot;&gt;
&lt;DropDownListTemplates TItem=&quot;client&quot;&gt;
&lt;ItemTemplate&gt;
&lt;div&gt;&lt;span class=&#39;name&#39;&gt;@((context as client).Name)&lt;/span&gt;&lt;br /&gt;&lt;span class=&#39;project&#39;&gt;@((context as client).Project)  Project&lt;/span&gt;&lt;span class=&#39;users&#39;&gt;@((context as client).Users) Users&lt;/span&gt;&lt;/div&gt;
&lt;/ItemTemplate&gt;
&lt;ValueTemplate&gt;
&lt;div&gt;&lt;span class=&#39;name&#39;&gt;@((context as client).Name)&lt;/span&gt;&lt;br /&gt;&lt;span class=&#39;project&#39;&gt;@((context as client).Project)  Project&lt;/span&gt;&lt;span class=&#39;users&#39;&gt;@((context as client).Users) Users&lt;/span&gt;&lt;/div&gt;
&lt;/ValueTemplate&gt;
&lt;/DropDownListTemplates&gt;
&lt;DropDownListFieldSettings Text=&quot;Name&quot; Value=&quot;Id&quot;&gt;&lt;/DropDownListFieldSettings&gt;
&lt;/SfDropDownList&gt;
&lt;/div&gt;
@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&lt;client&gt; ClientProject = new List&lt;client&gt;
{
new client() { Name = &quot;User 1&quot;, Id = &quot;1&quot;, Project=&quot;1&quot;, Users= &quot;2&quot;},
new client() { Name = &quot;User 2&quot;, Id = &quot;2&quot;, Project=&quot;2&quot;, Users= &quot;5&quot;},
new client() { Name = &quot;User 3&quot;, Id = &quot;3&quot;, Project=&quot;3&quot;, Users= &quot;7&quot;},
new client() { Name = &quot;User 4&quot;, Id = &quot;4&quot;, Project=&quot;4&quot;, Users= &quot;3&quot;}
};
}
&lt;style&gt;
.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%;
}
&lt;/style&gt;

OutPut Reference:
在Syncfusion下拉菜单中创建一个块级显示

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

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

huangapple
  • 本文由 发表于 2023年2月24日 17:16:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/75554675.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定