Example of Zooming And Panning in ASP.NET MVC Diagram Control

Diagram
Interactive Features
Zooming And Panning

This sample illustrates how to zoom and pan in the diagram.

Maria AndersManaging DirectorAna TrujilloProject ManagerAnto MorenoProject LeadThomas HardySenior S/w EnggChristina kaffS/w EnggHanna MoosProject TraineePeter CiteauxS/w EnggMartín KlossProject TraineeElizabeth MaryProject TraineeVictoria AshSenior S/w EnggFrancisco YangSenior S/w EnggYang WangProject ManagerLino RodriProject ManagerJanine LabruneProject LeadHoward SnyderProject LeadPhilip CramerSenior S/w EnggElizabeth RoelS/w EnggPedro AfonsoProject TraineeNardo BatistaProject LeadGeorg PippsSenior S/w EnggLúcia CarvalhoSenior S/w EnggHorst KlossProject TraineeSergio roelCSRPaula WilsonCSRMauri MoroniSenior S/w EnggJanete LimeiraProject TraineeMichael HolzS/w EnggHoward SnyderProject ManagerAnn DevonProject ManagerRoland MendelProject LeadAria CruzSenior S/w EnggMaria LarssonProject TraineeDiego RoelProject TraineePeter FrankenProject TraineeMartine RancéS/w EnggHelen BennettProject LeadPaolo AccortiProject LeadEduardo RoelSenior S/w EnggJosé PedroSenior S/w EnggAndré FonsecaSenior S/w EnggHoward SnydS/w EnggManu PereiraProject TraineeMario PontesS/w EnggCarlos SchmittProject TraineeYoshi LatimerProject TraineePatricia KennaProject TraineeArt NancySenior S/w EnggDaniel ToniniProject ManagerAnnette RoelProject LeadYoshi WilsonSenior S/w EnggRene PhillipsS/w EnggYvonne WongProject TraineeYoshi KennaProject TraineeHelen MarieProject TraineeJoseph KaffProject TraineeJohn SteelProject LeadRenate JoseSenior S/w EnggRenate JoseSRCarlos NagySRFelipe KlossS/w EnggFran WilsonSRJohn RovelliS/w EnggCatherine KaffSRJean FresnièreProject TraineeAlex FeuerProject TraineeSimon RoelProject TraineeAlej CaminoProject ManagerJonas BergsenProject LeadMiguel AngelSenior S/w EnggJose PavarottiProject TraineeJytte PetersenSenior S/w EnggLiz NixonSenior S/w EnggPascal CartrainProject LeadKloss PerrierProject LeadLiu WongProject ManagerKarin JosephsProject LeadRuby AnabelaSenior S/w EnggPalle IbsenSenior S/w EnggPirkko KingSenior S/w EnggHelvetis NagyProject TraineeMary SaveleySRPaul HenriotSRRita MüllerSRPaula ParenteSenior S/w EnggKarl JablonskiS/w EnggMatti KennaProject TraineeZbyszek YangProject TraineeKarl JablonskiProject LeadMatti KennaSenior S/w EnggAnneCSRZbyszek YangCSRGeorg PippsSenior S/w EnggRene PhillipsProject TraineeLúcia CarvalhoProject TraineeHorst KlossProject Trainee

This example explains zooming, panning, reset, fit to page, bring into view, and bring to center.

The fitToPage method adjusts the zoom level of a diagram so that all its content is visible within the viewport.

The bringIntoView method brings the specified rectangular or bounds region into the diagram viewport.

The bringToCenter method brings the specified rectangular region of the diagram content to the center of the viewport. You can zoom in and out using the zoom method, and reset the zoom and scroller offsets to default values using the reset zoom method.

In this sample, use pan, reset, zoomIn, and ZoomOut options to pan, reset the zoom and zoomin/out the diagram.


Transform your ASP.NET MVC web apps today with Syncfusion® ASP.NET MVC components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab