This is a migrated thread and some comments may be shown as answers.
Is it possible set the background color of each item in list of multiselect object?
3 Answers 24 Views
This is a migrated thread and some comments may be shown as answers.
Dimitry
Top achievements
Rank 1
Dimitry asked on 25 May 2020, 01:24 PM

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

Thank you

 

3 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 26 May 2020, 03:56 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Dimitry
Top achievements
Rank 1
answered on 27 May 2020, 07:54 AM
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
0
Neli
Telerik team
answered on 28 May 2020, 02:29 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Asked by
Dimitry
Top achievements
Rank 1
Answers by
Neli
Telerik team
Dimitry
Top achievements
Rank 1
Share this question
or