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

2 posts, 0 answers
  1. Dmitry
    Dmitry avatar
    17 posts
    Member since:
    Oct 2014

    Posted 17 Jun 2015 Link to this post

    I have colored rows in the left part of the Gantt like in this example 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)
    { = "solid 1px #000000";

    tasks' height between left and right Gantt parts becomes unsynchronized like here:

    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) {
               = "solid 1px #000000";
                    });                gantt.element.find(".k-gantt-tasks tr td").each(function (e) {
               = "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. 


  2. Bozhidar
    Bozhidar avatar
    1101 posts

    Posted 19 Jun 2015 Link to this post


    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:

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top