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

Change order of checkbox and icons on Treeview

5 Answers 592 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Charles
Top achievements
Rank 1
Charles asked on 15 Jan 2016, 04:22 PM

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

5 Answers, 1 is accepted

Sort by
0
Charles
Top achievements
Rank 1
answered on 15 Jan 2016, 04:33 PM

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) 

 

0
Charles
Top achievements
Rank 1
answered on 16 Jan 2016, 03:18 PM
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.
0
Magdalena
Telerik team
answered on 19 Jan 2016, 08:47 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Charles
Top achievements
Rank 1
answered on 25 Jan 2016, 06:52 PM

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

0
Magdalena
Telerik team
answered on 27 Jan 2016, 12:46 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
TreeView
Asked by
Charles
Top achievements
Rank 1
Answers by
Charles
Top achievements
Rank 1
Magdalena
Telerik team
Share this question
or