Template support

20 Feb 2017 / 2 minutes to read

The data-ej-imagetemplateid attribute is used to customize the image of a Tile by providing the specific template id respectively.

Refer to the following code example.

html

<div id="header" data-role="ejmnavigationbar" data-ej-mode="header" data-ej-title="Tile" data-ej-titlealignment="center" data-ej-position="top" data-ej-touchend="tileSelection">
    </div>
    <div class="tiles" style="top: 45px; position: relative;">
        <div id="tileview1" data-role="ejmtile" data-ej-backgroundcolor="#3086e5" data-ej-tilesize="wide" data-ej-caption-text="Windows Store" data-ej-imagetemplateid="imageTemplate">
        </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>

Refer the below code snippets for CSS classes

css

#appimage {
            background-image: url("../themes/sampleimages/rating/google.png");
            background-repeat: no-repeat;
            width: 70px;
            height: 70px;
            background-size: 100%;
            float: left;
        }

        #imageTemplate {
            margin-top: 35px;
            margin-left: 10px;
        }

        .tileMargin {
            padding-left: 77px;
            color: white;
        }

The following screenshot illustrates the output of the above code.