Template Support

6 Apr 20171 minute to read

image-template-id property is used to customize the image of Tile with template feature by setting the id.

Refer to the following code examples.

Add the following code example for MVC samples

CSS

<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>

CSHTML

<ej-tile id="tile" image-template-id="imageTemplate" image-position="@TileImagePosition.Fill" tile-size="@TileSize.Wide">
    <e-tile-caption  enabled="true" text="Windows Store" />
</ej-tile>

<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>