I'm working on creating a table using Blazorise DataGrid, however I can't seem to get the options button at the end to work. I want to create 4 columns; Name, Description, Last Updated, and then the last column to contain a dropdown menu of Edit, Duplicate and Delete. I have written functions for the Edit, Duplicate and Delete, however I want it to show an Ellipsis, which will then be clicked to display the dropdown menu.
<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>
The first three columns work as expected, but the last one does not. Any ideas what I'm doing wrong?
You need to add the DisplayTemplate inside of the column and then Dropdown inside of the template.