Dynamic resize on client-side

4 posts, 0 answers
  1. Dmitry
    Dmitry avatar
    121 posts
    Member since:
    Jul 2010

    Posted 05 Aug 2011 Link to this post

    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.
  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1268 posts

    Posted 08 Aug 2011 Link to this post

    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

    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.

  3. Dmitry
    Dmitry avatar
    121 posts
    Member since:
    Jul 2010

    Posted 09 Aug 2011 Link to this post

    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.
  4. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1268 posts

    Posted 12 Aug 2011 Link to this post

    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

    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