Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadTreeView: Vertical lines appear when root node expanded

15 Answers 121 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Lee asked on 02 Feb 2016, 07:24 PM
vertical-lines-in-radteeview.png

When the root (1st) node in a RadTreeView are expanded, the background of the child nodes have black vertical lines behind them. (See screenshot attached).

What can I do about this or is this a bug?

 Thank you,

Lee

15 Answers, 1 is accepted

Sort by
0
Lee
Top achievements
Rank 1
answered on 02 Feb 2016, 07:28 PM
vertical-lines-in-radteeview.png
This is a larger picture of the issue.
0
Viktor Tachev
Telerik team
answered on 04 Feb 2016, 02:36 PM
Hi Lee,

Would you ensure that you are using the latest version of the controls? The current release is 2016.1.113.

Give the new version of the controls a try and see how it works for you.

Regards,
Viktor Tachev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Lee
Top achievements
Rank 1
answered on 22 Mar 2016, 02:10 PM

Viktor,

We have updated to the latest version and the lines are still there. Weird! Any suggestions?

Thank you,

Lee

0
Ivan Danchev
Telerik team
answered on 25 Mar 2016, 11:51 AM
Hello Lee,

I am afraid we were unable to reproduce this appearance issue in version 2016.1.113 or the latest version (2016.1.225) of the controls. If you are applying custom CSS to the TreeView could you please post it so we can test how it affects the TreeView and whether any of the styles is responsible for the undesirable multiplication of the connection lines?

Regards,
Ivan Danchev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Lee
Top achievements
Rank 1
answered on 25 Mar 2016, 01:29 PM

How do I attach a .css file? Here is the text:

/********************** Default Theme **********************/


/* Basic Elements
----------------------------------------------------------*/
body {
 background-color:#EBECED;
    color: black;
}


a, a:link, a:visited, a:hover, a:active {
 /**/color: rgb(0,100,175);
 text-decoration: underline;
}


input[type="text"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted \9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}


fieldset, legend {
    color: black;
}


