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

RadDropDownList in RadTreeView NodeTemplate

6 Answers 223 Views

TreeView

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

Lynne asked on 15 Jul 2014, 02:41 PM

ddl-in-radtreeview.png

I discovered that RadTreeView findControl only works in finding Telerik controls in a NodeTemplate, but does not work when trying to find an ASP control embedded in a NodeTemplate. This forced me to change my NodeTemplate column from <asp:dropdownlist> to <telerik:RadDropDownList>. I dynamically add values to the dropdownlist server side in NodeDataBound (see code below). This worked great with <asp:dropdownlist> but with <telerik:RadDropDownList> there are several issues: 1) values aren't displaying in the dropdownlist, 2) it appears there is a dropdown behind a dropdown, 3) dropdownlist width is incorrect. I've attached an image showing RadTreeView using <telerik:RadDropDownList> versus <asp:dropdownlist>. I want the solution using <telerik:RadDropDownList> to look exactly as it does using <asp:dropdownlist>. Assistance in resolving this issue would be appreciated. We are using Telerik Runtime Version v4.0.30319. Thanks.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormRadDDL.aspx.cs" Inherits="WebApplication2.WebFormRadDDL" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

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

<head runat="server">

<title></title>

<!--The style section below overrides Telerik skin to reduce the spacing between tree nodes.

Added background and border attributes to remove highlighting when selecting or mousing over a node.-->

<style type="text/css">

div.RadTreeView

{

line-height: 16px !important;

}

div.RadTreeView .rtSp

{

height: 14px !important;

}

div.RadTreeView .rtHover .rtIn, div.RadTreeView .rtSelected .rtIn

{

background: none !important;

border: none !important;

padding: 1px 2px 1px !important;

}

div.RadTreeView .rtIn

{

padding: 1px 2px 1px !important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadTreeView ID="RadTreeView1" runat="server"

AutoGenerateColumns="False" OnNodeDataBound="RadTreeView1_NodeDataBound" OnNodeCreated="RadTreeView1_NodeCreated"

DataFieldID="Node" DataFieldParentID="ParentNode" DataTextField="ParentNode" DataValueField="Description"

Skin="Web20">

<NodeTemplate>

<table cellspacing="10px">

<tr>

<td>

<asp:Label runat="server" ID="lbl" Text='<%# DataBinder.Eval(Container, "Value") %>'></asp:Label>

</td>

<td></td>

<td>

<telerik:RadDropDownList ID="ddl" runat="server" DropDownHeight="15px" DropDownWidth="20px" Font-Size="10px" Enabled="true"> </telerik:RadDropDownList>

</td>

</tr>

</table>

</NodeTemplate>

</telerik:RadTreeView>

</div>

</form>

</body>

</html>

protected void RadTreeView1_NodeDataBound(object sender, RadTreeNodeEventArgs e)

{

DataRowView item = e.Node.DataItem as DataRowView;

string bold = item["Bold"].ToString();

string validResponses = item["ValidResponses"].ToString();

string responseRequired = item["ResponseRequired"].ToString() ;

//RadTreeNode node = RadTreeView1.Nodes[0];

RadDropDownList ddl = (RadDropDownList)e.Node.FindControl("ddl");

Label lbl = (Label)e.Node.FindControl("lbl");

if (bold == "Y")

{

lbl.Font.Bold = true;

}

if (responseRequired == "N")

{

ddl.Visible = false;

}

else

{

Array responses = validResponses.Split('|');

ddl.Items.Add(new DropDownListItem("", ""));

foreach (string response in responses)

{

DropDownListItem ddlItem = new DropDownListItem(response, response);

ddl.Items.Add(ddlItem);

}

6 Answers, 1 is accepted

answered on 16 Jul 2014, 06:45 AM

Hi Lynne,

Please do the following modification in your code snippet which works fine at my end.

ASPX:

...

<td>

<telerik:RadDropDownList ID="ddl" runat="server" Font-Size="10px">

</telerik:RadDropDownList>

</td>

...

C#:

protected void RadTreeView1_NodeDataBound(object sender, RadTreeNodeEventArgs e)

{

DataRowView item = e.Node.DataItem as DataRowView;

string bold = item["Bold"].ToString();

string validResponses = item["ValidResponses"].ToString();

string responseRequired = item["ResponseRequired"].ToString();

RadTreeNode node = RadTreeView1.Nodes[0];

RadDropDownList ddl = (RadDropDownList)e.Node.FindControl("ddl");

Label lbl = (Label)e.Node.FindControl("lbl");

if (bold == "Y")

{

lbl.Font.Bold = true;

}

if (responseRequired == "N")

{

ddl.Visible = false;

}

else

{

Array responses = validResponses.Split('|');

ddl.Items.Add(new DropDownListItem("", ""));

foreach (string response in responses)

{

ddl.Items.Add(new DropDownListItem("1", "1"));

}

Thanks,
Shinu.

answered on 16 Jul 2014, 02:29 PM

radddl-width.png

Thanks for the reply Shinu. I removed the DropDownHeight and DropDownWidth attributes as you suggested, but the result is still not quite accurate. The width of the RadDropDownList is still too large (see attached image). I want it to look like the image in my original post. Is there something else I was supposed to change? Thanks.

answered on 21 Jul 2014, 10:23 PM

radddl-inactive.png

The suggested change works great in my small test solution, but when I try to implement same in my actual production solution, I still have issues. The RadDropDownList width is fine but the dropdown itself does not expand when I click the arrow so I cannot see the actual values. Also, the SelectedValue is cut off on the bottom. See latest attached image.

The production solution is large and contains a master page, RadTabStrip controls, RadMultiPage controls to name a few. I've played around with various attributes on the RadTreeView and the embedded RadDropDownList and have not had any luck. I realize you can't solve this for me if you can't recreate it, but I'm hoping you can take a look at the attached image and offer some suggestions as to where I might look to solve the issue. I do believe it is something with Telerik styles or script because the standard asp:dropdownlist works fine in the production solution. However, I'd like to be able to take advantage of the RadTreeView findControl to obtain access to RadDropDownList. Thanks.