How to add bottom border to left part of the Gantt?

[Dmitry]

Hello,
I have colored rows in the left part of the Gantt like in this example http://dojo.telerik.com/ADaB/7. I want to add bottom border to the rows for splitting them.
If I add the following code in "dataBound" event

//add border to rows
gantt.element.find(".k-treelist .k-grid-content  tr td").each(function (e)
{
    this.style.borderBottom = "solid 1px #000000";
});

tasks' height between left and right Gantt parts becomes unsynchronized like here: http://dojo.telerik.com/ADaB/14.

When you uncomment code for adding borders to the right part of the Gantt
/*gantt.element.find(".k-gantt-rows tr td").each(function (e) {
                    this.style.borderBottom = "solid 1px #000000";
                });                gantt.element.find(".k-gantt-tasks tr td").each(function (e) {
                    this.style.borderBottom = "solid 1px #000000";
                  });*/
tasks' height between left and right parts becomes synchronized, BUT scroll down right part and see that table with css class ".k-gantt-columns" ends earlier (it has fixed height) than tables with classes ".k-gantt-rows" and ".k-gantt-tasks". Then scroll right part to the right and see that dependency arrows are moved from correct vertical position.

 

My goal is to split rows by boder in the left part. How can I do it???
The problem persists in the latest version of Kendo UI also. 

 

[Bozhidar]

Hi,

You can define the border in a style, instead of assigning it manually to each row. This way all of the tables in the timeline will be initialized with the proper height. Here's a sample:
http://dojo.telerik.com/ADaB/18

Regards,
Bozhidar
Telerik