包含下拉菜单的DataGrid列



我正在使用Blazorise DataGrid创建一个表,但是我似乎无法在最后获得选项按钮。我想创建4列;名称、描述、上次更新,然后是包含编辑、复制和删除下拉菜单的最后一列。我已经为编辑,复制和删除编写了函数,但是我希望它显示一个省略号,然后单击该省略号以显示下拉菜单。

<DataGrid   TItem="Project"
Data="@Projects"
Class="table table-hover">
<DataGridColumns>
<DataGridColumn Field="@nameof(Project.Name)" Caption="Name" Sortable="true" Width="300px" />
<DataGridColumn Field="@nameof(Project.Description)" Caption="Description" Sortable="false" />
<DataGridDateColumn Field="@nameof(Project.LastUpdated)" Caption="Last Updated" Sortable="true" Width="150px" />
<DataGridColumn Caption="Options" Sortable="false" Width="100px">
<Dropdown Visible="true">
<DropdownToggle>
<svg height="3.867" viewBox="0 0 17.4 3.867" width="17.4" xmlns="http://www.w3.org/2000/svg">
<path d="M50.633,209.933A1.933,1.933,0,1,1,48.7,208,1.934,1.934,0,0,1,50.633,209.933ZM55.467,208a1.933,1.933,0,1,0,1.933,1.933A1.934,1.934,0,0,0,55.467,208Zm-13.533,0a1.933,1.933,0,1,0,1.933,1.933A1.934,1.934,0,0,0,41.933,208Z" data-name="ellipsis-h-regular (1)" fill="currentColor" id="ellipsis-h-regular_1_" transform="translate(-40 -208)" />
</svg>
</DropdownToggle>
<DropdownMenu>
<DropdownItem>
<svg height="15" style="margin-bottom: 3px; margin-right: 20px;" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg">
<path d="M13.443,2.013,11.97.541a1.845,1.845,0,0,0-2.61,0L.681,9.163.009,13.237a.656.656,0,0,0,.754.754l4.074-.672L13.46,4.641a1.846,1.846,0,0,0-.017-2.627ZM3.3,8.258,7.955,3.633l2.413,2.413L5.742,10.7V9.571H4.43V8.258ZM2.246,12.527l-.773-.773.332-2.012.5-.5H3.445v1.313H4.758v1.137l-.5.5ZM12.609,3.79h0L11.293,5.115,8.886,2.708l1.322-1.313h0a.641.641,0,0,1,.909,0l1.473,1.473a.643.643,0,0,1,.017.926Z" fill="#023047" id="pencil-regular" transform="translate(0 0)" />
</svg>Edit</DropdownItem>
<DropdownDivider />
<DropdownItem>
<svg height="15" style="margin-bottom: 3px; margin-right: 20px;" viewBox="0 0 14 14" width="14" xmlns="http://www.w3.org/2000/svg">
<path d="M13.443,2.013,11.97.541a1.845,1.845,0,0,0-2.61,0L.681,9.163.009,13.237a.656.656,0,0,0,.754.754l4.074-.672L13.46,4.641a1.846,1.846,0,0,0-.017-2.627ZM3.3,8.258,7.955,3.633l2.413,2.413L5.742,10.7V9.571H4.43V8.258ZM2.246,12.527l-.773-.773.332-2.012.5-.5H3.445v1.313H4.758v1.137l-.5.5ZM12.609,3.79h0L11.293,5.115,8.886,2.708l1.322-1.313h0a.641.641,0,0,1,.909,0l1.473,1.473a.643.643,0,0,1,.017.926Z" fill="#023047" id="pencil-regular" transform="translate(0 0)" />
</svg>Duplicate</DropdownItem>
<DropdownDivider />
<DropdownItem>
<svg height="15" style="margin-bottom: 3px; margin-right: 20px;" viewBox="0 0 14 16" width="14" xmlns="http://www.w3.org/2000/svg">
<path d="M8.375,13h.75a.375.375,0,0,0,.375-.375V5.875A.375.375,0,0,0,9.125,5.5h-.75A.375.375,0,0,0,8,5.875v6.75A.375.375,0,0,0,8.375,13ZM13.5,2.5H10.925L9.862.728A1.5,1.5,0,0,0,8.575,0H5.425A1.5,1.5,0,0,0,4.138.728L3.075,2.5H.5A.5.5,0,0,0,0,3v.5A.5.5,0,0,0,.5,4H1V14.5A1.5,1.5,0,0,0,2.5,16h9A1.5,1.5,0,0,0,13,14.5V4h.5a.5.5,0,0,0,.5-.5V3A.5.5,0,0,0,13.5,2.5ZM5.37,1.591A.188.188,0,0,1,5.531,1.5H8.469a.188.188,0,0,1,.161.091l.546.909H4.825ZM11.5,14.5h-9V4h9ZM4.875,13h.75A.375.375,0,0,0,6,12.625V5.875A.375.375,0,0,0,5.625,5.5h-.75a.375.375,0,0,0-.375.375v6.75A.375.375,0,0,0,4.875,13Z" fill="#023047" id="trash-alt-regular" />
</svg>Delete</DropdownItem>
</DropdownMenu>
</Dropdown>
</DataGridColumn>
</DataGridColumns>
</DataGrid>

前三列按预期工作,但最后一列不行。知道我哪里做错了吗?

你需要在列的内部添加DisplayTemplate,然后在模板的内部添加Dropdown。

相关内容

  • 没有找到相关文章

最新更新