ejTile

11 Jul 201824 minutes to read

The Web Tiles are simple, opaque rectangles or squares and they are arrayed on the start screen in a grid-like pattern. Tapping or selecting a Tile, launches the app or does some other action that is represented by the Tile. Tiles are arranged in a group separated by columns that looks like a start screen of a device and it can be either static or live.

Syntax

JAVASCRIPT

$(element).ejTile()

Example

HTML

<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "people.png" }); 
</script>

Requires

• module:jQuery

• module:ej.core

• module:ej.unobtrusive

• module:ej.data

• module:ej.touch

• module:ej.tile

Members

badge Object

Section for badge specific functionalities and it represents the notification for tile items.

badge.enabled boolean

Specifies whether to enable badge or not.

Default Value

• false

Example

HTML

// Set enabled on initialization. 
// To set enabled API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", badge: { enabled: true } }); 
</script>

HTML

<script>
//Get or set the enabled, after initialization:
// Get the enabled API value.
 $("#tile").ejTile("option", "badge.enabled");                  
// Set the enabled API
$("#tile").ejTile("option", "badge.enabled", true);  
</script>

badge.maxValue number

Specifies maximum value for tile badge.

Default Value

• 100

Example

HTML

// Set maxValue on initialization. 
// To set maxValue API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", badge: { enabled: true, value:5, maxValue:3 } }); 
</script>

HTML

<script>
//Get or set the maxValue, after initialization:
// Get the maxValue API value.
 $("#tile").ejTile("option", "badge.maxValue");                 
// Set the maxValue API
$("#tile").ejTile("option", "badge.maxValue", 3);           
</script>

badge.minValue number

Specifies minimum value for tile badge.

Default Value

• 1

Example

HTML

// Set minValue on initialization. 
// To set minValue API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", badge: { enabled: true, value:3, minValue:5 }}); 
</script>

HTML

<script>
//Get or set the minValue, after initialization:
// Get the minValue API value.
 $("#tile").ejTile("option", "badge.minValue");                 
// Set the minValue API
$("#tile").ejTile("option", "badge.minValue", 5);           
</script>

badge.text string

Specifies text instead of number for tile badge.

Default Value

• null

Example

HTML

// Set text on initialization. 
// To set text API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({imageUrl: "themes/sample/tile/people.png", badge: { enabled: true, text:"ten" } }); 
</script>

HTML

<script>
//Get or set the badge text, after initialization:
// Get the badge text API value.
 $("#tile").ejTile("option", "badge.text");                     
// Set the badge text API
$("#tile").ejTile("option", "badge.text", "ten"); 
</script>

badge.value number

Sets value for tile badge.

Default Value

• 1

Example

HTML

// Set value on initialization. 
// To set value API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", badge: { enabled: true, value:5 }}); 
</script>

HTML

<script>
//Get or set the value, after initialization:
// Get the value API value.
 $("#tile").ejTile("option", "badge.value");                    
// Set the value API
$("#tile").ejTile("option", "badge.value", 5); 
</script>

badge.position enum

Sets position for tile badge.

Name	Description
topright	To set the topright position of tile badge
bottomright	To set the bottomright of tile badge

Default Value

• “bottomright”

Example

HTML

// Set position on initialization. 
// To set position API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", badge: { enabled: true, position:"bottomright" }}); 
</script>

HTML

<script>
//Get or set the position, after initialization:
// Get the position API value.
 $("#tile").ejTile("option", "badge.position");                    
// Set the position API
$("#tile").ejTile("option", "badge.position","bottomright"); </script>

caption Object

Section for caption specific functionalities and it represents the notification for tile items.

caption.enabled boolean

Specifies whether the tile text to be shown or hidden.

Default Value

• true

Example

HTML

// Set enabled on initialization. 
// To set enabled API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", caption: { enabled: true},tileSize:'medium'}); 
</script>

HTML

<script>
//Get or set the enabled, after initialization:
// Get the enabled API value.
 $("#tile").ejTile("option", "caption.enabled");                       
