style selected item

[Aaron Prohaska]

Is it possible to give a different style to the selected item in the popup menu? Once I have selected an item and it's been set as the button, I want the same item in the popup to show as selected using bold text.

[YuvanShankar Arunagiri]

Hi Aaron,

We have checked your reported query and prepared the sample based on your requirement. please refer the below code snippet. We can achieve your requirement by using the below event and properties.

Query-1: Once I have selected an item and it's been set as the button?

Using the Content property and ItemSelected event, we can achieve this query.

Query-2: I want the same item in the popup to show as selected using bold text?

Using the HtmlAttributes of dropdown item and OnItemRender event, we can achieve this query.

@using Syncfusion.Blazor.SplitButtons

 

<SfSplitButton Content="@content">

    <SplitButtonEvents ItemSelected="ItemSelected" OnItemRender="ItemRender">

    </SplitButtonEvents>

    <DropDownMenuItems>

        <DropDownMenuItem Text="Cut"></DropDownMenuItem>

        <DropDownMenuItem Text="Copy"></DropDownMenuItem>

        <DropDownMenuItem Text="Paste"></DropDownMenuItem>

    </DropDownMenuItems>

</SfSplitButton>

 

@code{

    private string content = "Paste";

    private void ItemSelected(MenuEventArgs args)

    {

        content = args.Item.Text;

    }

 

    private void ItemRender(MenuEventArgs args)

    {

        if (content == args.Item.Text)

        {

            args.Item.HtmlAttributes = new Dictionary<string, object>() { { "class", "e-selected" } };

        }

        else

        {

            args.Item.HtmlAttributes = new Dictionary<string, object>() { { "class", "" } };

        }

    }

}

 

<style>

    .e-item.e-selected {

        font-weight: bold;

    }

</style>

Could you please check the above code and get back to us, if you need any further assistance on this.

Regards, 

YuvanShankar A

[Aaron Prohaska]

Thank you. This solved my problem.

[YuvanShankar Arunagiri]

You are welcome, Aaron. We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any further assistance on this.