切换布局时,IgniteUI IgTileManager 不会保持正确的最大化图块位置

IgniteUI IgTileManager does not maintain the correct maximized tile location when switching layouts

我正在尝试根据 window 大小和方向设置不同的布局。一个图块比其他图块大,被认为是 "maximized" 个图块。其余为"minimized"。当我单击 "minimized" 磁贴时,它会与 "maximized" 位置交换。

作品: 如果我不交换任何图块,只是改变布局,那么一切都是正确的,最大的图块位置被认为是 "maximized" 个图块。

无效: 如果我先单击 "minimized" tile 将其与 "maximized" tile 交换,然后更改布局,tilemanager 将使用不正确的位置来放置 "maximized" tile。

最大化图块索引应参考项目列表中的哪个图块配置是最大化图块,但当图块被交换时,这似乎会发生变化。

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

您正在更新磁贴配置并在单击按钮时将其与现有配置合并。如果您先销毁小部件,然后使用新配置对其进行初始化,您的示例将起作用。我更新了 your fiddle.

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