We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

'Tile' example (TileView?)


Is there an example of the Tile control that also contains code behind?

Also I'm not sure if there is some documentation missing or something. In the forum the 'Tile' control seems to be called 'TileView' and there is no 'Tile' control to select.

Essentially I am looking for a sample involving the 'Tile' control that contains C# for binding data to Tiles.



1 Reply

AB Ashokkumar Balasubramanian Syncfusion Team May 8, 2019 10:53 AM UTC

Hi Alex, 
Yes, you can able to set properties for Tile control through code behind as shown below. 
<div class="group" style="width:900px"> 
    <div class="column"> 
        <ej:Tile ID="tile1" runat="server" ImagePosition="Fill"></ej:Tile> 
        <div class="small-col-2"> 
            <ej:Tile ID="tile2" runat="server" ImagePosition="Center"></ej:Tile> 
            <ej:Tile ID="tile3" runat="server" ImagePosition="Center" TileSize="Small" ImageUrl="../Content/images/TileView/bing.png"></ej:Tile> 
        <ej:Tile ID="tile4" runat="server" ImagePosition="Center" TileSize="Medium" ImageUrl="../Content/images/TileView/games.png" Text="Play"></ej:Tile> 
        <ej:Tile ID="tile5" runat="server" TileSize="Medium" ImageUrl="../Content/images/TileView/map.png" Text="Maps"></ej:Tile> 
        <ej:Tile ID="tile6" runat="server" ImagePosition="Fill" TileSize="Wide" ImageUrl="../Content/images/TileView/sports.png" Text="Sports"></ej:Tile> 
    <div class="column"> 
        <ej:Tile ID="tile7" runat="server" ImagePosition="Fill" TileSize="Medium" ImageUrl="../Content/images/TileView/people_2.png" Text="People"></ej:Tile> 
        <ej:Tile ID="tile8" runat="server" ImagePosition="Center" TileSize="Medium" ImageUrl="../Content/images/TileView/pictures.png" Text="Photo"></ej:Tile> 
        <ej:Tile ID="tile9" runat="server" ImagePosition="Center" TileSize="Wide" ImageUrl="../Content/images/TileView/weather.png" Text="Weather"></ej:Tile> 
        <ej:Tile ID="tile10" runat="server" ImagePosition="Center" TileSize="Medium" ImageUrl="../Content/images/TileView/music.png" Text="Music"></ej:Tile> 
        <ej:Tile ID="tile11" runat="server" ImagePosition="Center" TileSize="Medium" ImageUrl="../Content/images/TileView/favs.png" Text="Favorites"></ej:Tile> 
protected void Page_Load(object sender, EventArgs e) 
    tile1.TileSize = Syncfusion.JavaScript.TileSize.Medium; 
    tile1.ImageUrl = "../Content/images/TileView/people_1.png"; 
    tile1.Text = "People"; 
    tile2.TileSize = Syncfusion.JavaScript.TileSize.Small; 
    tile2.ImageUrl = "../Content/images/TileView/alerts.png"; 
In the above code, we have defined few properties from code behind for Tile 1 and Tile 2 . We have attached a sample for your reference which can be downloaded from the below link 
Please let us know, if you have any concern. 
Ashokkumar B. 

Live Chat Icon For mobile
Up arrow icon