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

Radtreeview Node Highlight issue

10 Answers 152 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
nacharya
Top achievements
Rank 1
nacharya asked on 18 Apr 2011, 08:07 AM

Hi All,

I am using Telerik Radtreeview, some of its node has checkbox enabled & image. Also i have used css to set the width of highligh to 100%. But the highlight & node width increses for the nodes which has checkbox & image than other nodes. Please let me know how we can keep width & highlight constant & within the Treeview Width.

Attaching image which shows actual issue also below is the code used.

This is very urgent issue for us so immediate response will be highly appreciated.

Thanks

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
    <style>
          
        .RadTreeView .rtIn {
            display:inline-block !important;
            white-space:normal !important; 
            width:100% !important;
             
        }
        .RadTreeView .rtTop 
        {
            white-space: nowrap !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        //Put your JavaScript code here.
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div>
        <telerik:RadTreeView ID="RadTreeView2" runat="server" Skin="Windows7" CheckBoxes="true">
              
        </telerik:RadTreeView>
  
          <telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Windows7" CheckBoxes="true">
            <Nodes>
            <telerik:RadTreeNode runat="server" Text="Parent" ImageUrl="Dependency.GIF">
            <Nodes>
            <telerik:RadTreeNode runat="server" Text="Child0"></telerik:RadTreeNode>
            </Nodes>
            </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
  
    </div>
    </form>
</body>
</html>
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
  
using System.Data;
using System.Configuration;
using System.Web.Security;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
  
public partial class Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            RadTreeNode node = new RadTreeNode("Parent");
            RadTreeView2.Nodes.Add(node);
            node.ExpandMode = TreeNodeExpandMode.ServerSide;
            node.ImageUrl = @"Dependency.GIF";
        }
      
         
  
        RadTreeView2.NodeExpand += new RadTreeViewEventHandler(RadTreeView2_NodeExpand);
    }
  
    void RadTreeView2_NodeExpand(object sender, RadTreeNodeEventArgs e)
    {
        RadTreeNode node = new RadTreeNode("Childe" + e.Node.Level);
        node.Checkable = false;
        e.Node.Nodes.Add(node);
        e.Node.Expanded = true;
    }
  
    protected override void OnInit(EventArgs e)
    {
        RadTreeView2.NodeTemplate = new LabelTemplate();
  
        base.OnInit(e);
    }
}
  
class LabelTemplate : ITemplate
{
    /// <summary>
    /// Instantiate In Container
    /// </summary>
    /// <param name="container"></param>
    public void InstantiateIn(Control container)
    {
        string textToBind = string.Empty;
        if (container is RadTreeNode)
        {
            textToBind = ((RadTreeNode)container).Text;
        }
        Label label1 = new Label();
        label1.Text = textToBind;
        container.Controls.Add(label1);
    }
}

10 Answers, 1 is accepted

Sort by
0
nacharya
Top achievements
Rank 1
answered on 18 Apr 2011, 07:23 PM
Hi All,

Do you need more information on this?
0
nacharya
Top achievements
Rank 1
answered on 20 Apr 2011, 09:31 PM
Hi,

Any updates on this?


Thanks

nacharya
0
Nikolay Tsenkov
Telerik team
answered on 21 Apr 2011, 01:22 PM
Hello nacharya,

This appearance requires a lot of non-trivial changes in the styles applied to RadTreeView.

But there is another control that seems to be even more suitable for this purpose - RadTreeList.
Here is a nice demo page that you can check: http://demos.telerik.com/aspnet-ajax/treelist/examples/columns/columntypes/defaultcs.aspx


Regards,
Nikolay Tsenkov
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
nacharya
Top achievements
Rank 1
answered on 22 Apr 2011, 04:21 PM
Thanks Nikolay,

I checked new control & looks great but problem here is we have already done development with the TreeView control & it is not possible to replace the control at this moment so if you could let us know the changes in the styles applied to RadTreeView it would really help.

Thanks
nacharya

0
nacharya
Top achievements
Rank 1
answered on 26 Apr 2011, 03:36 AM
Hi Nikolay,

Any updates on this.

Thanks
0
Kate
Telerik team
answered on 27 Apr 2011, 01:41 PM
Hi nacharya,

I tested the code that you have provided and it seems that the Parent aligns with the child node when I add the following css class to RadTreeView2. Please try to use it and let me know if this helps.
div.nocheckbox .rtUL .rtLI .rtUL
      {
          margin-right: -16px;
          
      }

<telerik:RadTreeView ID="RadTreeView2" runat="server" Skin="Windows7" CheckBoxes="true" CssClass="nocheckbox">
      </telerik:RadTreeView>

I also attached a sample page.

Greetings,
Kate
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
nacharya
Top achievements
Rank 1
answered on 29 Apr 2011, 07:21 AM
Hi Kate,

Thanks for your reply. Soln provided by you doesn;t seems to be useful as it does align higlight for checkbox nodes but we also have image for some nodes & some nodes might not have check boxes so it does not align for all nodes.

Actually when we add checkbox/image in tree node that node seems to be overflowing than the radtreeview limits. So we need way which will restrict overflowing of the node having checkbox/image within treeview width.


Thanks
nacharya.

0
nacharya
Top achievements
Rank 1
answered on 03 May 2011, 04:25 AM
Hi Kate,

Any updates on this?


Thanks
nacharya
0
Kate
Telerik team
answered on 03 May 2011, 08:43 AM
Hi nacharya,

Please try using the following css code:
div.RadTreeView .rtIn
{
    left: 40px;
    position: absolute;
    right: 0;
    top: 0;
}
div.RadTreeView .rtTop,
div.RadTreeView .rtMid,
div.RadTreeView .rtBot
{
    position: relative;
}


All the best,
Kate
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
SergZ
Top achievements
Rank 1
answered on 31 May 2012, 04:42 AM
Sorry for my English.

Introduced CSS does not properly display multi NodeTemplate.

<telerik:RadTreeView ID="trGroup" runat="server" DataFieldID="ID" DataFieldParentID="ID_PARENT" DataValueField="ID" OnNodeClick="trGroup_NodeClick">
   <NodeTemplate>
       <div class="NodeGroup">
           <span style="display: block">
                <%# DataBinder.Eval(Container, "DataItem.Name") %></span>
            <span style="font-size: 80%;  display: block">
                 <%# DataBinder.Eval(Container, "DataItem.Note") %></span>
        </div>
      </NodeTemplate>
</telerik:RadTreeView>

Оverlap.

Спасибо.

Tags
TreeView
Asked by
nacharya
Top achievements
Rank 1
Answers by
nacharya
Top achievements
Rank 1
Nikolay Tsenkov
Telerik team
Kate
Telerik team
SergZ
Top achievements
Rank 1
Share this question
or