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

Programmatically toggle tile visibilty to "true"/"false".


Is it possible to programmatically toggle a tile to be 'visible' or 'not visible'? I would like to be able populate a page with about 150/200 tiles using data from a remote (SQL) datasource. If there is no data for that tile, I would like it not to display.

Is this possible?



1 Reply

AB Ashokkumar Balasubramanian Syncfusion Team May 10, 2019 06:08 AM UTC

Hi Alex, 
Yes, you can change the visibility of Tile programmatically using “visible” property in Asp.Net. In our sample, we have used button click event to hide and show the tile. Please check the below code block. 
<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> 
<div style="float:right"> 
    <ej:Button ID="show" runat="server" Type="Button" OnClick="show_Click" Text="Show Tile 3"></ej:Button> 
    <ej:Button ID="hide" runat="server" Type="Button" OnClick="hide_Click" Text="Hide Tile 3"></ej:Button> 
protected void hide_Click(object Sender, Syncfusion.JavaScript.Web.ButtonEventArgs e) 
    tile3.Visible = false; 
protected void show_Click(object Sender, Syncfusion.JavaScript.Web.ButtonEventArgs e) 
    tile3.Visible = true; 
Sample can be downloaded from the following link 
Please let us know, if you need any further assistance. 
Ashokkumar B. 

Live Chat Icon For mobile
Up arrow icon