HOW TO: Show Right-to-Left lines in a TreeView, in ASP.NET 2.0
Applies to
- Microsoft ASP.NET 2.0
- Microsoft Visual Studio 2005
Summary
Details
Step-by-Step
References
Summary
This step-by-step article describes how to display a Treeview control lines correctly, in a right-to-left (rtl) page. The Tree view control displays the items correctly, they are right aligned and the nodes are on the left of the root. However, if TreeView.ShowLines is set to true the horizontal lines are displayed to the right, instead of the left.
In this article we provide the flipped Treeview lines. You can then use them in your application.
Details
By default, the TreeView control doesn’t display lines between the nodes. If you want to display connecting lines between tree nodes, then you need to set the TreeView control's ShowLines property.
The following code demonstrates a statically filled Treeview, with ShowLine=true
<html dir=rtl>
<body>
<form id="form1" runat="server">
<asp:TreeView ID="TreeView1" runat="server" ShowLines="True">
<Nodes>
<asp:TreeNode Text="ألوان" Value="ألوان">
<asp:TreeNode Text="أحمر" Value="أحمر"></asp:TreeNode>
<asp:TreeNode Text="أزرق" Value="أزرق"></asp:TreeNode>
<asp:TreeNode Text="أخضر" Value="أخضر"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="أشكال" Value="أشكال">
<asp:TreeNode Text="دائرة" Value="دائرة"></asp:TreeNode>
<asp:TreeNode Text="مربع " Value="مربع"></asp:TreeNode>
<asp:TreeNode Text="مثلث " Value="مثلث"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</form>
</body>
</html>
|
Even though the Tree is displayed properly but the generated lines assume left-to-right (ltr) and the treeview item lines still point to the right instead of the left, check figure 1.
 |
| Figure 1 |
This behavior occurs because the TreeView assumes ltr direction and displays the lines accordingly. Luckily in ASP.NET 2.0 you can easily customize the Lines and display them in an rtl way.
You can customize the appearance of the lines by creating your own line images. The TreeView control uses the LineImagesFolder property to find the folder that contains the line images.
Follow these steps and your page should be as follows:
<html dir=rtl>
<body>
<form id="form1" runat="server">
<asp:TreeView ID="TreeView1" runat="server" ShowLines="True" LineImagesFolder="~/TreeLineImages">
<Nodes>
<asp:TreeNode Text="ألوان" Value="ألوان">
<asp:TreeNode Text="أحمر" Value="أحمر"></asp:TreeNode>
<asp:TreeNode Text="أزرق" Value="أزرق"></asp:TreeNode>
<asp:TreeNode Text="أخضر" Value="أخضر"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNode Text="أشكال" Value="أشكال">
<asp:TreeNode Text="دائرة" Value="دائرة"></asp:TreeNode>
<asp:TreeNode Text="مربع " Value="مربع"></asp:TreeNode>
<asp:TreeNode Text="مثلث " Value="مثلث"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</form>
</body>
</html>
|
Browse your ASP.NET page and you can now view your rtl TreeView correctly, check figure 2.
 |
| Figure 2 |
Step-by-Step
You can easily customize the line images to show your rtl lines, by following these simple steps.
- Set Treeview.ShowLines = true.
- From the action menu select "Customize line images..."
- The "TreeView Line Image Generator dialog" appears, make sure you have the desired line setting and Press "OK".
- A folder is created \TreeLineImages
-
Open each image and "flip-horizontal" in an image editor and save your rtl image.
Don't forget, you need to set the image background to "transparent", otherwise you will see the lines with a colored background.
Or
-
Download the images from here (recommended) and replace the tree line images.
Note: The images may not be updated at design view, however, you can switch between design view and source view and back refreshes the pictures used in design view.
References
Middle East MSDN
TreeView Web Server Control
|
