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

[Solved] Issues with Templates and checkboxes

1 Answer 195 Views

TreeView

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

Nick asked on 06 Feb 2008, 01:01 AM

I have a template I'm applying to some of my nodes; its made up of a table control set to 100% width. Normaly this table is correctly sized based on the width of the tree view control, but when I enable checkboxes the table overflows the side of the control by the width of the checkboxes. I'm trying to figure out a way to prevent this. To illustrate the problem I've created the below example; if you run it as is, everything works fine, but if you change line 19 of Default.aspx from Checkboxes="false" to "true" you'll see that a portion of the table gets clipped. Any suggestions would be appreciated

Default.aspx

    
            <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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">  
        
            <head runat="server">  
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <div> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                </telerik:RadScriptManager> 
        
                    <telerik:RadSplitter ID="TestContainer" runat="server" Width="300px" Height="300px" Orientation="Vertical" LiveResize="true" ResizeMode="AdjacentPane">  
        
                        <telerik:RadPane runat="server" Width="100%" Height="100%" Scrolling="Y">  
        
                            <telerik:RadTreeView ID="RadTreeView1" runat="server" CheckBoxes="false">  
        
                            </telerik:RadTreeView> 
        
                        </telerik:RadPane> 
        
                        <telerik:RadSplitBar runat="server" EnableResize="true" /> 
        
                        <telerik:RadPane Width="100px" Height="100%" runat="server"><--icons should remain aligned right on resize</telerik:RadPane> 
        
                    </telerik:RadSplitter> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Default.aspx.cs

    
            using System;  
        
            using System.Configuration;  
        
            using System.Data;  
        
            using System.Linq;  
        
            using System.Web;  
        
            using System.Web.Security;  
        
            using System.Web.UI;  
        
            using System.Web.UI.HtmlControls;  
        
            using System.Web.UI.WebControls;  
        
            using System.Web.UI.WebControls.WebParts;  
        
            using System.Xml.Linq;  
        
            using Telerik.Web.UI;  
        
            public partial class _Default : System.Web.UI.Page  
        
            {  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                    String[] NodeNames = new String[] { "Root Node 1", "Root Node 2", "Root Node 3" };  
        
                    foreach (String name in NodeNames)  
        
                    {  
        
                        RadTreeNode node = new RadTreeNode(name);  
        
                        //node.ImageUrl = "Placeholder.png";  
        
                        node.NodeTemplate = new TreeNodeTemplate(false);  
        
                        RadTreeNode child1 = new RadTreeNode("child1");  
        
                        //child1.ImageUrl = "Placeholder.png";  
        
                        child1.NodeTemplate = new TreeNodeTemplate(true);  
        
                        RadTreeNode child2 = new RadTreeNode("child2");  
        
                        //child2.ImageUrl = "Placeholder.png";  
        
                        child2.NodeTemplate = new TreeNodeTemplate(true);  
        
                        RadTreeNode child3 = new RadTreeNode("child3");  
        
                        //child3.ImageUrl = "Placeholder.png";  
        
                        child3.NodeTemplate = new TreeNodeTemplate(false);  
        
                        node.Nodes.Add(child1);  
        
                        node.Nodes.Add(child2);  
        
                        node.Nodes.Add(child3);  
        
                        node.Expanded = true;  
        
                        RadTreeView1.Nodes.Add(node);  
        
                    }  
        
                    RadTreeView1.DataBind();  
        
                }  
        
                class TreeNodeTemplate : ITemplate  
        
                {  
        
                    public bool ShowIcon { get; set; }  
        
                    public TreeNodeTemplate(bool showIcon)  
        
                    {  
        
                        this.ShowIcon = showIcon;  
        
                    }  
        
                    public void InstantiateIn(Control container)  
        
                    {  
        
                        Table tblTreeNode = new Table();  
        
                        tblTreeNode.Width = Unit.Percentage(100);  
        
                        tblTreeNode.Height = Unit.Percentage(100);  
        
                        tblTreeNode.CellSpacing = 0;  
        
                        tblTreeNode.CellPadding = 0;  
        
                        tblTreeNode.CssClass = "TreeNode";  
        
                        TableRow tblTreeNode_Row1 = new TableRow();  
        
                        TableCell tblTreeNode_TextCell = new TableCell();  
        
                        Label nodeText = new Label();  
        
                        nodeText.ID = "NodeText";  
        
                        nodeText.DataBinding += new EventHandler(nodeText_DataBinding);  
        
                        tblTreeNode_TextCell.Controls.Add(nodeText);  
        
                        tblTreeNode_Row1.Controls.Add(tblTreeNode_TextCell);  
        
                        TableCell tblTreeNode_IconCell = new TableCell();  
        
                        tblTreeNode_IconCell.Width = Unit.Pixel(16);  
        
                        if (this.ShowIcon)  
        
                        {  
        
                            Image imgIcon = new Image();  
        
                            imgIcon.ID = "NodeImage";  
        
                            imgIcon.ImageUrl = "Placeholder.png";  
        
                            imgIcon.AlternateText = "Icon";  
        
                            tblTreeNode_IconCell.Controls.Add(imgIcon);  
        
                        }  
        
                        tblTreeNode_Row1.Controls.Add(tblTreeNode_IconCell);  
        
                        tblTreeNode.Controls.Add(tblTreeNode_Row1);  
        
                        container.Controls.Add(tblTreeNode);  
        
                    }  
        
                    private void nodeText_DataBinding(object sender, EventArgs e)  
        
                    {  
        
                        Label target = (Label)sender;  
        
                        RadTreeNode node = (RadTreeNode)target.BindingContainer;  
        
                        string nodeText = (string)DataBinder.Eval(node, "Text");  
        
                        target.Text = nodeText;  
        
                    }  
        
                }  
        
            }

1 Answer, 1 is accepted

answered on 06 Feb 2008, 01:07 PM

Hi Nick,

The checkbox occupies a few pixels from the node total width. As a result the table (whose width is 100%) moves to the right. You can apply some right margin to compensate for the width of the checkbox. To do so add the following CSS rule in your page:

    
                <style type="text/css"> 
        
                    .rtTemplate 
        
                    { 
        
                        margin-right: 18px; 
        
                    } 
        
                </style>

All the best,
Albert
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center