// Set the enabled API
$("#tile").ejTile("option", "caption.enabled", false);</script>

caption.text string

Changes the text of a tile.

Default Value

• “Text”

Example

HTML

// Set text on initialization. 
// To set text API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", caption:{text:"Settings"},tileSize:'medium'}); 
</script>

HTML

<script>
//Get or set the text, after initialization:
// Get the text API value.
 $("#tile").ejTile("option", "caption.text");                   
// Set the text API
$("#tile").ejTile("option", "caption.text", "Settings");</script>

caption.alignment enum

It is used to align the text of a tile.

Name	Description
Normal	To set the normal alignment of text in tile control
Left	To set the left alignment of text in tile control
Right	To set the right alignment of text in tile control
Center	To set the center alignment of text in tile control

Default Value

• “normal”

Example

HTML

// Set alignment on initialization. 
// To set alignment API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", caption:{alignment:"left"},tileSize:'medium' }); 
</script>

HTML

<script>
//Get or set the alignment, after initialization:
// Get the alignment API value.
 $("#tile").ejTile("option", "caption.alignment");                  
// Set the alignment API
$("#tile").ejTile("option", "caption.alignment", "left");</script>

caption.position enum

It is used to specify the caption position like Inner top, inner bottom and outer.

Name	Description
Innertop	To set the inner top position of the tile text
Innerbottom	To set the inner bottom position of the tile text
Outer	To set the outer position of the tile text

Default Value

• “Innerbottom”

Example

HTML

// Set position on initialization. 
// To set position API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", caption:{position:"innerbottom"},tileSize:'medium' }); 
</script>

HTML

<script>
//Get or set the position, after initialization:
// Get the position API value.
 $("#tile").ejTile("option", "caption.position");                  
// Set the position API
$("#tile").ejTile("option", "caption.position", "innerbottom");</script>

caption.icon string

sets the icon instead of text.

Default Value

• null

Example

HTML

// Set icon on initialization. 
// To set icon API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", caption:{icon:'e-icon-images'},tileSize:'medium'}); 
</script>

HTML

<script>
//Get or set the icon, after initialization:
// Get the icon API value.
 $("#tile").ejTile("option", "caption.icon");                      
// Set the liveTile imageUrl API
$("#tile").ejTile("option", "caption.icon",);</script>

cssClass string

Sets the root class for Tile theme. This cssClass API helps to use custom skinning option for Tile control. By defining the root class using this API, we need to include this root class in CSS.

Default Value

• ””

Example

HTML

// Set cssClass on initialization. 
// To set cssClass API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", cssClass:"custom-class"}); 
</script>

HTML

<script>
//Get or set the cssClass, after initialization:
// Get the cssClass API value.
 $("#tile").ejTile("option", "cssClass");                       
// Set the cssClass API
$("#tile").ejTile("option", "cssClass", "custom-class");</script>

enablePersistence boolean

Saves current model value to browser cookies for state maintains. While refreshing the page retains the model value applies from browser cookies.

Default Value

• false

Example

HTML

// Set enablePersistence on initialization. 
// To set enablePersistence API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", enablePersistence:true}); 
</script>

HTML

<script>
//Get or set the enablePersistence, after initialization:
// Get the enablePersistence API value.
 $("#tile").ejTile("option", "enablePersistence");                      
// Set the enablePersistence API
$("#tile").ejTile("option", "enablePersistence", true);</script>

height string number

Customize the tile size height.

Default Value

• null

Example

HTML

// Set height on initialization. 
// To set height API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", width:300, height:300 }); 
</script>

HTML

<script>
//Get or set the height, after initialization:
// Get the height API value.
 $("#tile").ejTile("option", "height");                 
// Set the width API
$("#tile").ejTile("option", "height", 300);</script>

imageClass string

Specifies Tile imageClass, using this property we can give images for each tile through CSS classes.

Default Value

• null

Example

HTML

// Set imageClass on initialization. 
// To set imageClass API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageClass: "sample"}); 
</script>
<style>
.sample
{
background-image:url("themes/sample/tile/people.png");
}
</style>

