Change order of checkbox and icons on Treeview

[Charles]

Can anyone tell me what file and how I would modify to display node checkboxes BEFORE the node icons, See the attached mock up picture.  I would also like to improve the separation spacing slightly.

Thank you in advance,

 - Charlie

[Charles]

PS, as per posting guideline number 6 - My environment is:

Visual Studio Ultimate 2013 Version 12.0.31101.00 Update 4
Kendo UI: version Q3 2015 2015.3.1111
OS: Windows 7 Enterprise 64bit Service Pack 1
exact browser version: Google Chrome Version 47.0.2526.80 m
jQuery version: (NOT registered independently from Kendo UI) 

 

[Charles]

further clarification: I am overriding the standard black triangle that is either right facing for a collapsed node, or facing down for an expanded node with a briefcase that is either open or closed.  It is this graphic that I want to move to be to the right of the node checkbox, not the spirit graphic that shows a folder, pdf, html, image, etc, with each element.

[Magdalena]

Hi Charles,

If you would like to render two images, the better way is to combine images and sprites. We would like to refer you to this demo, where you can see the both approaches. We are sending you also a sample project in the attacment, where we are adding a search icon image by the "image" approach and the second icon by a sprite.

If the first image should be also a sprite, you can add it by a pseudo element by the following:

.k-treeview .k-in:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url( "coloricons-sprite.png" );
}

If you would like to hide expand/collapse icons, you can make it by the following:

#treeview .k-icon {
    display: none;
}

Regards,
Magdalena
Telerik

 

 

[Charles]

Hi Magadlena,

Thank you for your reply.  Sorry it has taken me so long to get back to you on this.  I had to resolve something with a higher priority.

I tried your sample file and looked at the link also, and while the checkboxes are in front of the search.png image.  There is no node collapsed / node expanded graphic and no functionality of the nodes collapsing and expanding.

I used an inline style to override the default kendo node collapsed (right triangle) and node expanded (down triangle):

<script type="text/css">

    #jobTreeview.k-treeview .k-minus {
background: url("../Content/Images/briefcase-open-icon-16x16.png") center center;
}
#jobTreeview.k-treeview .k-plus {
background: url("../Content/Images/briefcase-closed-icon16x16.png") center center;
} 

</style> 

but again these images show up first on the left side of the check boxes, so, can you have a expandable / collapsible image on the right side of the node checkboxes ?

Thank you for any assistance you can offer.

- Charlie

[Magdalena]

Hi Charles,

Actually this is not supported scenario, but you can switch the position of expand/collapsed icons and checkboxes by applying the following:

#treeview .k-icon {
    margin-right: -30px;
}

html .k-treeview .k-item {
    padding-left: 30px;
}

html .k-treeview .k-in {
    margin-left: 0.3em;
}

Hoping this solution will meet your expectations.

Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Telerik