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

[Cristian Malinescu]

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

[Yana]

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.

[Cristian Malinescu]

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

[Cristian Malinescu]

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

[Yana]

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.

[Cristian Malinescu]

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

[Yana]

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.

[Peppi Vecchio]

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

[Kate]

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

[Peppi Vecchio]

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

[Kate]

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

[Peppi Vecchio]

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

[Kate]

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