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

RadDropDownList in RadTreeView NodeTemplate

6 Answers 29 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Lynne
Top achievements
Rank 1
Lynne asked on 15 Jul 2014, 02:41 PM
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" %>
<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

Sort by
0
Shinu
Top achievements
Rank 1
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.
0
Lynne
Top achievements
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 1
answered on 17 Jul 2014, 03:05 AM
Hi Lynne,

Please try the below CSS to achieve your scenario.

CSS:
.RadDropDownList_Default
{
    width: 60px !important;
}
.rddlPopup_Default
{
    width: 60px !important;
}

Thanks,
Shinu.
0
Bozhidar
Telerik team
answered on 17 Jul 2014, 08:30 AM
Hi,

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
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.
0
Lynne
Top achievements
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.
Tags
TreeView
Asked by
Lynne
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Lynne
Top achievements
Rank 1
Bozhidar
Telerik team
Share this question
or