Change order of checkbox and icons on Treeview

6 posts, 0 answers
  1. Charles
    Charles avatar
    8 posts
    Member since:
    Dec 2015

    Posted 15 Jan Link to this post

    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

  2. Charles
    Charles avatar
    8 posts
    Member since:
    Dec 2015

    Posted 15 Jan Link to this post

    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) 

     

  3. Kendo UI is VS 2017 Ready
  4. Charles
    Charles avatar
    8 posts
    Member since:
    Dec 2015

    Posted 16 Jan Link to this post

    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.
  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 19 Jan Link to this post

    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!
     
  6. Charles
    Charles avatar
    8 posts
    Member since:
    Dec 2015

    Posted 25 Jan in reply to Magdalena Link to this post

    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

  7. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 27 Jan Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready