Setting highlight in different colors on databound listitems in RadComboBox

6 posts, 1 answers
  1. Jonathan
    Jonathan avatar
    13 posts
    Member since:
    Aug 2015

    Posted 31 Aug Link to this post

    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!

     

  2. Jonathan
    Jonathan avatar
    13 posts
    Member since:
    Aug 2015

    Posted 31 Aug in reply to Jonathan Link to this post

    "on the risklevel column for ONLY the risk level column" should read "on the Risk Level column ONLY" :)
  3. Answer
    Eric R | Senior Technical Support Engineer
    Admin
    Eric R | Senior Technical Support Engineer avatar
    429 posts

    Posted 03 Sep Link to this post

    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/.

  4. Jonathan
    Jonathan avatar
    13 posts
    Member since:
    Aug 2015

    Posted 03 Sep in reply to Eric R | Senior Technical Support Engineer Link to this post

    Thanks Eric R.  Pretty slick. :)
  5. Jonathan
    Jonathan avatar
    13 posts
    Member since:
    Aug 2015

    Posted 03 Sep in reply to Jonathan Link to this post

    See pic thanks.
  6. Eric R | Senior Technical Support Engineer
    Admin
    Eric R | Senior Technical Support Engineer avatar
    429 posts

    Posted 03 Sep Link to this post

    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

    Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

Back to Top