[Solved] custom property url for hubtiles

[Manuel Henry II]

Can you add a custom property to the hubtiles like adding a url property. what im trying to achieve is whenever I have a collection of images, these images should have a url and when the tile is invoke it will navigate to the specific url.

<div id="bwTileMain" class="liveTiles" style="width: 450px; height: 269px; left: 30px; top: 0px; border: none; float: left" data-win-control="Telerik.UI.RadPictureRotatorHubTile" data-win-options="{title:'Promotions',url:'www.yahoo.com',updateInterval:5,picturesSource:SampleWindows8.picturesSourceBwMain}">
</div>

I have read your sample on the help document but the problem is your getting it by the id.

var hubTileCtrl = new Telerik.UI.RadHubTile(document.getElementById("hubTile"), {
    imageSource: "/images/controls/Hubtile.png",
    title: "RadHubTile",
    ontileinvoked: function (e) {
        WinJS.Navigation.navigate("/pages/examples/" + e.target.element.id + "/" + e.target.element.id + ".html");
    }
});

[Tsvetina]

Hi Manuel,

The images in a picture rotator hubtile are not represented by different objects, so they cannot be assigned an url each. If you want to do navigation based on the current image displayed, you could handle the tileinvoked event and access the src attribute of the currently displayed image. Then, based on its value, build a navigate string. For example:

var pictureRotatorHubTileCtrl = new Telerik.UI.RadPictureRotatorHubTile(document.getElementById("pictureRotatorHubTile"), {
    picturesSource: DefaultData.foodImagePaths,
    updateInterval: 2
});
pictureRotatorHubTileCtrl.addEventListener("tileinvoked", EventHandlers.navigateAway);

WinJS.Namespace.define("EventHandlers", {
    navigateAway: function (e) {
        var hubTile = e.target.element;
        var imagesHost = hubTile.getElementsByTagName("ul")[0];
        //the string below will contain the image file name
        //it looks like this: "ms-appx://28b990f5-f10f-4e47-9f22-099eec47662f/images/promotreats.png"
        var currentImageSrc = imagesHost.getElementsByTagName("img")[0].src;
        //here you can do an indexOf check for the file name contained in the string
        //and navigate based on it
    }
});

Let us know should you need further assistance with this.

Additionally, in case you want to actually navigate to a web page, have the information posted here in mind:
WinJS open browser programmatically

Regards,
Tsvetina
the Telerik team