DataGrid Column that contains Dropdown menu

Question

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?

Answer 1

You need to add the DisplayTemplate inside of the column and then Dropdown inside of the template.