New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Add draggable scrollbars in RadDiagram


How can I implement scrollbars in the RadDiagram for ASP.NET AJAX?


The following example demonstrates how to use a scrollbar as a Diagram element.

<div style="overflow: auto; width: 1000px; height: 300px;">
    <telerik:RadDiagram ID="RadDiagram1" runat="server" Editable="false" Pannable="false" ZoomRate="0">
        <ClientEvents OnLoad="onDataBound" />
            <telerik:DiagramShape Id="s1" X="700" Y="100"></telerik:DiagramShape>
            <telerik:DiagramShape Id="s2" X="200" Y="300"></telerik:DiagramShape>
            <telerik:DiagramShape Id="s3" X="700" Y="300"></telerik:DiagramShape>
            <telerik:DiagramShape Id="s4" X="1200" Y="300"></telerik:DiagramShape>
                <FromSettings ShapeId="s1" />
                <ToSettings ShapeId="s2" />
                <FromSettings ShapeId="s1" />
                <ToSettings ShapeId="s3" />
                <FromSettings ShapeId="s1" />
                <ToSettings ShapeId="s4" />
    function onDataBound(diagram, args) {
        var kendoDiagram = diagram.get_kendoWidget();
        var bbox = kendoDiagram.boundingBox();

        kendoDiagram.wrapper.width(bbox.width + bbox.x + 50);
        kendoDiagram.wrapper.height(bbox.height + bbox.y + 50);

See Also

Use Scrollbars in the Kendo UI Diagram widget

In this article