How to change the color of a single item with HtmlAttributes

Hi

In the razor file:

<MenuItem Id="Cancel" Text = "Cancel" IconCss="e-icons close" HtmlAttributes="@menuCancelHtmlAttribute">
 </MenuItem>

in c# file:

 public Dictionary<string, object> menuCancelHtmlAttribute = new Dictionary<string, object>()
{

   {"style", "background-color: #FFEBEE; font-weight: bold; " }

 };

Menu item has different background color but hover and focus not working.

Greetings

Maciej


3 Replies

YA YuvanShankar Arunagiri Syncfusion Team November 28, 2022 09:15 AM UTC

Hi Maciej,


We have prepared the sample based on your requirement. Using the HtmlAttributes property, we can set the class name to li item. Using that class name, we can set the focus and hover style for that li element. Please refer to the below code snippet and the attached sample file.


<SfMenu TValue="MenuItem">

    <MenuItems>

       …………………………………………..

        <MenuItem Text="Help"  HtmlAttributes="@menuCancelHtmlAttribute"></MenuItem>

    </MenuItems>

</SfMenu>

@code{

    public Dictionary<string, object> menuCancelHtmlAttribute = new Dictionary<string, object>()

    {

        {"class", "e-custom-item" }

    };

}

 

<style>

    .e-custom-item {

        background-color: #FFEBEE !important;

        font-weight: bold !important;

    }

 

    .e-custom-item:hover {

        background-color: aqua !important;

    }

 

    .e-custom-item:focus {

        background-color: aquamarine !important;

    }

</style>

 


Regards,

YuvanShankar A


Attachment: Counter_2366873a.zip


MA Maciej November 28, 2022 01:29 PM UTC

Great

Thank you and best regards

Maciej



YA YuvanShankar Arunagiri Syncfusion Team November 29, 2022 08:43 AM UTC

Maciej, we are happy to hear that your requirement has been fulfilled. Please get back to us if you need any other assistance.


If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.


Loader.
Up arrow icon