Get a SfDropDownButton id from a sfgrid

[ermano]

How can i get the specific SfDropDownButton from a grid ?

I have a dynamic grid and one of these columns i put a template with a  SfDropDownButton (code below).

When itemselected is trigger, i would like to call toogle from the  SfDropDownButton clicked.

<GridColumn Field="" Width="90">
                        <Template>
                            @{
                                var station = (context as StationDTO);
                                <SfDropDownButton IconCss="bi bi-music-note-beamed" CssClass="btn-primary rounded">
                                    <DropDownButtonEvents ItemSelected="@((e) => OnEditProfileSelected(e, station.Name))"></DropDownButtonEvents>
                                    <DropDownMenuItems>
                                        <DropDownMenuItem Text="Local" IconCss="bi bi-laptop"></DropDownMenuItem>
                                        <DropDownMenuItem Text="Web" IconCss="bi bi-globe"></DropDownMenuItem>
                                        <DropDownMenuItem Text="Data promocional" IconCss="bi bi-calendar-plus"></DropDownMenuItem>
                                </DropDownMenuItems>
                            </SfDropDownButton>
                        }
                        </Template>
                    </GridColumn>

---------------------------------------------------------


public async Task OnEditProfileSelected(MenuEventArgs args, string stationName)
{

SfDropDownButton.Toggle();

}

[Prathap Senthil]

Hi ermano,

To achieve this, we recommend using the HTML Attribute property in the SfDropDownButton. This will allow you to obtain the specific ID of the button you are looking for. Here is a sample code snippet that you can use as a reference.

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

            <Template>

                @{

                    var station = (context as EmployeeData);

                    String id = station.EmployeeID.ToString();

                    <SfDropDownButton Content="Profile" HtmlAttributes="@(new() { { "id", id } })">

                        <DropDownButtonEvents ItemSelected="@((e) => OnEditProfileSelected(e, station.EmployeeID))">

                        </DropDownButtonEvents>

                        <DropDownMenuItems>

                            <DropDownMenuItem Text="Local" Id="LocalID"></DropDownMenuItem>

                            <DropDownMenuItem Text="Web" Id="WebID"></DropDownMenuItem>

                            <DropDownMenuItem Text="data" Id="DataID"></DropDownMenuItem>

 

                        </DropDownMenuItems>

                    </SfDropDownButton>

 

                }

            </Template>

        </GridColumn>

 

Please get back to us if you have any further questions or concerns.

Regards,
Prathap s

Attachment: BlazorApp1_25ad9343.zip

[ermano]

Hi,  Prathap. I couldn't make it work the way I wanted to.

Im my example, you can see what i need. 

Tks !

Attachment: Test_4c962af5.zip

[Prathap Senthil]

Thanks for the update,

Based on your requirement, we achieved it in the below way. Please refer to the below code snippet for your reference.

@using Syncfusion.Blazor.Grids

@using Syncfusion.Blazor.SplitButtons

 

<SfGrid DataSource="@Employees">

    <GridColumns>

        <GridColumn HeaderText="DropdownButton" Width="120">

            <Template>

                @{

                    var employee = (context as EmployeeData);

                    var dropdownID = employee.EmployeeID.ToString();

                    <SfDropDownButton CssClass="@dropdownID" @ref="dropDownObj" Content="Profile">

                        <DropDownMenuItems>

                            <DropDownMenuItem Text="Local" Id="LocalID"></DropDownMenuItem>

                            <DropDownMenuItem Text="Web" Id="WebID"></DropDownMenuItem>

                            <DropDownMenuItem Text="data" Id="DataID"></DropDownMenuItem>

 

                        </DropDownMenuItems>

                    </SfDropDownButton>

 

                }

            </Template>

        </GridColumn>

        <GridColumn HeaderText="Toggle">

 

            <Template>

                @{

                    var employee = (context as EmployeeData);

                    var dropdownID = employee.EmployeeID.ToString();

                    <button class="btn btn-primary" @onclick="e => Toggle(dropdownID)">Open</button>

                }

            </Template>

        </GridColumn>

    </GridColumns>

</SfGrid>

 

@code {

  

    SfDropDownButton dropDownObj { set { ddbRefs.Add(value); } }

    List<SfDropDownButton> ddbRefs = new List<SfDropDownButton>();

    public List<EmployeeData> Employees { get; set; }

 

    protected override void OnInitialized()

    {

        Employees = Enumerable.Range(1, 9).Select(x => new EmployeeData()

            {

                EmployeeID = x

            }).ToList();

    }

 

    public class EmployeeData

    {

        public int? EmployeeID { get; set; }

    }

 

    private void Toggle(string ID)

    {

        foreach (SfDropDownButton ddlObj in ddbRefs)

        {

            if (ddlObj.CssClass == ID)

            {

                ddlObj.Toggle();

            }

        }

    }

}

[ermano]

Its works very well. Thank you !

[Prathap Senthil]

Thanks for the updating us, we are happy to hear that the provided solution was helpful.

We are closing the thread now.