search

fauzi28 / dynatree

Automatically exported from code.google.com/p/dynatree
0 stars 0 forks source link

$("#xx").dynatree("option", classNames" { container: ":.."} does not work #448

Closed GoogleCodeExporter closed 8 years ago

GoogleCodeExporter commented 8 years ago 
Purpose: Initially use the default styles for as long as the expanded tree
does not grow too big (I don't want to have the ugly scrollbars there). When 
the tree does indeed grow too big dynamically switch to a second set of styles 
which use a scrollbar.

What steps will reproduce the problem?
1. extend ui.dynatree.css to have an additional set of "dynatree-containerXXX" 
styles (purpose: have a set of CSS settings which used overflow scolling and 
one that does not), e.g.

ul.dynatree-container
{
    font-family: tahoma, arial, helvetica;
    font-size: 10pt; /* font size should not be too big */
    white-space: nowrap;
    padding: 3px;
    margin: 0; /* issue 201 */
    background-color: white;
    border: 0px dotted gray;    /*FIX: removed the border line*/
    overflow: auto;
    height: 100%; /* issue 263 */ 
}
ul.dynatree-containerXXX
{
    font-family: tahoma, arial, helvetica;
    font-size: 10pt; /* font size should not be too big */
    white-space: nowrap;
    padding: 3px;
    margin: 0; /* issue 201 */
    background-color: white;
    border: 0px dotted gray;
    overflow: scroll;
    height: 300px; /* issue 263 */ 
}
... etc

2. use below code to switch from the default "classNames" to the new one (e.g. 
in a drag&drop handler when you realize that the list is getting too long and 
needs a scrollbar..):

    $("#tree2").dynatree("option", "classNames", {
               container: "dynatree-containerXXX"
    });
    $("#tree2").dynatree("getTree").redraw();

=> it seems that the respective change on an existing tree DOES NOT have the 
same effect that it would have had while initially loading the tree...

3. try to use the same settings in the tree config to see what it should look 
like (but doesnt..)
        classNames: {
               container: "dynatree-containerXXX"
    }

For now I just applied a hack by adding this function to the jquery.dynatree.js:

    resetContainerClass: function(className) {
        if (this.tnRoot.ul) {
            this.tnRoot.ul.className= className;
        }
    },

.. which I now use instead of $("#tree2").dynatree("option",...

The code can be seen in action here (the scrollbar here shows only when there 
are more than 12 items in the list):
http://www.wothke.ch/tinyrsid/index.php/explorer?playlistId=3

What version of the dynatree and jQuery are you using?
 - the one currently used in the official drag&drop3 example. it says Version: 1.2.4 in the file..

On what operating system and browser?
 - WinXP using Firefox, Chrome & Opera (IE8 does not work due to a separate defect which I reported earlier)

What DOCTYPE declaration are you using?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >

Please provide any additional information below.

The impression I got while briefly looking into the jquery.dynatree.js is that 
certain settings are only evaluated once but not again when there might have 
been changes (see render function)...

PS: The following instance of a hard-coded classname also seems to be bloody 
stupid (how is that supposed to work if users can chose their own classes.??): 
            $("ul.dynatree-container", node.tree.divTree).append($helper);

Original issue reported on code.google.com by juergen....@gmail.com on 30 Jul 2013 at 4:55

GoogleCodeExporter commented 8 years ago 
That's true, the classNames property only works on initialization.
You could instead call

    $("ul.dynatree-container").toggleClass("scrolling")

and add some css after the standard style

    ul.dynatree-container.scrolling {
        overflow: scroll;
        height: 300px;
    }

Not tested, but you get the idea; anyway: no reason to modify the original JS 
or CSS, I guess.

Original comment by moo...@wwwendt.de on 31 Jul 2013 at 8:37

GoogleCodeExporter commented 8 years ago 
Thx for the tip.. now I am using:
$("#tree2 ul.dynatree-container").toggleClass("scrollbar", show) - and indeed 
it works like a charm

Still it might be useful if you updated the doc to mention the "classNames" 
related limitation of the "option" API.

Original comment by juergen....@gmail.com on 31 Jul 2013 at 10:02