HTML

<script>
//Get or set the imageClass, after initialization:
// Get the imageClass API value.
 $("#tile").ejTile("option", "imageClass");                     
// Set the imageClass API
$("#tile").ejTile("option", "imageClass", "sample"); </script>

imagePosition enum

Specifies the position of tile image.

Name	Description
Center	To set the center position of tile image
TopCenter	To set the top center position of tile image
BottomCenter	To set the bottom center position of tile image
RightCenter	To set the right center position of tile image
LeftCenter	To set the left center position of tile image
TopLeft	To set the topleft position of tile image
TopRight	To set the topright position of tile image
BottomRight	To set the bottomright position of tile image
BottomLeft	To set the bottomleft position of tile image
Fill	To set the fill position of tile image

Default Value

• “center”

Example

HTML

// Set imagePosition on initialization. 
// To set imagePosition API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", imagePosition: "rightcenter"}); 
</script>

HTML

<script>
//Get or set the imagePosition, after initialization:
// Get the imagePosition API value.
 $("#tile").ejTile("option", "imagePosition");                  
// Set the imagePosition API
$("#tile").ejTile("option", "imagePosition", "rightcenter");</script>

imageTemplateId string

Specifies the tile image in outside of template content.

Default Value

• null

Example

HTML

// Set imageTemplateId on initialization. 
// To set imageTemplateId API value 
<div id="tile" ></div>
<div id="sample" style="background-image: url('themes/sample/tile/people.png');height:100%;width:100%;">
</div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageTemplateId: "sample" }); 
</script>

HTML

<script>
//Get or set the imageTemplateId, after initialization:
// Get the imageTemplateId API value.
 $("#tile").ejTile("option", "imageTemplateId");                        
// Set the imageTemplateId API
$("#tile").ejTile("option", "imageTemplateId", "sample");</script>

imageUrl string

Specifies the URL of tile image.

Default Value

• null

Example

HTML

// Set imageUrl on initialization. 
// To set imageUrl API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png"}); 
</script>

HTML

<script>
//Get or set the imageUrl, after initialization:
// Get the imageUrl API value.
 $("#tile").ejTile("option", "imageUrl");                       
// Set the imageUrl API
$("#tile").ejTile("option", "imageUrl", "themes/sample/tile/people.png"); </script>

locale string

Set the localization culture for Tile Widget.

Default Value:

“en-US”

Example

JAVASCRIPT

$("#dialog").ejTile({locale: "es-ES"});

liveTile Object

Section for liveTile specific functionalities.

liveTile.enabled boolean

Specifies whether to enable liveTile or not.

Default Value

• false

Example

HTML

// Set liveTile enabled on initialization. 
// To set liveTile enabled API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ renderMode:"windows", liveTile: { enabled: true, imageUrl:['themes/sample/tile/people.png','themes/sample/tile/sports.png'] } }); 
</script>

HTML

<script>
//Get or set the liveTile enabled, after initialization:
// Get the liveTile enabled API value.
 $("#tile").ejTile("option", "liveTile.enabled");                       
// Set the liveTile enabled API
$("#tile").ejTile("option", "liveTile.enabled", true); </script>

liveTile.imageClass array

Specifies liveTile images in CSS classes.

Default Value

• null

Example

HTML

// Set liveTile imageClass on initialization. 
// To set liveTile imageClass API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ renderMode:"windows", liveTile: { enabled: true, imageClass: ['img1','img2','img3'] } }); 
</script>
<style>
.img1
{
background-image:url("themes/sample/tile/people.png");
}
.img2
{
background-image:url("themes/sample/tile/sports.png");
}
.img3
{
background-image:url("themes/sample/tile/people_1.png");
}
</style>

HTML

<script> 
//Get or set the liveTile imageClass, after initialization:
// Get the liveTile imageClass API value.
 $("#tile").ejTile("option", "liveTile.imageClass");                    
// Set the liveTile imageClass API
$("#tile").ejTile("option", "liveTile.imageClass", ['img1','img2','img3']);</script>

