Dock Size (to render graph)

[Mark Davison]

Hi,

We are using the "Docking" functionality to create a customisable "dashboard" for our users. We need to have the ability to render a graph inside a dockable object. We have this working fine now but we need to be able to determine the width of the dockable object so we can create a graph which fits the dockable object. Can we get the height and width of the dockable object via javascript?

Also, as an additional question, is it possible to change a dockable objects height using javascript i.e. when the user clicks a button on the page, we set a dockable objects height to be double it's current size?

Regards,

Mark

[Petya]

Hello Mark Davison,

Here is some code how you can achieve this:

<telerik:raddock id="Raddock1" width="200px" height="99px" runat="server" text="dock1">
<input type="button" id="button1" value="click" onclick="getSize()" />

<script type="text/javascript">
            function getSize()
            {
                var dock = $find('<%= Raddock1.ClientID%>');
                alert(dock.get_Width());
                alert(dock.get_Height());
                dock.get_element().style.height = 200;
                dock._setContentContainerHeight();
                dock.get_element().style.width = 50;
            }
</script>

Let me know if you have other questions.

Greetings,
Petya
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Mark Davison]

Hi,

Thanks for the reply, one further question!

If I use 

var currheight=dock.get_Height();
dock.get_element().style.height = parseFloat(currheight)+200 + 'px';
dock._setContentContainerHeight();

Then I would expect the height to keep increasing by 200px but it does not. 

currheight is always reported as being the original size. Is there any way I can call this so that the dock keeps getting bigger?

Regards,

Mark

[Mark Davison]

Hi,

I have modified your code slightly! This seems to do exactly what I want. Thanks for your help.

var cid = sender.get_RadDock().get_id();
var dock=$find(cid);
var currheight=dock.get_element().style.height; //dock.get_Height();
var minheight=200;
dock.get_element().style.height = parseFloat(currheight)+parseFloat(minheight) + 'px';
dock._setContentContainerHeight();

Regards,

Mark