OrgChart control - Customize styling

[David]

I am trying to customize the default presentation of the image of the standard image displayed in the various nodes.  I can see that it is defaulting to "full rounded" whereas I would like to use medium rounding.

Can someone point me to how I can accomplish this?  I have tried several things but everything tried, so far, is promptly ignored and the default rounded image is displayed.

I like the basic layout except for the rounded images.

Hopefully this makes sense to you folks.  Great product, sorry for the nitpicks.

[Ivaylo]

Hi David,

Thank you for the details provided.

To customize the styling of the OrgChart card using plain CSS, you may modify the border-radius property of the .k-card class. For instance, to remove the rounded corners, you can apply the following rule:

<style>
    .k-card {
        border-radius: 0;
    }
</style>

Furthermore, I prepared a sample REPL where the code could be tested. Please let me know if this is the desired result:

• https://netcorerepl.telerik.com/cTYAkclv00x8UCCz43 

I hope this information was helpful.

Regards,
Ivaylo
Progress Telerik

[David]

Your answer does not appear to directly apply to my needs.  You seem to be adjusting the roundness of the overall "card" whereas I am looking at addressing the image and only the image.   

It does appear that I might be able to achieve my needs by doing with the class ".k-avatar" vs ".k-card".  I was looking for something along the lines of the .Rounded(Rounded.Medium) attribute of other Kendo controls.  Does a chart exist that shows "Rounded.Medium = x, Rounded.Full = y, and so on"?

 

[Ivaylo]

Hi David,

Thank you for the details provided.

An alternative method for customizing the appearance of nodes within the OrgChart component is by utilizing a custom Template. To illustrate this functionality, I recommend reviewing the following resources:

• https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/diagrams-and-maps/orgchart/templates 
• https://demos.telerik.com/aspnet-core/orgchart/templates 

Please try this approach and let me know whether it aligns with your project needs or if further customization is required. I would be happy to assist you with implementation guidance or alternative solutions.

Regards,
Ivaylo
Progress Telerik