liveTile.imageTemplateId array

Specifies liveTile images in templates.

Default Value

• null

Example

HTML

// Set liveTile imageTemplateId on initialization. 
// To set liveTile imageTemplateId API value 
<div id="tile" ></div>
<div id="img1" style="background-image: url('themes/sample/tile/people.png');height:100%;width:100%;">
</div>
<div id="img2" style="background-image: url('themes/sample/tile/sports.png');height:100%;width:100%;">
</div>
<div id="img3" style="background-image: url('themes/sample/tile/settings.png');height:100%;width:100%;">
</div>
<script> 
// Create Tile control 
$("#tile").ejTile({ renderMode:"windows", liveTile: { enabled: true, imageTemplateId: ['img1','img2','img3'] } }); 
</script>

HTML

<script>
//Get or set the liveTile imageTemplateId, after initialization:
// Get the liveTile imageTemplateId API value.
 $("#tile").ejTile("option", "liveTile.imageTemplateId");                       
// Set the liveTile imageTemplateId API
$("#tile").ejTile("option", "liveTile.imageTemplateId", ['img1','img2','img3']); </script>

liveTile.imageUrl array

Specifies liveTile images in CSS classes.

Default Value

• null

Example

HTML

// Set liveTile imageUrl on initialization. 
// To set liveTile imageUrl API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ renderMode: "windows", liveTile: { enabled: true, imageUrl: ['themes/sample/tile/people.png','themes/sample/tile/sports.png','themes/sample/tile/settings.png'] } }); 
</script>

HTML

<script>
//Get or set the liveTile imageUrl, after initialization:
// Get the liveTile imageUrl API value.
 $("#tile").ejTile("option", "liveTile.imageUrl");                      
// Set the liveTile imageUrl API
$("#tile").ejTile("option", "liveTile.imageUrl", ['themes/sample/tile/people.png','themes/sample/tile/sports.png','themes/sample/tile/settings.png']);</script>

liveTile.type enum

Specifies liveTile type for Tile. See orientation

Name	Description
Flip	To set flip type of liveTile for tile control
Slide	To set slide type of liveTile for tile control
Carousel	To set carousel type of liveTile for tile control

Default Value

• “flip”

Example

HTML

// Set liveTile type on initialization. 
// To set liveTile type API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ renderMode: "windows", liveTile: { enabled: true, imageUrl: ['themes/sample/tile/people.png','themes/sample/tile/sports.png','themes/sample/tile/settings.png'], type:"carousel" } }); 
</script>

HTML

<script> 
//Get or set the liveTile type, after initialization:
// Get the liveTile type API value.
 $("#tile").ejTile("option", "liveTile.type");                  
// Set the liveTile type API
$("#tile").ejTile("option", "liveTile.type", "carousel");</script>

liveTile.updateInterval number

Specifies time interval between two successive liveTile animation

Default Value

• 2000

Example

HTML

// Set liveTile updateInterval on initialization. 
// To set liveTile updateInterval API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({renderMode: "windows", liveTile: { enabled: true, imageUrl: ['themes/sample/tile/people.png','themes/sample/tile/sports.png','themes/sample/tile/settings.png'], updateInterval:1000 } }); 
</script>

HTML

<script>
//Get or set the liveTile updateInterval, after initialization:
// Get the liveTile updateInterval API value.
 $("#tile").ejTile("option", "liveTile.updateInterval");                        
// Set the liveTile updateInterval API
$("#tile").ejTile("option", "liveTile.updateInterval", 1000);</script>

liveTile.text array

Sets the text to each living tile

Default Value

• Null

Example

HTML

// Set liveTile text on initialization. 
// To set liveTile text API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({renderMode: "windows", liveTile: { enabled: true, imageUrl: ['themes/sample/tile/people.png','themes/sample/tile/sports.png','themes/sample/tile/settings.png'], text:["text1","text2","text3"] } }); 
</script>

tileSize enum

Specifies the size of a tile. See tileSize

Name	Description
Medium	To set the medium size for tile control
Small	To set the small size for tile control
Large	To set the large size for tile control
Wide	To set the wide size for tile control

