Template Support

8 Aug 20171 minute to read

ImageTemplateId property is used to customize the image of Tile with template feature by setting the id. CaptionTemplateId property is used to customize the text 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

@Html.EJ().Tile("tile").ImageTemplateId("imageTemplate").ImagePosition(TileImagePosition.Fill).TileSize(TileSize.Wide).Caption(caption => { caption.Enabled(true); caption.Text("Windows Store"); })

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