We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

style selected item

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.


3 Replies

YA YuvanShankar Arunagiri Syncfusion Team October 12, 2022 05:31 AM UTC

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



AP Aaron Prohaska October 14, 2022 03:25 PM UTC

Thank you. This solved my problem.



YA YuvanShankar Arunagiri Syncfusion Team October 17, 2022 04:05 AM UTC

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.


Loader.
Live Chat Icon For mobile
Up arrow icon