Default Value

• “small”

Example

HTML

// Set tileSize on initialization. 
// To set tileSize API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", tileSize:"medium" }); 
</script>

HTML

<script> 
//Get or set the tileSize, after initialization:
// Get the tileSize API value.
 $("#tile").ejTile("option", "tileSize");                       
// Set the tileSize API
$("#tile").ejTile("option", "tileSize", "medium");</script>

width string number

Customize the tile size width.

Default Value

• null

Example

HTML

// Set width on initialization. 
// To set width API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png", width:300,height:300 }); 
</script>

HTML

<script> 
//Get or set the width, after initialization:
// Get the width API value.
 $("#tile").ejTile("option", "width");                  
// Set the width API
$("#tile").ejTile("option", "width", 300);</script>

showRoundedCorner boolean

Sets the rounded corner to tile.

Default Value

• false

Example

HTML

// Set showRoundedCorner on initialization. 
// To set showRoundedCorner API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png",showRoundedCorner:true}); 
</script>

HTML

<script>
//Get or set the showRoundedCorner, after initialization:
// Get the showRoundedCorner API value.
 $("#tile").ejTile("option", "showRoundedCorner");                       
// Set the showRoundedCorner API
$("#tile").ejTile("option", "showRoundedCorner", false);</script>

allowSelection boolean

Sets allowSelection to tile.

Default Value

• false

Example

HTML

// Set allowSelection on initialization. 
// To set allowSelection API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png",allowSelection:true}); 
</script>

HTML

<script>
//Get or set the allowSelection, after initialization:
// Get the allowSelection API value.
 $("#tile").ejTile("option", "allowSelection");                       
// Set the allowSelection API
$("#tile").ejTile("option", "allowSelection", false);</script>

backgroundColor string

Sets the background color to tile.

Default Value

• null

Example

HTML

// Set backgroundColor on initialization. 
// To set backgroundColor API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "themes/sample/tile/people.png",backgroundColor:"#ffffff"}); 
</script>

HTML

<script>
//Get or set the backgroundColor, after initialization:
// Get the backgroundColor API value.
 $("#tile").ejTile("option", "backgroundColor");                       
// Set the backgroundColor API
$("#tile").ejTile("option", "backgroundColor","#ffffff");</script>

Methods

updateTemplate(id, index)

Update the image template of tile item to another one.

Name	Type	Description
id	string	UpdateTemplate by using id
index	number	index of the tile

Example

HTML

<div id="tile" >
</div> 
<div id="sample1" style="background-image: url('themes/sample/tile/people.png');height:100%;width:100%;">
</div>
<div id="sample2" style="background-image: url('themes/sample/tile/sports.png');height:100%;width:100%;">
</div>
<script> 
$(function () {
$("#tile").ejTile({ imageTemplateId: "sample1" }); 
var value = $("#tile").data("ejTile");
value.updateTemplate("sample2",0);
});
</script>

Events

mouseDown

Event triggers when the mouseDown happens in the tile

Name	Type	Description
argument	Object	Event parameters from tile Name Type Description cancel boolean if the event should be canceled; otherwise, false. model boolean returns the tile model type boolean returns the name of the event text string returns the current tile text index number returns the index of current tile item

Example

HTML

// Define mouseDown event on initialization. 
// To set mouseDown event API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "people.png", 
mouseDown: function (args) { 
//handle the event 
}
}); 
</script>

mouseUp

Event triggers when the mouseUp happens in the tile

Name	Type	Description
argument	Object	Event parameters from tile Name Type Description cancel boolean if the event should be canceled; otherwise, false. model boolean returns the tile model type boolean returns the name of the event text boolean returns the current tile text index number returns the index of current tile item

Example

HTML

// Define mouseUp event on initialization. 
// To set mouseUp event API value 
<div id="tile" ></div>
<script> 
// Create Tile control 
$("#tile").ejTile({ imageUrl: "people.png", 
mouseUp: function (args) { 
//handle the event 
}
}); 
</script>