Radtreeview Node Highlight issue

11 posts, 0 answers
  1. nacharya
    nacharya avatar
    18 posts
    Member since:
    Aug 2010

    Posted 18 Apr 2011 Link to this post

    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);
        }
    }
  2. nacharya
    nacharya avatar
    18 posts
    Member since:
    Aug 2010

    Posted 18 Apr 2011 Link to this post

    Hi All,

    Do you need more information on this?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. nacharya
    nacharya avatar
    18 posts
    Member since:
    Aug 2010

    Posted 20 Apr 2011 Link to this post

    Hi,

    Any updates on this?


    Thanks

    nacharya
  5. Nikolay Tsenkov
    Admin
    Nikolay Tsenkov avatar
    734 posts

    Posted 21 Apr 2011 Link to this post

    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.

  6. nacharya
    nacharya avatar
    18 posts
    Member since:
    Aug 2010

    Posted 22 Apr 2011 Link to this post

    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

  7. nacharya
    nacharya avatar
    18 posts
    Member since:
    Aug 2010

    Posted 25 Apr 2011 Link to this post

    Hi Nikolay,

    Any updates on this.

    Thanks
  8. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 27 Apr 2011 Link to this post

    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.

  9. nacharya
    nacharya avatar
    18 posts
    Member since:
    Aug 2010

    Posted 29 Apr 2011 Link to this post

    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.

  10. nacharya
    nacharya avatar
    18 posts
    Member since:
    Aug 2010

    Posted 02 May 2011 Link to this post

    Hi Kate,

    Any updates on this?


    Thanks
    nacharya
  11. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 03 May 2011 Link to this post

    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.

  12. SergZ
    SergZ avatar
    4 posts
    Member since:
    Jun 2006

    Posted 30 May 2012 Link to this post

    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.

    Спасибо.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017