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

[Alex Jermy]

Hi,

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?

Thanks,

Alex

[Ashokkumar Balasubramanian]

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> 

        </div> 

        <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> 

    <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> 

</div> 

<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> 

</div> 

  

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 

  

http://www.syncfusion.com/downloads/support/forum/144497/ze/SyncfusionTileView981061077 

 

Please let us know, if you need any further assistance. 

 

Regards, 

Ashokkumar B.