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><!--Commenting out style stuff does not improve issues with RadDropDownList--><!--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> <!-- don't make cellspacing too big or it messes with ddl activation--> <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
0
Shinu
Top achievements
Rank 2
Rank 2
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:
C#:
Thanks,
Shinu.
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.
0
Lynne
Top achievements
Rank 1
Rank 1
answered on 16 Jul 2014, 02:29 PM
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.
0
Shinu
Top achievements
Rank 2
Rank 2
answered on 17 Jul 2014, 03:05 AM
Hi Lynne,
Please try the below CSS to achieve your scenario.
CSS:
Thanks,
Shinu.
Please try the below CSS to achieve your scenario.
CSS:
.RadDropDownList_Default{ width: 60px !important;}.rddlPopup_Default{ width: 60px !important;}Thanks,
Shinu.
0
Hi,
We recommend using the public properties, like so:
Regards,
Bozhidar
Telerik
We recommend using the public properties, like so:
<telerik:RadDropDownList runat="server" ID="RadDropDownList1" Width="50px" DropDownWidth="50px">Regards,
Bozhidar
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Lynne
Top achievements
Rank 1
Rank 1
answered on 21 Jul 2014, 10:23 PM
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.
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.
0
Lynne
Top achievements
Rank 1
Rank 1
answered on 22 Jul 2014, 03:11 PM
I found this post http://www.telerik.com/forums/raddropdownlist-not-expanding-in-internet-explorer-10-and-below which describes the problem exactly. The solution which is to change the page doctype resolves the issue with RadDropDownList but causes other formatting issues. I'll stick with asp:dropdownlist for the time being. Thanks.