Hi -
I think the TileManager is great. Very cool. My issue is I need to have buttons inside the tiles that are clickable. Right now clicking anywhere inside the tile moves it into focus. I have the need to have buttons on the tiles so the buttons can be clicked and the tile will not come into focus. How can I do this?
Also, I have the situation where I need to add / remove tiles dynamically. What I'm doing now is destroying the igTileManager, adding the html to the dom, then recreating the TileManager.
Is their a better way?
Looking at this sample - http://ko.infragistics.com/products/jquery/sample/tile-manager/databinding-to-json, I see their is a way to make just the header clickable.
I have modified my code so it has the same header, but the entire tile is still clickable.
I am not using a content template. I have a dashboard div element as the container for all the tiles. I then dyanmically add html to the dashboard div and create the igTileManager.
The reason I am doing this is because my tiles can contain igDataCharts, igRadialGrides and igGrid components.
Any chance you can post sample code of what you are doing? I'm trying to do something similar with the tile manager.
Hello Tammy -
The igTileManager didn't meet my needs. I needed the ability for tiles to be moved around by the user. I also needed the tiles to allow each tile to be resized.
So I went with http://gridster.net/. The api is much cleaner then the igTileManager. You can add / remove / resize widgets easily!
Good luck with your project.
Rob
Hello Tammy Wohlrabe,
By providing the maximizeSelector option you can specify the element inside the tile that will trigger the focusing.If no maximizeSelector is provided the default maximizeSelector will be the whole tile.
In this sample we set the maximizeSelector to 'h1', now each tile will be focused only when clicking on the <h1> element:
<script type="text/javascript">
$(document).ready(function () {
$('#dashboard').igTileManager({ layoutConfiguration: { gridLayout: { columnWidth: 150, columnHeight: 150 } }, maximizeSelector: 'h1' });});
</script>
<style> h1 { background-color: lightgreen; }</style>
</head><body> <div id="dashboard" style="width:400px;height:400px;"> <div> <h1>Title 1</h1> <p>Paragraph here</p> </div> <div> <h1>Title 2</h1> <p>Paragraph here</p> </div> <div> <h1>Title 3</h1> <p>Paragraph here</p> </div> </div></body>