This is a migrated thread and some comments may be shown as answers.

Set a tr background colour in a ClientTemplate

1 Answer 27 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
Steve
Top achievements
Rank 1
Veteran
Steve asked on 26 Mar 2021, 03:33 PM

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';
            });
        }

1 Answer, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 31 Mar 2021, 10:08 AM

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:

Regards,
Peter Milchev
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/.

Tags
Gantt
Asked by
Steve
Top achievements
Rank 1
Veteran
Answers by
Peter Milchev
Telerik team
Share this question
or