Dynamic resize on client-side

[Dmitry]

Hello,
I have a template column which contains combobox with treeview inside, as described here. But, as it's all in grid TemplateColumn, I don't want those trees to load their content on initial page load, because this will make page too heavy. So I populate it from web service when user opens a dropdown box. Here is my javascript code:

var refCbTree;
var refCb;
function ReferenceComboBoxOpeningHandler(sender, args) {
    refCb = sender;
    refCbTree = $find(sender.get_attributes().getAttribute("treeID"));
    service.LoadReferenceRoot(sender.get_attributes().getAttribute("refID"), onRequestNodesSuccess);  
}
 
function onRequestNodesSuccess(result) {
    if (!refCbTree) return;
    refCb.trackChanges();
    refCbTree.trackChanges();
    for (i = 0; i < result.length; i++) {
        var node = new Telerik.Web.UI.RadTreeNode();
        node.set_text(result[i].Text);
        node.set_value(result[i].Value);
        refCbTree.get_nodes().add(node);
    }
    refCbTree.commitChanges();
    refCb.commitChanges();

}

So when service returns nodes, all nodes seem to be populated in tree, but tree won't resize and so with combobox. Attached is screenshot of what I see.
Is that possible to resize both controls to reveal their contents after loading nodes?
Thank you.

[Dimitar Terziev]

Hi Dmitry,

In order to make the RadComboBox resize dynamically please try the following CSS:

<style type="text/css">
    .rcbSlide
    {
        width: auto !important;
    }
    .RadComboBoxDropDown
    {
        width: auto !important;
    }
    .RadComboBoxDropDown .rcbWidth
    {

        height: 100% !important;
    }

    .RadTreeView .RadTreeView_Default
    {
        height: 100% !important;
    }

    .RadComboBoxDropDown .RadComboBoxDropDown_Default
    {
        height: 100% !important;
    }

</style>

I hope this would help.

Kind regards,
Dimitar Terziev
the Telerik team

[Dmitry]

Hello,
Thank you so much! Works fine.
The only thing remained is to make it scrollable when treeview inside is too high and would not fit the browser window. Is that possible?

BTW  do something with your forum, I can't post messages from Google Chrome browser (14.0.835.29 dev-m), have to switch to Firefox to reply. Thanks.

[Dimitar Terziev]

Hi Dmitry,

In case you want to limit the height of the treeview so when it exceeds the visible part of the screen a scroll bar to appear, you should subscribe on the client-side OnClientDropDownOpening event of the RadComboBox and use the following implementation of the event handler function:

function OnClientDropDownOpening(sender, args) {

           var treeview = sender.get_items().getItem(0).findControl("RadTreeView1");

           treeview.get_element().style.height = ($telerik.$(window).height() - 60)+"px";

       }

I hope this would help.
 
All the best,
Dimitar Terziev
the Telerik team