Réduire l'espace entre les noeuds d'un TreeView

Version imprimable

J'essaie de réduire l'espacement entre les noeuds d'un TreeView.
Les propriétés sont pourtant parlantes et je pense que les propriétés liées aux noeuds Parent Selected etc font peut être doublon avec Node Style mais malgré cela j'ai toujours l'équivalent d'une ligne vide entre deux noeuds

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
          <asp:TreeView ID="tv_Liste" runat="server" 
                onselectednodechanged="tv_Liste_SelectedNodeChanged" 
                Height="132px">
                <HoverNodeStyle Height="3px" />
                <LeafNodeStyle ChildNodesPadding="1px" Height="3px" />
                <NodeStyle ChildNodesPadding="1px" 
                            Font-Size="XX-Small" 
                            Height="3px" 
                            NodeSpacing="1px" 
                            VerticalPadding="1px" />
                <ParentNodeStyle ChildNodesPadding="1px" 
                            Height="3px" 
                            NodeSpacing="1px" 
                            VerticalPadding="1px" />
                <RootNodeStyle Height="5px" 
                            NodeSpacing="1px" 
                            VerticalPadding="1px" />
                <SelectedNodeStyle Height="3px" 
                            NodeSpacing="1px" 
                            VerticalPadding="1px" />
            </asp:TreeView>

Merci de votre aide

14/10/2012, 16h54
Joel Pinto Ribeiro

ça resoudra pas ton probleme mais en mettant

Code:

ImageSet="Arrows"

l'espacement a l'air d'etre plus court entre les differentes nodes.

EDIT:

De plus je suis pas sur de la pertinence des NodeSpacing="1px" j'ai l'impression que cela a pour effet de rajouter de l'espacement inutile .

Merci!
Oui effectivement j'arrive à quelque chose de mieux avec l'imageset.

J'ai aussi fini par trouver ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
                   <LevelStyles>
                        <asp:TreeNodeStyle ChildNodesPadding="0" 
                            Font-Bold="false" 
                            Font-Size="10pt" 
                            ForeColor="DarkGreen"/>
                        <asp:TreeNodeStyle ChildNodesPadding="0" 
                            Font-Size="10pt"/>
                        <asp:TreeNodeStyle ChildNodesPadding="0" 
                            Font-Size="10pt"/>
                        <asp:TreeNodeStyle ChildNodesPadding="0" 
                            Font-Size="10pt"/>
                    </LevelStyles>

D'une part effectivement le ChildNodesPadding est à 0 mais en plus il n'y a pas d'unité.
L'espace est encore un peu trop important mais c'est déjà moins pire

Si quelqu'un voit comment agir mieux je suis preneur

14/10/2012, 21h25
Joel Pinto Ribeiro

Encore un point d'optimisation :

au niveau du css de ta page:

Citation:

.tree td,table
{
line-height:10px;
border-spacing:0px;
}

et tu applique ce style à ta treeview :

Citation:

CssClass="tree"

dis moi si c'est mieux?

C'est effectivement encore mieux : j'ai gagné 2 lignes de plus à l'affichage avant de devoir utiliser le scrool.
Je suppose qu'on peut encore réduire en agissant sur le line-height de la feuille de style mais il ne faut pas exagérer

Par contre j'ai retiré les td et table du style

Merci beaucoup

En résumé on a donc maintenant ceci au niveau de la page :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
               <asp:TreeView ID="tv_Liste" runat="server" 
                     CssClass="tree"
                     ImageSet="Arrows"
                     onselectednodechanged="tv_Liste_SelectedNodeChanged" >
                    <LevelStyles>
                        <asp:TreeNodeStyle ChildNodesPadding="0" 
                            VerticalPadding="0"
                            Font-Bold="false" 
                            Font-Size="10pt" 
                            ForeColor="DarkGreen"/>
                        <asp:TreeNodeStyle ChildNodesPadding="0" 
                            VerticalPadding="0"
                            Font-Size="10pt"/>
                        <asp:TreeNodeStyle ChildNodesPadding="0" 
                            VerticalPadding="0"
                            Font-Size="10pt"/>
                        <asp:TreeNodeStyle ChildNodesPadding="0" 
                            VerticalPadding="0"
                            Font-Size="10pt"/>
                    </LevelStyles>
                </asp:TreeView>

et cela au niveau de la feuille de style :

Code:

1
2
3
4
5
.tree 
{
    line-height:10px;
    border-spacing:0px;
}

Merci à vous