Dropdown list with different background colors for each item

[Tausif]

Hi,

I have the grid below and I have added a dropdown list in one of the cells. What I want to do is for each item in the dropdown list I want to set a color.

I.e. item 1 has a blue background, item 2 has a green background etc.

Also I want the selected items background color to also be the same as the item they have selected.

Any Ideas on what I can do to achieve the above?

Below is the grid I am working with:

@using System.Collections.Generic;

@model IEnumerable<TelerikChecklist.Models.ProductViewModel>
    
@(Html.Kendo().Grid(Model)
    .Name("gridDropDown")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
            .Title("Category").Width(150);
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:250px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(20)
        .ServerOperation(false)
        .Events(events => events.Error("errorHandler"))
        .Model(model =>
        {
            model.Id(p => p.ProductID);
            model.Field(p => p.ProductID).Editable(false);
            model.Field(p => p.CategoryID).DefaultValue(1);
        })

        .Read(read => read.Action("ForeignKeyColumn_Read", "Home"))
        .Update(update => update.Action("ForeignKeyColumn_Update", "Home")).Events(e => e.Change("Category"))
        .Create(create => create.Action("ForeignKeyColumn_Create", "Home"))
        .Destroy(destroy => destroy.Action("ForeignKeyColumn_Destroy", "Home"))

    )
    )

[Georgi Krustev]

Hello Tausif,

I would suggest you check the templates functionality of the widget. You can use the template option to control the "look and feel" of the rendered popup items. You can also check the valueTemplate that controls the rendering of the selected text.

Regards,
Georgi Krustev
Telerik

 

 

[Steve]

So so typical... a question is replied with a url reference that does NOT clearly show how to solve for the original question.   Is anyone else fed up other than me.

[Dimitar]

Hello Steve,

I am attaching an ASP.NET MVC solution where a similar scenario to the one described is demonstrated - applying background color to each item of the DropDownList editor inside a Grid, based on a model property.

In general, there are two approaches to achieve the desired result:

1) In case you would like to set the background color around the text only, then the DropDownList Template option could be used as follows:

@model TelerikMvcAppGridCustomEditorColor.Models.CategoryViewModel

@(Html.Kendo().DropDownListFor(m => m)
    .DataValueField("CategoryID")
    .DataTextField("CategoryName")
    .Template("<span style='background-color: #= CategoryColor #'>#= CategoryName #</span>")
    .BindTo((System.Collections.IEnumerable)ViewData["categories"])
)

2) In case you would like the whole row color to change, then this could be achieved through the DropDownList's DataBound event. This is demonstrated in the attached project inside the ClientCategory.cshtml:

@model TelerikMvcAppGridCustomEditorColor.Models.CategoryViewModel

<script>
    function onDataBound(e) {
        $(this.items()).each(function (index, item) {
            var model = e.sender.dataItem(index);
            $(item).css('background-color', model.CategoryColor);
        });
    }
</script>

@(Html.Kendo().DropDownListFor(m => m)
    .DataValueField("CategoryID")
    .DataTextField("CategoryName")
    .Events(e => e.DataBound("onDataBound"))
    .BindTo((System.Collections.IEnumerable)ViewData["categories"])
)

In addition to the above, I would also suggest to check out the below linked article, where additional information regarding the Kendo UI template syntax is available:

• Kendo UI Templates.

Regards,
Dimitar
Progress Telerik

[Steve]

Thanks... but isn't this easier (at the bottom of the cshtml page)

 

<style>     

    .k-dropdown .k-state-default, li.k-item:not(.k-state-hover) {         

        background-color: lightskyblue !important;     

    }     

    li.k-item:not(.k-state-hover) {

        color: #383855 !important;

    }

</style>

[Dimitar]

Hello Steve,

Modifying the list items background color can indeed be achieved with CSS. However, this approach is not suitable when a different color for each item is required based on a model property. In such cases the desired result could be achieved through the dataBound event.

Regards,
Dimitar
Progress Telerik