Set a tr background colour in a ClientTemplate

[Steve]

I have a table inside a ClientTemplate which has a <tr id="trFeeder"> which I want to set the background colour in the OnClientDataBound but I can't work out the syntax - javascript really isn't my forte.

If I use $get then only the first instance of the <tr> is changed.

 

 

        function OnClientDataBound(sender, args) {
            var undefined = void (0)

            var gantt = sender._widget;

            gantt.element.find(".rgtTask ").each(function (e) {
                var dataItem = gantt.dataSource.getByUid($(this).attr("data-uid"));

                // this works for the entire control
                if (dataItem.shortages_Exist == false) {
                    this.style.backgroundColor = "#D8FF96";
                    this.style.color = "#000000";
                } else {
                    this.style.backgroundColor = "#9f9";
                    this.style.color = "#000000";
                }

                //can't get the syntax to change the trFeeder in the table/tr
                if (dataItem.operation_No != undefined) {
                    if (dataItem.operation_No != "") {
                        
                        if (dataItem.setup_On_Feeder == true) {
                            sender.$get("trFeeder").style.backgroundColor = "#FFFFFF";
                            //$get("trFeeder").style.backgroundColor = "#FFFFFF";
                        } else {
                            sender.$get("trFeeder").style.backgroundColor = "#CCCCCC";
                            //$get("trFeeder").style.backgroundColor = "#CCCCCC";
                        }
                    }
                }
                this.style.backgroundImage = 'none';
            });
        }

[Peter Milchev]

Hello Steve,

The ClientTemplate will not change the ID of the row. That means you will end up with many elements with the same ID which is not valid. 

The better way for this approach is to use a CSS class or a simple attribute instead of ID. Then, you can find the said row via the .find method of the jQuery object you obtain by calling $(this) in your snippet.

<tr data-id="trFeeder" class="trFeeder">

function OnClientDataBound(sender, args) {
    //var undefined = void (0)

    var gantt = sender._widget;

    gantt.element.find(".rgtTask ").each(function (e) {
        var $taskElement = $(this)
        var dataItem = gantt.dataSource.getByUid($taskElement.attr("data-uid"));

        // this works for the entire control
        if (dataItem.shortages_Exist == false) {
            this.style.backgroundColor = "#D8FF96";
            this.style.color = "#000000";
        } else {
            this.style.backgroundColor = "#9f9";
            this.style.color = "#000000";
        }

        //can't get the syntax to change the trFeeder in the table/tr
        if (dataItem.operation_No != undefined) {
            if (dataItem.operation_No != "") {

                var itemGetViaClass = $taskElement.find("tr.trFeeder").get(0);
                var itemGetViaAttribute = $taskElement.find("[data-id=trFeeder]").get(0);
                if (dataItem.setup_On_Feeder == true) {
                    itemGetViaClass.style.backgroundColor = "#FFFFFF"
                    //sender.$get("trFeeder").style.backgroundColor = "#FFFFFF";
                    //$get("trFeeder").style.backgroundColor = "#FFFFFF";
                } else {
                    itemGetViaClass.style.backgroundColor = "#FFFFFF"

                    //sender.$get("trFeeder").style.backgroundColor = "#CCCCCC";
                    //$get("trFeeder").style.backgroundColor = "#CCCCCC";
                }
            }
        }
        this.style.backgroundImage = 'none';
    });
}

 

Here are some resources that would help to better understand the code snippet above:

• https://api.jquery.com/find/ 
• https://api.jquery.com/category/traversing/tree-traversal/ 
• https://api.jquery.com/category/selectors/ 
• https://www.w3schools.com/cssref/css_selectors.asp 
• https://api.jquery.com/category/css/ 
• https://api.jquery.com/get/ 
• https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools 

Regards,
Peter Milchev
Progress Telerik