Telerik Product and Version
|
2015.2.729
|
|
Supported Browsers and Platforms
|
All browsers and platforms supported by Telerik UI for ASP.NET AJAX
|
|
Components/Widgets used (JS frameworks, etc.)
|
|
PROJECT DESCRIPTION
This code library showcases how to perform a semantic zoom of RadTileList when clicking tiles by integrating Kendo UI Effects. The sample tries to mimic the Kendo UI Semantic Zoom demo with the RadTileList - Declarative DataSource demo.
Requirements of this example:
1) Download Kendo UI Core and load Kendo UI Effects specific scripts (kendo.core.min.js and kendo.fx.min.js).
2) Use a RadTileList with either square or wide tile shape.
3) Each tile proportion should be multiple by the RadTileList proportion which should match the zoomed tile dimensions.
4) Any custom CSS of tiles should be scaled to match the zoomed tile scale.
Steps to create the sample:
1) Handle the tile client-side click event where the actual zoom will be performed.
2) Calculate the scale and origin of the clicked tile against the tilelist through the kendo.effects.fitScale and kendo.effects.transformOrigin methods.
3) Clone the clicked tile and add a back button to it.
4) Zoom in the tilelist and cloned tile simultaneously with a particular scale through the kendo.fx.zoom method. Then replace the tilelist with the cloned tile through the kendo.fx.replace method.
5) Add a logic for zoom out when the back button is clicked (similar to the previous point 4).
You can find a fully runnable sample with this approach in the attachment.