IgniteUI IgTileManager does not maintain correct max tile position when switching layouts

I am trying to set different layouts based on window size and orientation. One tile is larger than the rest and is considered a "maximized" tile. The rest are "kept to a minimum." When I click on the "minimized" tile, it changes it with the "maximized" position.

WORKS:  If I don't change any of the tiles and just change the layout, then everything is correct and the largest tile position is considered the "maximized" tile.

DOES NOT WORK: If I first click on the "minimized" tile to swap it with the "maximized" tile, and then change layouts, the tyler will use the wrong position to hold the "maximized" tile.

The maximum tile index should refer to which tile configuration in the item list is the maximized slice, but this seems to change when the slices are replaced.

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);
         });
     });
      

Run code


+3


source to share


1 answer


You update the tile configuration and merge it with the existing configuration at the click of a button. If you destroy the widget first and then initialize it with a new configuration, your sample will work. I have updated my fiddle .



 $(function () {         
     $('#layoutContainer').igTileManager(optionsWide);
     $('#wideBtn').click(function () {
         $('#layoutContainer').igTileManager("destroy");
         $('#layoutContainer').igTileManager(optionsWide);
     });
     $('#narrowBtn').click(function () {
         $('#layoutContainer').igTileManager("destroy");
         $('#layoutContainer').igTileManager(optionsNarrow);
     });
 });

      

+2


source







All Articles