Is it possible set the background color of each item in list of multiselect object?

[Dimitry]

Is possible set the background color of each item in list of multiselect object? 

Thank you

 

[Neli]

Hello,

If you need to change the default background color of the items in the Multiselect popup list, you could change the style as in the example below. Note, that marked in yellow is the id of the widget:

#required_listbox > li.k-item.k-state-selected{
    background-color: lightgreen;
  }

You could find a Dojo example demonstrating the above linked here.

Here you will find a Dojo example where thе background of a selected item is changed depending on the item`s text by using jQuery css() method.

Note, that in both cases the same could be applied in the MVC context.

Another possible solution In order to customize the appearance of MultiSelect is to use templates. In case you need to change the background color of the items in the popup list, you could use the itemTemplate. When an item is selected its tag in the MultiSelect could be customized by using the tagTemplate.

Below you will find an example in Razor syntax:

@(Html.Kendo().MultiSelect()
              .Name("customers")
              .DataTextField("ContactName")
              .DataValueField("CustomerID")
              .TagTemplate("<span style= \"background: red\">#: data.Name #</span>")
              .ItemTemplate("<span style= \"background: green\">#: data.Name #</span>")
              .Placeholder("Select customers...")
              .DataSource(source => source
                  .Custom()
                  .Group(g => g.Add("Country", typeof(string)))
                  .Transport(transport => transport
                    .Read(read =>
                    {
                        read.Action("Grouping_GetCustomers", "MultiSelect")
                            .Data("onAdditionalData");
                    }))
                  .ServerFiltering(true))
)

Here you will find link to Demo demonstrating templates in MultiSelect in MVC projects. In the Dojo example linked here the items in the MultiSelect have different colors depending on property`s value.

In case the provided examples did not match the specific scenario of your project, please let me know so I could provide you with appropriate assistance. 

Regards,
Neli
Progress Telerik

[Dimitry]

Hello Neli ,

First of all thank you for your answer.

My question was a bit not correct.

I would like colored the multiselect list in a zebra striped style.

Please see attached image. 

Thank you
Dimitry

[Neli]

Hello Dimitry,

Thank you for the provided image. It helped me understand what is the desired appearance.

In order to achieve such styles, I would suggest you subscribe to the open event of the MultiSelect widget. In the open event handler, you could use the setTimeout method This way you could ensure that the popup list containing the MultiSelect items is rendered by the time you are trying to apply styles to them. Then you could use the :odd and :even pseudo selectors to style each second row differently. In order not to override the styles on the already selected items you will need to use '.k-state-selected' class. In the example below different background color is set to the odd and even not selected items in the MultiSelect popup. Then a style is applied also to the selected item in order to avoid incorrect appearance.

 function onOpen(e){
        setTimeout(function(){              
              $('li.k-item:odd:not(.k-state-selected)').css('background', '#CCD1D1');
              $('li.k-item:even:not(.k-state-selected)').css('background', 'white');
              $('li.k-item.k-state-selected').css('background', '#ff4350');
       })
}

Here is a Dojo example where the described above is demonstrated.

I hоpe you will find it helpful. In case any issues arise, please contact us.

Regards,
Neli
Progress Telerik