/* BUTTONS
----------------------------------------------------------*/
/*.Button, .button, input[type="button"] {*/
.Button, .button {
 background: #f9f9f9;
    background: -moz-linear-gradient(top, #f9f9f9 0%, #f7f7f7 50%, #f3f3f3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(50%,#f7f7f7), color-stop(100%,#f3f3f3));
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#f7f7f7 50%,#f3f3f3 100%);
    background: -o-linear-gradient(top, #f9f9f9 0%,#f7f7f7 50%,#f3f3f3 100%);
    background: -ms-linear-gradient(top, #f9f9f9 0%,#f7f7f7 50%,#f3f3f3 100%);
    background: linear-gradient(to bottom, #f9f9f9 0%,#f7f7f7 50%,#f3f3f3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#f3f3f3',GradientType=0 );
 
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #6d747c;
    -moz-box-shadow:inset 0px 1px 0px 0px #FFF;
 -webkit-box-shadow:inset 0px 1px 0px 0px #FFF;
 box-shadow:inset 0px 1px 0px 0px #FFF;
 color: rgb(31, 28, 26);
 font-family:Arial, Helvetica, sans-serif;
 
 padding:4px 15px;
 text-decoration:none;
 text-shadow: 0px 1px 0px rgba(255,255,255, 0.8);
}
.Button:hover, .button:hover {
 background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );


    border:1px solid #333333;
}
.Button:active, .button:active {
 background: #dddddd;
    background: -moz-linear-gradient(top, #dddddd 0%, #f7f7f7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#f7f7f7));
    background: -webkit-linear-gradient(top, #dddddd 0%,#f7f7f7 100%);
    background: -o-linear-gradient(top, #dddddd 0%,#f7f7f7 100%);
    background: -ms-linear-gradient(top, #dddddd 0%,#f7f7f7 100%);
    background: linear-gradient(to bottom, #dddddd 0%,#f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#f7f7f7',GradientType=0 );
 
 -moz-box-shadow: inset, 0 0px 3px rgba(0,0,0,.3); 
 -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,.3);   
 box-shadow: inset 0px 0px 3px rgba(0,0,0,.3);
 position:relative;
 top:1px;
}


.Button:disabled, .button:disabled,
#divMsgControlBar .button:disabled, #divMsgControlBar .Button:disabled {
 background: #F0F0F0;
    color: silver;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #6d747c;
    -moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
 -webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
 box-shadow:inset 0px 1px 0px 0px #bbdaf7;
 display:inline-block;
 font-family:arial;
 font-weight:bold;
 padding:4px 15px;
 text-decoration:none;
 text-shadow:1px 1px 0px #528ecc;
    top: 0;
}



#divMsgControlBar .button, #divMsgControlBar .Button {
 background: #f9f9f9;
    background: -moz-linear-gradient(top, #f9f9f9 0%, #f7f7f7 50%, #f3f3f3 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(50%,#f7f7f7), color-stop(100%,#f3f3f3));
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#f7f7f7 50%,#f3f3f3 100%);
    background: -o-linear-gradient(top, #f9f9f9 0%,#f7f7f7 50%,#f3f3f3 100%);
    background: -ms-linear-gradient(top, #f9f9f9 0%,#f7f7f7 50%,#f3f3f3 100%);
    background: linear-gradient(to bottom, #f9f9f9 0%,#f7f7f7 50%,#f3f3f3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#f3f3f3',GradientType=0 );
 
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 border:1px solid #6d747c;
    -moz-box-shadow:inset 0px 1px 0px 0px #FFF;
 -webkit-box-shadow:inset 0px 1px 0px 0px #FFF;
 box-shadow:inset 0px 1px 0px 0px #FFF;
 display:inline-block;
 color: rgb(31, 28, 26);
 font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
 padding: 3px 5px;
 text-decoration:none;
 text-shadow: 0px 1px 0px rgba(255,255,255, 0.8);
}


#divMsgControlBar .button:hover, #divMsgControlBar .Button:hover {
 background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );


    border:1px solid #333333;
}
 
#divMsgControlBar .button:active, #divMsgControlBar .Button:active {
    background: #dddddd;
    background: -moz-linear-gradient(top, #dddddd 0%, #f7f7f7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#f7f7f7));
    background: -webkit-linear-gradient(top, #dddddd 0%,#f7f7f7 100%);
    background: -o-linear-gradient(top, #dddddd 0%,#f7f7f7 100%);
    background: -ms-linear-gradient(top, #dddddd 0%,#f7f7f7 100%);
    background: linear-gradient(to bottom, #dddddd 0%,#f7f7f7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#f7f7f7',GradientType=0 );
 
 -moz-box-shadow: inset, 0 0px 3px rgba(0,0,0,.3); 
 -webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0,.3);   
 box-shadow: inset 0px 0px 3px rgba(0,0,0,.3);
 position:relative;
 top:1px;
}


.messageSeparator {
    border-bottom: 1px solid #0c96ff;
}


/* Dashboard message area
----------------------------------------------------------*/


#divMsgControlBar{
 background-color:#EBECED;
    color: #000000;
    padding: 4px 8px 4px 8px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    vertical-align: top;
 border-bottom: 1px solid #999999;
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
 -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
 box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
}


#divMsgContent .a {
 font-size:10px;
}


/* main layout
----------------------------------------------------------*/
.header {
    color: #FFFFFF;
    margin: 0;
    background: #1c6ac9;
    background: -moz-linear-gradient(top, #1c6ac9 0%, #164f99 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1c6ac9), color-stop(100%,#164f99));
    background: -webkit-linear-gradient(top, #1c6ac9 0%,#164f99 100%);
    background: -o-linear-gradient(top, #1c6ac9 0%,#164f99 100%);
    background: -ms-linear-gradient(top, #1c6ac9 0%,#164f99 100%);
    background: linear-gradient(to bottom, #1c6ac9 0%,#164f99 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c6ac9', endColorstr='#164f99',GradientType=0 );
 -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
 -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
 box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
}


.title {
    color:#FFFFFF;
 text-shadow: 0px 1px 0px rgba(0, 0, 0, .8);
    font-weight: normal;
    font-size: 31.5px;
 line-height: 1.4em;
    padding-left: 15px;
    padding-top: 8px;
 padding-bottom: 10px;
}


.reportTitle {
    color: #FFFFFF;
 text-shadow: -1px 1px 0px rgba(0, 0, 0, .8);
    font-weight: normal;
    font-size: 31.5px;
    padding: 15px 0px 0px 15px;
    display: inline-block;
}


.errorTitle {
    color: white;
    font-weight: bold;
    font-size: 22px;
    padding-left: 15px;
    padding-top: 10px;
    margin-left: 24px;
}


.reportNumber {
 color: #FFFFFF;
    padding-left: 15px;
 font-size:17.5px;
 font-style:italic;
 line-height:1.4em;
 text-shadow: -1px 1px 0px rgba(0, 0, 0, .8);
}


.offlineMobileNumber {
 color: #FFFFFF;
    display: block;
    padding-left: 15px;
 font-size:16px;
 font-style:italic;
 line-height:1.4em;
 text-shadow: -1px 1px 0px rgba(0, 0, 0, .8);
}


#Grids {
    height: auto;
    overflow: auto;
}


#Notifications {
    border-collapse: separate;
    border-spacing: 4px;
    display: table;
    width: 100%;
}
#Notifications div.divNotifications {
    padding-right: 8px;
}#Notifications div.divNotifications:last-child {
    padding-right: 0;
}


.divNotifications {
    display: table-cell;
    height: inherit;
    width: 33%;
}


.notificationsHeader {
    background: #0c96ff;
    background: -moz-linear-gradient(top, #0c96ff 0%, #0064c8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0c96ff), color-stop(100%,#0064c8));
    background: -webkit-linear-gradient(top, #0c96ff 0%,#0064c8 100%);
    background: -o-linear-gradient(top, #0c96ff 0%,#0064c8 100%);
    background: -ms-linear-gradient(top, #0c96ff 0%,#0064c8 100%);
    background: linear-gradient(to bottom, #0c96ff 0%,#0064c8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0c96ff', endColorstr='#0064c8',GradientType=0 );


 -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
 -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
 box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
    -webkit-border-top-right-radius: 8px;
    -webkit-border-top-left-radius: 8px;
    -moz-border-top-right-radius: 8px;
    -moz-border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
 text-align:center;
    color: #FFF;
    display: block;
    padding: .7em 1.5em;
 font-size:16px;
 font-style:normal;
 text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.5);
}


.gradientBorders {
  background:  #0064c8;
 
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-bottom-right-radius: 8px;
    -moz-border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
 
    margin: 0 4px 8px 4px;
 padding: 2px 2px 2px 2px;
 
 -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
 -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
 box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
}


.notificationBorders {
  background:  #0064c8;
   
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-bottom-right-radius: 8px;
    -moz-border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    padding: 0 2px 2px 2px;
 -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
 -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
 box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.07);
}


.innerGradientBorders {
     background: #ffffff;
 -webkit-border-top-right-radius: 0px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-top-right-radius: 0px;
    -moz-border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-bottom-right-radius: 8px;
    -moz-border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
 
    height: 100%;
    overflow-y: auto;
    padding: 0px;
}


#reportHeader a,
.rtsReportToolBar a, .rtsReportToolBar a:hover {
    color: white;
    background-position: top;
}


.reportContentWrapper {
    margin-left: 165px;
    margin-top: 5px;
    height: 100%;
}


.reportContentWrapperNoLeftMargin {
    margin-top: 5px;
    height: 100%;
}


#reportContent, #moduleContent, .content {
    height: 100%;
}


#moduleContentWrapper, .contentWrapper {
    padding-left: 0px;
    padding-top: 10px;
}
/*#moduleHeader, #schedulingHeader {
    -webkit-border-top-left-radius:0.5em;
 -moz-border-top-left-radius:0.5em;
 border-top-left-radius:0.5em;
}*/


#main-content, .main-content {
    overflow-y: auto;
}


/* tabs
----------------------------------------------------------*/
#tabs{
    background: #F0F0F0;
    overflow: hidden;
    margin: 4px 4px -5px 4px;
 /*-moz-box-shadow: 0px 0px 4px rgba(0,0,0,.5);
 -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,.5);
 box-shadow: 0px 0px 4px rgba(0,0,0,.5);*/
 display:inline-block;
    list-style: none;
    padding: 0px 0px 0px 0px;
    white-space: nowrap;
 -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}


#tabs li{
    float: left;
    margin: 0 0 0 0;
 padding-bottom: 0px;
}


#tabs a {
 background: #0fa0ff;
 background: -moz-linear-gradient(top, #0fa0ff 0%, #0064c8 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0fa0ff), color-stop(100%,#0064c8));
 background: -webkit-linear-gradient(top, #0fa0ff 0%,#0064c8 100%);
 background: -o-linear-gradient(top, #0fa0ff 0%,#0064c8 100%);
 background: -ms-linear-gradient(top, #0fa0ff 0%,#0064c8 100%);
 background: linear-gradient(to bottom, #0fa0ff 0%,#0064c8 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0fa0ff', endColorstr='#0064c8',GradientType=0 );
 position: relative;
 padding: 10px;
    float: left;
 display:inline-block;
    text-decoration: none;
 font-weight: normal;
 font-size: 16px;
 border-right: solid 1px #0c96ff;
 border-left: solid 1px #003399;
 color: #FFFFFF;
}


#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
    background: #50c6fc;
    background: -moz-linear-gradient(top, #50c6fc 0%, #0674ce 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#50c6fc), color-stop(100%,#0674ce));
    background: -webkit-linear-gradient(top, #50c6fc 0%,#0674ce 100%);
    background: -o-linear-gradient(top, #50c6fc 0%,#0674ce 100%);
    background: -ms-linear-gradient(top, #50c6fc 0%,#0674ce 100%);
    background: linear-gradient(to bottom, #50c6fc 0%,#0674ce 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#50c6fc', endColorstr='#0674ce',GradientType=0 );
    color: #FFFFFF;
    border-right: solid 1px #0c96ff;
    border-left: solid 1px #164f99;
}


#tabs a:focus{
    outline: 0;
}


#tabs .current a{
    background: #1c6ac9;
    background: -moz-linear-gradient(top, #1c6ac9 0%, #164f99 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1c6ac9), color-stop(100%,#164f99));
    background: -webkit-linear-gradient(top, #1c6ac9 0%,#164f99 100%);
    background: -o-linear-gradient(top, #1c6ac9 0%,#164f99 100%);
    background: -ms-linear-gradient(top, #1c6ac9 0%,#164f99 100%);
    background: linear-gradient(to bottom, #1c6ac9 0%,#164f99 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c6ac9', endColorstr='#164f99',GradientType=0 );
 
    color: #FFF;
 border-right: solid 1px #1c6ac9;
 border-left: solid 1px #164f99;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    z-index: 3;
}


/* ComponentArt tabs
----------------------------------------------------------*/
.DefaultTab, .SubDefaultTab {
    /*position: relative;*/
    /* commented out this was overriding the gradient in IE8 and IE9
        background: rgb(187,187,187);*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#6d6e71));
    background-image: -webkit-linear-gradient(top, #bbb, #6d6e71);
    background-image: -moz-linear-gradient(top, #bbb, #6d6e71);
    background-image: -ms-linear-gradient(top, #bbb, #6d6e71);
    background-image: -o-linear-gradient(top, #bbb, #6d6e71);
    background-image: linear-gradient(to bottom, #bbb, #6d6e71); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#6d6e71',GradientType=0 );
    float: left;
    text-decoration: none;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
 border-bottom:#666 1px solid;
    cursor:pointer;
}


.DefaultTabHover, .DefaultTab:hover,
.SubDefaultTabHover, .SubDefaultTab:hover
{
    background: rgb(187,187,187);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5ZTlmYTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, rgba(187,187,187,1) 0%, rgba(158,159,161,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(187,187,187,1)), color-stop(100%,rgba(158,159,161,1)));
    background: -webkit-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(158,159,161,1) 100%);
    background: -o-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(158,159,161,1) 100%);
    background: -ms-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(158,159,161,1) 100%);
    background: linear-gradient(to bottom, rgba(187,187,187,1) 0%,rgba(158,159,161,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#9e9fa1',GradientType=0 );
    float: left;
 color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
    text-decoration: none;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
 border-bottom:#666 1px solid;
    cursor:pointer;
}


.SelectedTab, .DefaultTab:active,
.SubSelectedTab, .SubDefaultTab:active
{
    color:#000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    float: left;
    text-decoration: none;
    -webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    background-color:none;
    font-family: Arial;
    font-size: 14px;
    line-height:20px;
    cursor:pointer;
    text-align: center;
    border-top:#666 1px solid;
    border-right:#666 1px solid;
    border-left:#666 1px solid;
    border-bottom:solid 1px transparent;
}


/* data tables
----------------------------------------------------------*/
.dashboardDataGrid {
    background-color:#bebebe;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    border-spacing: 1px;
    border-collapse: separate;
    width: 100%;
}
.dashboardDataGrid tr.dataGridRow:hover td,
.dashboardDataGrid tr.dataGridAlternateRow:hover td,
.dashboardDataGrid tr.dataListRow:hover td,
.dashboardDataGrid tr.dataListAlternateRow:hover td,
.dataGridHighlight
 {
   background: #dde9ff;
    background: -moz-linear-gradient(top, #dde9ff 0%, #c9e1ff 0%, #e0eeff 0%, #c9e1ff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dde9ff), color-stop(0%,#c9e1ff), color-stop(0%,#e0eeff), color-stop(100%,#c9e1ff));
    background: -webkit-linear-gradient(top, #dde9ff 0%,#c9e1ff 0%,#e0eeff 0%,#c9e1ff 100%);
    background: -o-linear-gradient(top, #dde9ff 0%,#c9e1ff 0%,#e0eeff 0%,#c9e1ff 100%);
    background: -ms-linear-gradient(top, #dde9ff 0%,#c9e1ff 0%,#e0eeff 0%,#c9e1ff 100%);
    background: linear-gradient(to bottom, #dde9ff 0%,#c9e1ff 0%,#e0eeff 0%,#c9e1ff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dde9ff', endColorstr='#c9e1ff',GradientType=0 );
    cursor: pointer;
}
.dashboardDataGrid tr td{
 padding: 3px 4px;
}


.dataGrid {
    background-color:#bebebe;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-spacing: 1px;
    border-collapse: separate;
}
.dataGrid tr td {
    padding: 4px 5px;
}


.dataGridHeader td, .dataGridHeader th, .dataGridHeader {
    background: #f2f2f2;
    background: -moz-linear-gradient(top, #f2f2f2 0%, #cedbe8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#cedbe8));
    background: -webkit-linear-gradient(top, #f2f2f2 0%,#cedbe8 100%);
    background: -o-linear-gradient(top, #f2f2f2 0%,#cedbe8 100%);
    background: -ms-linear-gradient(top, #f2f2f2 0%,#cedbe8 100%);
    background: linear-gradient(to bottom, #f2f2f2 0%,#cedbe8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#cedbe8',GradientType=0 );
    color: rgb(0, 100, 200);
    padding: 8px;
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5);
    text-align: left;
}
#taskInnerWrapper .dataGridRow a,
#taskInnerWrapper .dataGridAlternateRow a {
    color: black;
    text-decoration: none;
    font-weight: normal;
}


tr.dataGridHeader td a, tr.dataGridHeader th a {
    color: rgb(0, 100, 200);
 text-decoration:none;
 font-weight: normal;
}
tr.dataGridHeader td a:hover, tr.dataGridHeader th a:hover {
    color: rgb(0, 100, 200);
 text-decoration:underline;
 font-weight: normal;
}


.dataGridHeader td:first-child, .dataGridHeader th:first-child {
    -webkit-border-top-left-radius: 5px;
    -moz-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
}


.dataGridHeader td:last-child, .dataGridHeader th:last-child {
    -webkit-border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
}


.dataGridFooter, tr.dataGridFooter td {
    background: #f2f2f2;
    background: -moz-linear-gradient(top, #f2f2f2 0%, #cedbe8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f2f2), color-stop(100%,#cedbe8));
    background: -webkit-linear-gradient(top, #f2f2f2 0%,#cedbe8 100%);
    background: -o-linear-gradient(top, #f2f2f2 0%,#cedbe8 100%);
    background: -ms-linear-gradient(top, #f2f2f2 0%,#cedbe8 100%);
    background: linear-gradient(to bottom, #f2f2f2 0%,#cedbe8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#cedbe8',GradientType=0 );
    color: rgb(0, 100, 200);
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5);
    padding: 0;
}
.dataGridFooter td:first-child {
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
}


.dataGridFooter td:last-child {
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
}


.dataGridRow, .dataListRow {
    background-color: white;
}
.dataListAlternateSolidRow {
    background-color: #efefef;
}


.dataGridAlternateRow td, .dataListAlternateRow,
.rgAltRow {
    background: #F0F0F0;
}


.dataGridPaging {
    background-color: transparent;
 font-family: verdana;
 font-weight: bold;
 font-size: 9pt;
    height: 5px;
}


.dataGridPaging a {
    color: #00ACFC;
    text-decoration: none;
}
a.selectedPageLink, .dataGridPaging a:hover,
.dataGridPaging span {
    color: #1d1e21;
    text-decoration: none;
}


td.dataGridHeaderSortedUp, th.dataGridHeaderSortedUp, .dataGridHeaderSortedUp {
 background: url(Images/arrow_blue_up.png) no-repeat right 50%;
    padding-right: 15px;
}


td.dataGridHeaderSortedDown, th.dataGridHeaderSortedDown, .dataGridHeaderSortedDown {
 background: url(Images/arrow_blue_down.png) no-repeat right 50%;
    padding-right: 15px;
}


.topLeftRounded {
    -webkit-border-top-left-radius:0.5em;
 -moz-border-top-left-radius:0.5em;
 border-top-left-radius:0.5em;
}



/* forms
----------------------------------------------------------*/
.sectionHeader {
    display: block;
    padding: 0;
    margin-bottom: 10px;
    color: #333333;
    border: 0;
    font-size: 21px;
    line-height: 40px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}


.sectionSubHeader {
    display: block;
    padding: 0;
    margin-bottom: 5px;
    margin-top: 5px;
    color: #333333;
    border: 0;
    font-size: 18px;
    line-height: 30px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}


/* misc
----------------------------------------------------------*/
.close {
    cursor: pointer;
    padding-right: 5px;
    text-decoration: underline;
}



.vsMaster {
    color: Red;
    background-color: Yellow;
    text-align: center;
    font-weight: bold;
    z-index: 1000;
    position: absolute;
    width: 600px;
    margin-left: 240px;
    margin-top: -12px;
    -webkit-box-shadow: -2px 2px 6px 0px #000;
    box-shadow: -2px 2px 6px 0px #000;
    padding: 5px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}


.divLine {
    background-color: rgb(0,100,210);
    padding-bottom: 5px;
}


#divCautionAlert {
    background-color: #efefef;
    border: 2px solid #bebebe;
    border-radius: 5px;
    position: absolute;
    z-index: 100;
}


.informLabel {
    color: rgb(192, 152, 83);
    display: block;
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
    background-color: rgb(252, 248, 227);
    border: 1px solid rgb(251, 238, 213);
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 5px;
}


.ReadOnlyFlat {
 display: inline;
 border: solid 1px #ccccdd;
 background-color: #f9f9f9;
 color: #000033;
 cursor:default;
 
}


.ReadOnlyFlatNew {
 display: inline;
 border: solid 1px #ccccdd;
 background-color: #f9f9f9;
 color: #000033;
 cursor:default;
 border-right-width: 0px;
}


.visitorTrackingLegend {
    background-color: #939393;
    color: white;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}


.border-gray {
    border: 1px solid gray;
}
 
.errormessage
{
 color: RED;
 font-weight:bold;
}


.controlsBgdColor {
    background-color: #c0c0c0;
}


.printPrepBorder {
    border-radius: 10px;
    border: 3px solid black;
    margin: 10px;
}


.instructions {
    position: absolute;
    display: none;
    width: 250px;
    overflow: auto;
    border-style: solid;
    border-width: thin;
    height: 220px;
    background-color: white;
    padding: 5px;
    z-index: 100;
}


.keyRingCheckOutBorderBottom {
    border-bottom: 1px solid black;
}
.keyRingCheckOutBorderRight {
    border-right: 1px solid black;
}


.success {
    font-weight: bold;
    color: green;
}


tr.TrespassCautionBoloHighlight {
    background-color: #0fe020;
    color: black;
}
tr.LateCheckOutHighlight {
    background-color: #ff9966;
    color: black;
}
tr.FrequentVisitor {
    background-color: #d5ed9c;
    color: black;
}
tr.TrespassCautionBoloHighlight td a,
tr.TrespassCautionBoloHighlight td a:link,
tr.TrespassCautionBoloHighlight td a:visited,
tr.TrespassCautionBoloHighlight td a:hover,
tr.TrespassCautionBoloHighlight td a:active,
tr.LateCheckOutHighlight td a,
tr.LateCheckOutHighlight td a:link,
tr.LateCheckOutHighlight td a:visited,
tr.LateCheckOutHighlight td a:hover,
tr.LateCheckOutHighlight td a:active,
tr.FrequentVisitor td a,
tr.FrequentVisitor td a:link,
tr.FrequentVisitor td a:visited,
tr.FrequentVisitor td a:hover,
tr.FrequentVisitor td a:active {
    color: black;
}



tr td.StatusNew {
    background: white;
}


.dashboardDataGrid tr.dataGridRow:hover td.StatusNew,
.dashboardDataGrid tr.dataGridAlternateRow:hover td.StatusNew,
.dashboardDataGrid tr.dataListRow:hover td.StatusNew,
.dashboardDataGrid tr.dataListAlternateRow:hover td.StatusNew {
    background: #f0f0f0;
}


tr td.StatusInProgress {
    background: #ffff97;
}


.dashboardDataGrid tr.dataGridRow:hover td.StatusInProgress,
.dashboardDataGrid tr.dataGridAlternateRow:hover td.StatusInProgress,
.dashboardDataGrid tr.dataListRow:hover td.StatusInProgress,
.dashboardDataGrid tr.dataListAlternateRow:hover td.StatusInProgress {
    background: #ffff53;
}


tr td.StatusReady {
    background: #a0ffae;
}


.dashboardDataGrid tr.dataGridRow:hover td.StatusReady,
.dashboardDataGrid tr.dataGridAlternateRow:hover td.StatusReady,
.dashboardDataGrid tr.dataListRow:hover td.StatusReady,
.dashboardDataGrid tr.dataListAlternateRow:hover td.StatusReady {
    background: #77FF8B ;
}


.entityTrespass {
    background-color: #0fe020;
    color: black;
}
.entityTrespass a, .entityTrespass a:link, .entityTrespass a:hover, .entityTrespass a:active, .entityTrespass a:visited,
.entityCaution a, .entityCaution a:link, .entityCaution a:hover, .entityCaution a:active, .entityCaution a:visited {
    color: black;
}


.entityCaution {
    background-color: red;
    color: black;
}


.radAjaxLoadingPanel {
    background-color: lightblue;
    background: lightblue;
}


#global-application-overlay {
    z-index: 9999999;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(255,255,255, 0.5);
    top: 0;
    left: 0;
    display: none;
}
.global-application-overlay-spinner-wrapper {
    width: 173px;
    height: 173px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -86px 0 0 -86px;
    background-image: url(Images/loading-spinner.gif);
    background-repeat: no-repeat;
}


.k-filter-menu label {
    margin-right: 15px !important;
}
input[type=radio], input[type=checkbox] {
    margin: 4px 4px 0 0 !important;
}
.k-filter-menu .k-combobox,
.k-filter-menu .k-datepicker,
.k-filter-menu .k-timepicker,
.k-filter-menu .k-datetimepicker,
.k-filter-menu .k-numerictextbox,
.k-filter-menu .k-dropdown,
.k-filter-menu .k-textbox {
    width: 15.8em;
}
#reportDynamicColumnList label{
    color: #164f99;
    display: block;
    font-weight: normal;
    line-height: 20px;
    margin-bottom: 5px;
    cursor: pointer;
}
#gridFilterDisplayer {
    padding: 8px;
    -ms-border-radius: 7px;
    border-radius: 7px;
}
dashboardDataGrid.table {
    background-color: transparent !important;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    border-spacing: 0px;
    border-collapse: separate;
    width: 100%;
}
.dataGridHeader td, .dataGridHeader th, .dataGridHeader {
    background-color: transparent !important;
}


.dashboardDataGrid.table > thead > tr > th,
.dashboardDataGrid.table > thead > tr > td,
.dashboardDataGrid.table > tbody > tr > td {
    border: inherit !important;
}
.dashboardDataGrid.table > tbody > tr > td {
    border-top: 1px solid #bebebe !important;
}
.filterDisplayerInput {
    border: 1px solid #ccc;
    background-color: #528eca;
    padding: 10px 3px 10px 8px;
    -ms-border-radius: 5px;
    border-radius: 5px;
    width: auto;
    max-height: 300px;
    overflow-y: auto;
    font-family: Helvetica;
    text-align: center;
    color: #fff;
    display: inline-block;
    max-width: 100%;
    float: left;
    margin: 10px;
    line-height: 100%;
}
.filterDisplayerInput .close{
    float: right;
    margin-left: 5px;
    cursor: pointer;
    font-size: 14px !important;
    text-decoration: none !important;
}
.filterDisplayerInput .close:hover, .filterDisplayerInput .close:focus {
    text-shadow: 1px 1px #000000;
}
.ms-res-ctn {
    min-height: 150px !important;
}
.panel-group{
    margin-bottom: 0px;
}
#searchPagesTemplateWrapper{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    margin: 0 auto;
    max-width: 100%;
    background-color: white;
}
.dynamicColumnsTitle{
    font-weight: bold;
}
#gridDisplayerPanel #toggleIcon {
    font-size: 14px !important;
}   
.column-options-title-top{
    border-bottom: 1px dashed #ccc;
}
.column-options-title-top h3{
    color: #164f99;
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 21px;
}
.column-options-title{
    border-bottom: 1px dashed #ccc;
    border-top: 1px dashed #ccc;
}
.column-options-title h3{
    color: #164f99;
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 21px;
}
.gridTotalDisplayer{
    height: 32px;
    min-height: 32px;
    display: none;
    background-color: #fff;
}
#gridWrapper{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    margin: 0 auto;
    max-width: 100%;
    background-color: white;
}
.panel-body {
    padding: 0px 15px 0px 15px;
}
span.contact-column-template{
    color: gray;
    font-style: italic;
}

 

0
Ivan Danchev
Telerik team
answered on 25 Mar 2016, 03:23 PM
TreeViewConnectionLines.zip
Hello Lee,

The forum does not allow attachments.

I tested your CSS and with it applied no issue with the connection lines was observed, therefore I attached a sample runnable project. Please, modify it so that the problem is reproduced and post your modifications for further review.

Regards,
Ivan Danchev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Lee
Top achievements
Rank 1
answered on 31 Mar 2016, 01:39 PM

I have found that if I use a built in skin, the vertical lines do not appear. But the font changes and the expand and collapse buttons disappear; only the lines appear. (There were small arrows before; see screen shots above) What's the easiest way to change those?

 

0
Lee
Top achievements
Rank 1
answered on 01 Apr 2016, 03:22 PM

Ivan,

I found the local css file that has the markup for the RadTreeView and with the help of the tutorial on creating a custom skin, found the errant markrup.

Thank you for your time and responses!

Lee

0
Ivan Danchev
Telerik team
answered on 01 Apr 2016, 04:02 PM
Hello Lee,

Thank you for getting back to us. I am glad you managed to find what was causing the incorrect lines appearance and the issue is fixed.

Regards,
Ivan Danchev
Telerik
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Bijender
Top achievements
Rank 1
answered on 08 Sep 2016, 09:28 PM

Hey Lee,

I am facing same issue, can you please your solution

0
Lee
Top achievements
Rank 1
answered on 09 Sep 2016, 01:14 PM

I found the local css file that controls the RadTreeView control and with the assistance of Telerik's tutorial, I figured out that there were duplicate lines in the css file and a background defined for the first line in error.
(http://docs.telerik.com/devtools/aspnet-ajax/controls/treeview/appearance-and-styling/tutorial-on-creating-a-custom-skin)

/*      ENTDEV-7215 LMK 4.1.2016    Duplicates with vertical lines in error    */
/*.RadTreeView_ReportExecEnterprise .rtLines .rtFirst .rtUL { background-image: url('TreeView/NodeSpan.png'); }
.RadTreeView_ReportExecEnterprise_rtl .rtLines .rtFirst .rtUL { background-image:url('TreeView/NodeSpan_rtl.png'); }*/
.RadTreeView_ReportExecEnterprise .rtLines .rtFirst,

0
Bijender
Top achievements
Rank 1
answered on 09 Sep 2016, 05:18 PM
capture.png

Thanks Lee, any clue why all checkbox are coming check in actually the are unchecked in the backend. any hint will do.

see the attachment, actual checked are little darker in color.

 

Houston is checked rest should be uncheck, css is correct why image is not changing for unchecked.

0
Lee
Top achievements
Rank 1
answered on 09 Sep 2016, 05:43 PM

Sorry, can't help you there. Good luck.

 

0
Bijender
Top achievements
Rank 1
answered on 09 Sep 2016, 05:56 PM
thanks
0
Ivan Danchev
Telerik team
answered on 13 Sep 2016, 11:12 AM
Hello Bijender,

Since the issue you are experiencing is not related to this thread's subject, please open a separate one and provide all the necessary information that can help reproduce the problem including: controls version used, TreeView markup declaration, custom CSS, your logic for checking/unchecking the nodes.

Regards,
Ivan Danchev
Telerik by Progress
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
TreeView
Asked by
Lee
Top achievements
Rank 1
Answers by
Lee
Top achievements
Rank 1
Viktor Tachev
Telerik team
Ivan Danchev
Telerik team
Bijender
Top achievements
Rank 1
Share this question
or