Dynamically change css based on if a values are selected

Question

Hello,I have a multiselect and want to control the css based on if there are values selected.If the user selects a value then display VALUE PRESENT CSS CLASS.If multiselect values are set on initial load then display VALUE PRESENT CSS CLASS.if user unselects a value and there are still other values selected then display  VALUE PRESENT CSS CLASSIf there are no values selected either on initial load or after clear then display  DEFAULT CSS CLASS.If the last value is unselected then display  DEFAULT CSS CLASS.Basically the logic is to show default css class when there are no values in the multiselect and show the value present css class when there are values selected.I am getting inconsistent results, multiselect css goes back to syncfusion default in between clicks. I have attached a sample. If there's a way to achieve the same result without having to check all the multiselect events that would be great. If not i would like to know how to fix the provided sample codeThank youAttachment: multiselectBackgroundColor_d995811b.zip

Sureshkumar P · Accepted Answer

Hi Pavel,We suggest you apply
the CSS style for defaultclass without important to achieve your requirement.Find the code
example here:

/*Display this
  background when there is a value selected*/
      .e-multiselect.e-control-wrapper.e-input-group.selectedClass {
          background-color: #ff2950;
      }
      /*
  default style with hovering */
      .e-multiselect.e-control-wrapper.e-input-group.defaultClass:hover {
          background-color: gray;
      }
      /*
  default style without hovering */
      .e-multiselect.e-control-wrapper.e-input-group.defaultClass {
          background-color: #f0f0f0;
      }

Find the modified
sample in the attachment: Regards,Sureshkumar PAttachment: SyncfusionBlazorApp1_4_99280fc3.zip

Buvana Sathasivam · Answer

Hi Pavel,Greetings from Syncfusion support.We have checked your shared sample. You can dynamically update the CSS class based on bindable values, like the below code, without using any events. Please find the following code and sample for your reference. ….. @code { private const string FILTER_DEFAULT_CSS_CLASS = "circuit-notes"; private const string VALUE_IS_PRESENT_CSS_CLASS = "circuit-notes-selection"; public List MultiVal { get; set; } protected override void OnInitialized() { MultiVal = new List(){"CA", "DK"}; } } Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionBlazorApp1-1335173209Please check the above sample and let us know if it meets your requirement. Regards,Buvana S

Pavel · Answer

The solution does not meet the requirement because there are times when the css is neither VALUE_IS_PRESENT_CSS_CLASS or FILTER_DEFAULT_CSS_CLASS. Instead the css goes back to syncfusion default. I have attached a video that shows the issue.

Thank you

Attachment: Screen_Recording_20220920_at_8_26_09_AM_AdobeExpress.mp4_60509edb.zip

Sureshkumar P · Answer

Hi Pavel,We have modified the code example to resolve your faced issue when using the dynamic CSSClass property update value. We suggest you use the single class name instead of the class name separate with a hyphen. Find the code example here: @code { private const string FILTER_DEFAULT_CSS_CLASS = "defaultClass"; private const string VALUE_IS_PRESENT_CSS_CLASS = "selectedClass"; public List MultiVal { get; set; } = new List() { }; public string CountriesCss { get; set; } = ""; protected override void OnInitialized() { MultiVal = new List() { "AU", "CA" }; } public class Country { public string Name { get; set; } public string Code { get; set; } } List Countries = new List { new Country() { Name = "Australia", Code = "AU" }, new Country() { Name = "Bermuda", Code = "BM" }, new Country() { Name = "Canada", Code = "CA" }, new Country() { Name = "Cameroon", Code = "CM" }, new Country() { Name = "Denmark", Code = "DK" }, new Country() { Name = "France", Code = "FR" }, new Country() { Name = "Finland", Code = "FI" } }; private void ValueChanged(MultiSelectChangeEventArgs> arg) { if (MultiVal != null && MultiVal.Count > 0) { CountriesCss = VALUE_IS_PRESENT_CSS_CLASS; } else { CountriesCss = FILTER_DEFAULT_CSS_CLASS; } } private async Task OnCreated() { if (MultiVal != null && MultiVal.Count > 0) { CountriesCss = VALUE_IS_PRESENT_CSS_CLASS; await InvokeAsync(StateHasChanged); } else { CountriesCss = FILTER_DEFAULT_CSS_CLASS; await InvokeAsync(StateHasChanged); } } } Find the modified sample in the attachment:Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.Regards,Sureshkumar PAttachment: SyncfusionBlazorApp1_15bb9ba9.zip

Pavel · Answer

Great removing the - from the css worked!! Thank you

I have one more question.

I would like to add hover to FILTER_DEFAULT_CSS_CLASS. so when you hover over the multiselect with no values background color changes to a darker grey. How do I access the hover of the multiselect?

thank you

Sureshkumar P · Answer

Hi Pavel,You can achieve your requirement by using the native onmouseover and onmouseout event. Find the code example: @code { // mousehover native event handler void ComponentHover(){ } // mouseleave native event handler void ComponentHouerOut(){ } } Regards,Sureshkumar P

Pavel · Answer

can you please provide an example of how to set the background color css inside the methods?

what selector do i use and how do i set it programmatically in side method

// mousehover native event handler

void ComponentHover(){

how to set hover css?

}

// mouseleave native event handler

how to set hover css?

}

Sureshkumar P · Answer

Hi Pavel,Query: I would
like to add hover to FILTER_DEFAULT_CSS_CLASS. so, when you hover over the
multiselect with no values background color changes to a darker grey. How do I
access the hover of the multiselect?We suggest you
use the CSS selector to update the required styles. Find the code
example here:

.e-multiselect.e-control-wrapper.e-input-group.defaultClass:hover {
          background-color: darkgray;
      }

Regards,Sureshkumar P

Pavel · Answer

this actually did not work, When i hover nothing happens

i provided a sample with added selector

.e-multiselect.e-control-wrapper.e-input-group.defaultClass:hover {

background-color: red;

}

Thank you

Attachment: SyncfusionBlazorApp1_4_2548213a.zip

Sureshkumar P · Answer

Hi Pavel,We have validated
the shared information with the sample, and you have customized the component style in
the application with important styles. Which is the reason the updated hover
style is not applied properly in the sample. We suggest you remove the below styles
from your application to resolve the issue. Find the code
example here:

/*popout background color*/
     /* .defaultClass.e-multiselect.e-input-group
  .e-multi-select-wrapper {
          background-color: #f0f0f0 !important;
      }*/

Find the modified
sample in the attachment:Regards,Sureshkumar PAttachment: SyncfusionBlazorApp1_4_bf5335b2.zip

Pavel · Answer

That fixed the hovering color but how do I get the #f0f0f0 background color back when not hovered?
When we comment out

/* .defaultClass.e-multiselect.e-input-group .e-multi-select-wrapper {

background-color: #f0f0f0 !important;

}*/

the background color is white before and after hover.

is there a way to have the background color #f0f0f0 .before and after hover instead of the default white color?

Pavel · Answer

thank you!