How to change the node size of org chart?

[yuki]

I read this , but when I copied the code into my own project and followed the documentation, this just didn't work. The node size and the group size are weird.  No matter how I tried to edit the css settings, the height of the node just wouldn't change. Can anybody help me?

And btw I also want to ask, what do  .rocItem and .rocItemContent mean? When I use my browser's inspect function, I also see a .rocItemTemplate, what is that?

[Doncho]

Hi Yuki,

I am attaching a sample project where the code snippets from the article are used in two separate aspx pages. On my end, the result is the same as the one demonstrated in the screenshots in the article.

One difference I noticed is that the OrgChart in the code snippets has its RenderMode to Lightweight but the images in the same article are illustrating the Control in Classic render mode. I will update the content so that the images are precisely corresponding to the snippets below.

To be able to run the sample project, you will need to add Telerik.Web.UI.dll to the bin folder.

As to .rocItem, .rocItemContent, and .rocItemTemplate: these are class names assigned to elements rendered in the Html representation of the RadOrgChart control (.roc stands for RadOrgChart). The same class names are used internally by the JavaScript logic handling the default behavior of the control. You can also leverage those class names to customize the appearance with some custom CSS on the page.

Note that the exact rendering and the class names used might differ depending on the RenderMode set to the Control.

Kind regards,
Doncho
Progress Telerik

[yuki]

Hello, Doncho, Thanks for your answer. I'll try.