jquery - IgniteUI IgTileManager does not maintain the correct maximized tile location when switching layouts -
i trying set different layouts based on window size , orientation. 1 tile larger rest , considered "maximized" tile. rest "minimized". when click on "minimized" tile swaps "maximized" position.
works: if not swap tiles, , change layout, correct, , largest tile position considered "maximized" tile.
doesn't work: if first click on "minimized" tile swap "maximized" tile, change layouts, tilemanager use incorrect position hold "maximized" tile.
the maximized tile index should reference tile configuration in items list maximized tile, appears change when tiles have been swapped.
jsfiddle: http://jsfiddle.net/seadonk/72apwsb2/
var optionswide = { items: [ { rowindex: 0, colindex: 1, rowspan: 3, colspan: 6 }, { rowindex: 0, colindex: 0, rowspan: 1, colspan: 1 }, { rowindex: 1, colindex: 0, rowspan: 1, colspan: 1 }, { rowindex: 2, colindex: 0, rowspan: 1, colspan: 1 } ], minimizedstate: ':not(.maximizedcontainer)', maximizedstate: ':not(.minimizedcontainer)', maximizedtileindex: 0, }; var optionsnarrow = { items: [ { rowindex: 0, colindex: 0, rowspan: 6, colspan: 3 }, { rowindex: 6, colindex: 0, rowspan: 1, colspan: 1 }, { rowindex: 6, colindex: 1, rowspan: 1, colspan: 1 }, { rowindex: 6, colindex: 2, rowspan: 1, colspan: 1 } ], minimizedstate: ':not(.maximizedcontainer)', maximizedstate: ':not(.minimizedcontainer)', maximizedtileindex: 0, }; $(function () { $('#layoutcontainer').igtilemanager(optionswide); $('#widebtn').click(function () { $('#layoutcontainer').igtilemanager(optionswide); }); $('#narrowbtn').click(function () { $('#layoutcontainer').igtilemanager(optionsnarrow); }); });
you updating tile configuration , merging existing configuration on button click. if destroy widget first , initialize new configuration sample work. have updated your fiddle.
$(function () { $('#layoutcontainer').igtilemanager(optionswide); $('#widebtn').click(function () { $('#layoutcontainer').igtilemanager("destroy"); $('#layoutcontainer').igtilemanager(optionswide); }); $('#narrowbtn').click(function () { $('#layoutcontainer').igtilemanager("destroy"); $('#layoutcontainer').igtilemanager(optionsnarrow); }); });