RadDropDownList in RadTreeView NodeTemplate

7 posts, 0 answers
  1. Lynne
    Lynne avatar
    25 posts
    Member since:
    Oct 2010

    Posted 15 Jul 2014 Link to this post

    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);
                    }
                }
            }
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 Jul 2014 in reply to Lynne Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lynne
    Lynne avatar
    25 posts
    Member since:
    Oct 2010

    Posted 16 Jul 2014 in reply to Shinu Link to this post

    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.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 Jul 2014 in reply to Lynne Link to this post

    Hi Lynne,

    Please try the below CSS to achieve your scenario.

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

    Thanks,
    Shinu.
  6. Bozhidar
    Admin
    Bozhidar avatar
    1102 posts

    Posted 17 Jul 2014 Link to this post

    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.

     
  7. Lynne
    Lynne avatar
    25 posts
    Member since:
    Oct 2010

    Posted 21 Jul 2014 in reply to Bozhidar Link to this post

    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.
  8. Lynne
    Lynne avatar
    25 posts
    Member since:
    Oct 2010

    Posted 22 Jul 2014 in reply to Lynne Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017