Hi,
I am working on TileManager with the inspiration from your blog post. I have a specific requirement in which the tiles need to be re-sized depending on user action. I was able to show tiles and their content, but when I tried to update tile's size, it didn't work as expected. This is my code:
function ResizeTiles(_percentage) { var dataSource = @Html.Raw(Json.Encode(Model));
var percentage = "'" + _percentage + "%'"; $('#dashboard').igTileManager({ layoutConfiguration: { gridLayout: { columnWidth: percentage, columnHeight: percentage, marginLeft: 10, marginTop: 10, cols: 1 } }, dataSource: dataSource, contentTemplate: '<img src="${Link}" />' }); $('#dashboard').igTileManager('reflow'); }
After ResizeTiles() was called, all tiles disappeared. Please let me know if I did something wrong. Thanks in advance.
Hello Tangailam,
Could you specify which version of IgniteUI are you using? In particular 13.1 or 13.2?
Sincerly,Daniel
Hi Daniel,
My code is running on 13.2.
Thank you.
Sorry for late response as I was busy with other tasks. And thank you for your response, it works for me.
The Tile Manager controls used to be initialized as you do in the 13.1 version. In 13.2 we simplified some of the options. To achieve the same effect initialize the Tile Manager as follows: $('#dashboard').igTileManager({ columnWidth: percentage, columnHeight: percentage, marginLeft: 10, marginTop: 10, cols: 1 dataSource: dataSource, minimizedState: '', maximizedState: '' });
Note that contentTemplate option was completely removed. It was replaced with "maximizedState" and "minimizedState" options, which speficy what content to be shown in maximized/minimized tile's states.
As I understand you want to change the columnWidth/Height of the tiles with the ResizeTiles function. If that is the case you have to just set new values for these options as follows: - $('#dashboard').igTileManager('option', 'columnWidth', percentage);
- $('#dashboard').igTileManager('option', 'columnHeight', percentage);