Setting highlight in different colors on databound listitems in RadComboBox

[Jonathan]

Hi All,

I have a templated combobox like so:

<telerik:RadComboBox id="ddlProgressiveInterventionBehaviour" Width="450px" Skin="Bootstrap" runat="server"
                                                DataTextField="Description" Height="400" DataValueField="ID" AutoPostBack="true" HighlightTemplatedItems="true">
                                            <HeaderTemplate>
                                                <table  >
                                                    <tr>
                                                        <td style="width: 200px;">
                                                            Policy For Success</td>
                                                        <td style="width: 80px;">
                                                            Risk Level</td>
                                                        <td style="width:300px;">
                                                            Behaviour</td>
                                                        <td style="width: 40px;">
                                                            Points</td>
                                                    </tr>
                                                </table>
                                            </HeaderTemplate>
                                            <ItemTemplate>
                                                <table  >
                                                    <tr>
                                                        <td style="width: 200px;">
                                                            <%# DataBinder.Eval(Container.DataItem, "PolicyForSuccessName")%>
                                                        </td>
                                                        <td style="width: 80px;">
                                                            <%# DataBinder.Eval(Container.DataItem, "InitialRiskLevelName")%>
                                                        </td>
                                                        <td style="width: 300px;">
                                                            <%# DataBinder.Eval(Container.DataItem, "Name")%>
                                                        </td>
                                                        <td style="width: 40px;">
                                                            <%# DataBinder.Eval(Container.DataItem, "RiskLevelPointsEachInstance")%>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </ItemTemplate>
                                        </telerik:RadComboBox>

 

The radcombo is databound to a generic list of objects that have the attributes listed.  I can easily add a cssclass name attrbute to each object int the list or a hexcolor attribute etc.  When rendered it looks like the attached file.  My question is assuming I have a cssclass called .makered {..}  how do I apply it to items that have a level of 3 on the risklevel column for ONLY the risk level column in the template,  ie, for specific columns and specific items.  Applying the class to the whole row would work fine too.  Items are databound...not added in the markup.  Also any help lining up the columns would be helpful.

Thanks!

 

[Jonathan]

"on the risklevel column for ONLY the risk level column" should read "on the Risk Level column ONLY" :)

[Eric R | Senior Technical Support Engineer]

Hi Jonathan,

Thank you for providing the code sample. This can be accomplished from a combination of the ItemDataBound event and some CSS styles. Let me walk through an example below.

Example

Using the same code sample, add the OnItemDataBound event binding like below. Essentially, what this will do is add CssClass to any Item that meets the logical criteria of the ItemDataBound event.

Markup

Adds the ItemDataBound event and a class for identifying the risk level data cell.

<telerik:RadComboBox ID="RadComboBox1" runat="server" Height="400" Width="600"
    DataTextField="Description" DataValueField="ID"
    AutoPostBack="true" HighlightTemplatedItems="true"
    OnItemDataBound="RadComboBox1_ItemDataBound">
    <HeaderTemplate>
        <table>
            <tr>
                <td style="width: 200px;">Policy For Success</td>
                <td style="width: 80px;">Risk Level</td>
                <td style="width: 300px;">Behaviour</td>
                <td style="width: 40px;">Points</td>
            </tr>
        </table>
    </HeaderTemplate>
    <ItemTemplate>
        <table>
            <tr>
                <td style="width: 200px;">
                    <%# DataBinder.Eval(Container.DataItem, "PolicyForSuccessName")%>
                </td>
                <td style="width: 80px;" class="riskLevel">
                    <%# DataBinder.Eval(Container.DataItem, "InitialRiskLevelName")%>
                </td>
                <td style="width: 300px;">
                    <%# DataBinder.Eval(Container.DataItem, "Name")%>
                </td>
                <td style="width: 40px;">
                    <%# DataBinder.Eval(Container.DataItem, "RiskLevelPointsEachInstance")%>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</telerik:RadComboBox>

Code-behind

Checks the RiskLevel value and adds a CssClass property of LogicalHighlight to the ComboBox Item.

protected void RadComboBox1_ItemDataBound(object sender, RadComboBoxItemEventArgs e)
{
    Policy policy = (Policy)e.Item.DataItem;

    if(policy.InitialRiskLevelName < 5)
    {
        e.Item.CssClass = "LogicalHighlight";
    }
}

Css

Highlights the background when .LogicalHightlight and .riskLevel CSS classes are present.

<style type="text/css">
    .LogicalHighlight .riskLevel {
        background-color: yellow;
    }
</style>

Output

Below is the output of the above implementation. 

Wrapping Up

For additional reference, I have attached a sample that illustrates the above approach. 

Please let me know if you need any additional information. Thank you for using the UI for ASP.NET AJAX Forums.

Regards,

Eric R | Senior Technical Support Engineer
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

[Jonathan]

Thanks Eric R.  Pretty slick. :)

[Jonathan]

See pic thanks.

[Eric R | Senior Technical Support Engineer]

Hi Jonahtan,

I am glad that worked for you and the implementation looks very well done. Nice work! 

Regards,

Eric R | Senior Technical Support Engineer
Progress Telerik