Add Group Tiles in EJ 1 ASP.NET MVC Tile
19 Jul 2016 / 1 minute to read
To make a Tile as grouped tile, you can use the following mentioned pre-defined classes.
Class Name | Explanation |
---|---|
e-tile-group | To group the column elements |
e-tile-column | To align the tile in column manner |
e-tile-small-col-2 | To align the small size tiles |
To render group tile, refer to the following code example.
<div class="group">
<div class="column">
<!— Add tile control here -->
</div>
</div>
To render column grouped tile, you need to render the number of tiles inside a <div> element with class ‘column’. Then that column group element is appended to a <div> with class ‘group’.
To render small-col-2 grouped tile, you need to render the number of tiles inside a <div> element with class ‘small-col-2’. Then that small-col-2 group element is appended to a <div> with class ‘column’. Then you need to append those column inside the main group <div> element.
Refer the following code examples.
<div class="e-tile-group">
<div class="e-tile-column">
@Html.EJ().Tile("tile1").ImageUrl("http://js.syncfusion.com/UG/Web/Content/tile/alerts.png").TileSize(TileSize.Medium).Caption(caption => caption.Enabled(true).Text("Alert"))
@Html.EJ().Tile("tile2").ImageUrl("http://js.syncfusion.com/UG/Web/Content/tile/pictures.png").TileSize(TileSize.Medium).Caption(caption => caption.Enabled(true).Text("pictures"))
@Html.EJ().Tile("tile3").ImageUrl("http://js.syncfusion.com/UG/Web/Content/tile/camera.png").TileSize(TileSize.Medium).Caption(caption => caption.Enabled(true).Text("Camera"))
@Html.EJ().Tile("tile4").ImageUrl("http://js.syncfusion.com/UG/Web/Content/tile/messages.png").TileSize(TileSize.Medium).Caption(caption => caption.Enabled(true).Text("Messages"))
@Html.EJ().Tile("tile5").ImageUrl("http://js.syncfusion.com/UG/Web/Content/tile/games.png").TileSize(TileSize.Wide).Caption(caption => caption.Enabled(true).Text("Games"))
</div>
<div class="e-tile-column">
@Html.EJ().Tile("tile6").ImageUrl("http://js.syncfusion.com/UG/Web/Content/tile/map.png").TileSize(TileSize.Medium).Caption(caption => caption.Enabled(true).Text("Map"))
@Html.EJ().Tile("tile7").ImageUrl("http://js.syncfusion.com/UG/Web/Content/tile/bing.png").TileSize(TileSize.Medium).Caption(caption => caption.Enabled(true).Text("Bing"))
@Html.EJ().Tile("tile8").ImageUrl("http://js.syncfusion.com/UG/Web/Content/tile/favs.png").TileSize(TileSize.Medium).Caption(caption => caption.Enabled(true).Text("Health"))
@Html.EJ().Tile("tile9").ImageUrl("http://js.syncfusion.com/UG/Web/Content/tile/people_2.png").TileSize(TileSize.Medium).ImagePosition(TileImagePosition.Fill).Caption(caption => caption.Enabled(true).Text("Peoples"))
@Html.EJ().Tile("tile10").ImageUrl("http://js.syncfusion.com/UG/Web/Content/tile/weather.png").TileSize(TileSize.Medium).Caption(caption => caption.Enabled(true).Text("Weather"))
@Html.EJ().Tile("tile11").ImageUrl("http://js.syncfusion.com/UG/Web/Content/tile/music.png").TileSize(TileSize.Medium).Caption(caption => caption.Enabled(true).Text("Music"))
</div>
</div>
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