Semantic Zoom of RadTileList with Kendo UI Effects

1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 06 Aug 2015 Link to this post


    Telerik Product and Version


    Supported Browsers and Platforms

    All browsers and platforms supported by Telerik UI for ASP.NET AJAX

    Components/Widgets used (JS frameworks, etc.)


    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.

Back to Top