Get OrgChart to use 100% of the screen width

[Alfred]

Hi,

We're using the org chart component and the data binding works great and we love the template capabilty. But the org only uses a portion of the width of the display and as we have a large organization it would be better if it could use the full amount. I tried this:

.HtmlAttributes(new {style="width:100%"})

but it didn't seem to change anything. What am I missing on this? Thanks!

[Ivan Danchev]

Hi Alfred,

The OrgChart by default has width:100% set to its wrapping element. You can inspect it here: https://netcorerepl.telerik.com/czYmbXvh17t3BN0112

You can further verify this by reducing or increasing the size of the right pane in the example I linked. The OrgChart div element highlighted above will resize accordingly with the size of the pane (or the respective container the component is nested in an application different the REPL sandbox I used for demo). 

As for the nodes themselves, they have a default width of 300px and do not resize based on the screen size, because their position has to be precisely calculated internally, to ensure the connecting lines match and child nodes are rendered properly under their parents (a parent can have a different number of child nodes).

Regards,
Ivan Danchev
Progress Telerik