Template support with Tile Component
To customize the Tile images with template feature by using imageTemplateId property of Tile component. Add the below mentioned code to the corresponding view page.
<div class="e-tile-group" id="groupTile">
<div class="e-tile-column">
<div id="tile1" ej-tile e-tilesize="wide" e-text="Windows Store" e-imagetemplateid="imageTemplate" e-imageposition="fill">
</div>
</div>
<div id="imageTemplate">
<div id="appimage">
</div>
<div class="tileMargin">
<span class="caption">Google Search</span><br />
<span class="description">The world’s information</span><br />
<span class="sub">Free</span>
</div>
</div>
</div>
Add the following styles to customize the tile images with template support.
<style>
#appimage {
background-image: url("http://js.syncfusion.com/UG/mobile/content/google.png");
background-position: center center;
background-repeat: no-repeat;
background-size: 50% auto;
display: table-cell;
width: 45%;
}
.tileMargin {
display: table-cell;
padding-top: 25px;
}
.e-tile-template {
display: table;
height: 100%;
width: 100%;
}
</style>
Run the above code to get the following output.
Was this page helpful?
Yes
No
Thank you for your feedback!
Thank you for your feedback and comments. We will rectify this as soon as possible!
An unknown error has occurred. Please try again.
Help us improve this page