Icon should trigger a dropdown menuIcon should trigger a dropdown menu

[Artur Zigel]

Hello, I created a table. In this table I inserted an icon at the end of the row. This icon should be able to open a dropdown menu. Could you help me how to do this ?

The picture below shows how it should be. I am missing the menu which the red apple points to

This is my code for the DataGrid:

<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true">

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"></GridEditSettings>

     <GridPageSettings PageCount="5" PageSize="8"></GridPageSettings>

     <GridColumns>

         <GridColumn Field=@nameof(Order.Newstitle) HeaderText="Newstitle" Width="auto"></GridColumn>

         <GridColumn Field=@nameof(Order.PublicationPeriod) HeaderText="Veröffentlichungszeitraum" Format="d" Type="ColumnType.Date" Width="auto"></GridColumn>

         <GridColumn Field=@nameof(Order.Language) HeaderText=" Sprache" Width="auto"></GridColumn>

         <GridColumn Field=@nameof(Order.CreatedBy) HeaderText="erstellt von" Width="auto"></GridColumn>

         <GridColumn Field=@nameof(Order.Receiver) HeaderText="Empfänger" Width="auto"></GridColumn>

         <GridColumn HeaderText="" Width="90px">

            <GridCommandColumns>

                <GridCommandColumn Type="CommandButtonType.Edit"

ButtonOption="@(new CommandButtonOptions(){IconCss="e-icons e-edit", CssClass="e-flat"})"></GridCommandColumn>

                <GridCommandColumn Type ="CommandButtonType.None"

ButtonOption="@(new CommandButtonOptions(){IconCss="e-icons e-more-vertical-1", CssClass="e-flat"})"></GridCommandColumn>

            </GridCommandColumns>

         </GridColumn>      

     </GridColumns>

 </SfGrid>

[Naveen Palanivel]

Hi Artur,

Sorry for the Inconvenience.

We are currently Validating  the reported query at our end and we will update the further details within two business days(Aug 16, 2022). Until then we appreciate your patience.

Regards,

Naveen Palanivel

[Naveen Palanivel]

Hi Artur,

We checked your query and prepared sample as per requirement ,icon with open dropdown menu. We attached the sample in this ticket , please kindly refer the snippet code and attached sample for your reference.

   <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn HeaderText="Menu" TextAlign="TextAlign.Center" Width="120">

            <Template>

                @{

                    Order order = (context as Order);

                    <SfDropDownButton IconCss="e-icons e-more-vertical-1">

                        <DropDownButtonEvents ItemSelected="@((args)=>Select(args,order))"></DropDownButtonEvents>

                        <DropDownMenuItems>

                            <DropDownMenuItem Id="Delete" Text="Delete" IconCss="e-icons e-trash"></DropDownMenuItem>

                             <DropDownMenuItem IconCss="e-icons e-copy" Text="Copy"></DropDownMenuItem>

                                <DropDownMenuItem  IconCss="e-icons e-export" Text="Export"></DropDownMenuItem>

                        </DropDownMenuItems>

                    </SfDropDownButton>

                }

            </Template>

        </GridColumn>

    </GridColumns>

Please get back to us if you need further assistance.

Regards,

Naveen Palanivel

[Naveen Palanivel]

Hi Artur,

please refer the attached sample

Regards,

Naveen Palanivel

Attachment: IconDropDown_c3d9e1bd.zip

[Artur Zigel]

Thank you for the great support

[Naveen Palanivel]

Hi Artur,

Welcome

Please get back to us if you need further assistance.

Regards,

Naveen Palanivel.