RadComboBox+RadTreeView item; server side - the combobox doesn't resize when tree expands

13 posts, 0 answers
  1. Cristian Malinescu
    Cristian Malinescu avatar
    13 posts
    Member since:
    May 2010

    Posted 05 May 2010 Link to this post

    This is a follow up for

    http://www.telerik.com/community/forums/aspnet-ajax/combobox/radcombobox-radtreeview-serverside.aspx

    After applying the suggested workaround, I found that the combobox doesn't resize when tree nodes are expanded.
    Instead, H/V scrolls are shown. Does someone know how to get rid of these scrolls and have the combo resizing when a
    treenode expands?

    Thanks,
    Cris
  2. Yana
    Admin
    Yana avatar
    5024 posts

    Posted 11 May 2010 Link to this post

    Hi Cris,

    I suggest you use OnClientNodeExpanded and OnClientNodeCollapsed events of the treeview and calculate the height of the dropdown in their handlers like this:

    <telerik:RadComboBox ID="RadComboBox1" runat="server">
            <ItemTemplate>
                <telerik:RadTreeView ID="RadTreeView1" runat="server" OnClientNodeExpanded="nodeChanged" OnClientNodeCollapsed="nodeChanged">
                    <Nodes>
                        <telerik:RadTreeNode Text="root node1">
                            <Nodes>
                                <telerik:RadTreeNode Text="node1" />
                                <telerik:RadTreeNode Text="node2" />
                            </Nodes>
                        </telerik:RadTreeNode>
                         <telerik:RadTreeNode Text="root node2">
                            <Nodes>
                                <telerik:RadTreeNode Text="node1" />
                                <telerik:RadTreeNode Text="node2" />
                            </Nodes>
                        </telerik:RadTreeNode>
                         <telerik:RadTreeNode Text="root node3">
                            <Nodes>
                                <telerik:RadTreeNode Text="node1" />
                                <telerik:RadTreeNode Text="node2" />
                            </Nodes>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeView>
            </ItemTemplate>
            <Items>
                <telerik:RadComboBoxItem Text="" />
            </Items>
        </telerik:RadComboBox>

    <script type="text/javascript">
     
        function nodeChanged(sender, args) {
            var combo = $find("<%=RadComboBox1.ClientID %>");
            setTimeout(function() {
                combo._childListElementWrapper.style.height = (sender.get_element().clientHeight + 8) + "px";
            }, 100);
        }
       
    </script>

    you should also add the following css style in order to remove the scrollbar:

    <style type="text/css">
        .RadComboBoxDropDown .rcbScroll {
            overflow: hidden !important;
        }
    </style>

    Best regards,
    Yana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. Cristian Malinescu
    Cristian Malinescu avatar
    13 posts
    Member since:
    May 2010

    Posted 11 May 2010 Link to this post

    Hi Yana and thank you; however, I tried to apply your code and I get a null pointer exception - as can be seen in the attached screenshots archive; can you follow up with a suggestion how to get over it?

    Cheers,
    Cris
  4. Cristian Malinescu
    Cristian Malinescu avatar
    13 posts
    Member since:
    May 2010

    Posted 11 May 2010 Link to this post

    Ok,

    I removed the telerik radscript code block and I tried to use jquery to get a ref to the combobox object;
    I used the hardcoded dyna-gen name of the div container - as can be seen here

    function _Fields_TreeView_Resize(sender, args) {  
      var combo = $("#_Fields_ComboBox__i0__Fields_TreeView_");  
      setTimeout(function() {  
                   combo._childListElementWrapper.style.height =   
                     (sender.get_element().clientHeight + 8) + "px";  
                 }, 100);      
    }            

    Got the ref but a javascript error occurs
    combo._childListElementWrapper is undefined  
     

    Suggestions - if any? Thank you,
    Cris
  5. Yana
    Admin
    Yana avatar
    5024 posts

    Posted 12 May 2010 Link to this post

    Hello Cristian,

    You should use $find method in order to get the client-side object of the combobox. I can see in the first image that the ID of the combobox is  "_Fields_ComboBox_", but in your javascript function you're using the id of the treview instead, please try it like this:

    combo = $find("<%="_Fields_ComboBox_.ClientID%>");


    Best wishes,
    Yana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  6. Cristian Malinescu
    Cristian Malinescu avatar
    13 posts
    Member since:
    May 2010

    Posted 12 May 2010 Link to this post

    Thank you Yana,
    I did the change and now I get this error

    [HttpException (0x80004005): The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).]  
       System.Web.UI.ControlCollection.Add(Control child) +8678903  
       Telerik.Web.SkinRegistrar.RegisterCssReference(Page _page, Control _control, String _url) +326  
     
    [HttpException (0x80004005): Please, see whether wrapping the code block, generating the exception, within RadCodeBlock resolves the error.]  
       Telerik.Web.SkinRegistrar.RegisterCssReference(Page _page, Control _control, String _url) +374  
       Telerik.Web.SkinRegistrar.RegisterCssReferences(ISkinnableControl _control) +768  
       Telerik.Web.UI.RadWebControl.RegisterCssReferences() +51  
       Telerik.Web.UI.RadWebControl.ControlPreRender() +46  
       Telerik.Web.UI.RadFormDecorator.ControlPreRender() +384  
       Telerik.Web.UI.RadWebControl.OnPreRender(EventArgs e) +22  
       System.Web.UI.Control.PreRenderRecursiveInternal() +80  
       System.Web.UI.Control.PreRenderRecursiveInternal() +171  
       System.Web.UI.Control.PreRenderRecursiveInternal() +171  
       System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +842  
     
    some idea what can cause this?

    Thanks,
    Cris




  7. Yana
    Admin
    Yana avatar
    5024 posts

    Posted 13 May 2010 Link to this post

    Hi Cristian,

    This error is explained in the following help article. Basically, you should place your javascript code inside RadScriptBlock in order to avoid the error.

    Kind regards,
    Yana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  8. Peppi Vecchio
    Peppi Vecchio avatar
    10 posts
    Member since:
    Mar 2010

    Posted 22 Apr 2011 Link to this post

    I'm using the code provided by Yana and it seems to work fairly well. My only issue is that sometimes when the tree view is open pretty deep, the combobox does not open up enough to view all the children.

    Is there a way to open the size based on children count? Or some other way to ensure that the box is big enough to accommodate all open nodes in the tree?

    Thank you,

    JV
  9. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 27 Apr 2011 Link to this post

    Hi Peppi ,

    I would suggest that you take a look at our online demo - TreeView in ComboBox, since scrollbars appear whenever the TreeView is expanded and the nodes do not fit in it, I believe this approach would solve your issue.

    Greetings,
    Kate
    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.

  10. Peppi Vecchio
    Peppi Vecchio avatar
    10 posts
    Member since:
    Mar 2010

    Posted 27 Apr 2011 Link to this post

    Thank you for the reply.

    We have the need to move away from the scrollbars. I'm thinking my next best approach would be to make sure we collapse any open branches that are not in the immediate concern. Then maybe I can find a way to count all open children and see if we can get closer to our need that way.

    Any other suggestions would be very welcome.

    Peppi
  11. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 02 May 2011 Link to this post

    Hello Peppi Vecchio,

    Please try to apply the following code and let me know if it works for you:
    .rcbScroll
      {
          height: auto !important
      }

    Regards,
    Kate
    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.

  12. Peppi Vecchio
    Peppi Vecchio avatar
    10 posts
    Member since:
    Mar 2010

    Posted 02 May 2011 Link to this post

    Hi Kate.

    Seems that this style keeps the combo box from opening and viewing the tree. I'll look to see if I have some competing style that's causing the issue. But at first glance, it doesn't solve the problem.

    Thanks
  13. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 06 May 2011 Link to this post

    Hello Peppi Vecchio,

    Since it is not a trivial scenario can you please open a support ticket and send us a running sample project demonstrating the issue as well as explanation of what you need to achieve, so we can help you out?

    All the best,
    Kate
    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.

Back to Top