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

Radtreeview Node Highlight issue

10 Answers 272 Views

TreeView

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

nacharya asked on 18 Apr 2011, 08:07 AM

Issue.jpg

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

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.

answered on 27 Apr 2011, 01:41 PM

TreeViewAlign.zip

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

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.

Спасибо.