New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial
Centering Items in RadDiagram
Environment
Product | RadDiagram for ASP.NET AJAX |
Version | all |
Description
Centering items horizontally within the RadDiagram control is a common requirement. This task can be achieved by utilizing the bringIntoView()
method of the underlying diagram widget.
This KB article also answers the following questions:
- How to ensure all RadDiagram shapes are visible in the viewport?
- How to automatically adjust the zoom to fit all shapes in RadDiagram?
- How to use the
bringIntoView()
method with RadDiagram in ASP.NET AJAX?
Solution
To center all or specific shapes within the RadDiagram's viewport, utilize the bringIntoView()
method. This method can zoom out the diagram as needed to ensure all specified shapes fit within its viewport.
Here's how you can implement this on the client-side OnLoad
event of the RadDiagram:
- Define the RadDiagram in your ASP.NET AJAX page with a client-side
OnLoad
event handler:
asp
<telerik:RadDiagram ID="RadDiagram1" runat="server">
<ClientEvents OnLoad="onLoad" />
...
</telerik:RadDiagram>
- Implement the
onLoad
function in JavaScript to use thebringIntoView()
method. Pass all diagram shapes to this method to ensure they are centered and visible in the diagram's viewport:
javascript
function onLoad(diagram, args) {
var diagramWidget = diagram.get_kendoWidget();
diagramWidget.bringIntoView(diagramWidget.shapes);
}
By passing the diagram's shapes to the bringIntoView()
method, the RadDiagram will adjust its zoom level as needed to fit all shapes within the viewport, effectively centering them.