2015-04-27 5 views
3

Я пытаюсь установить различные макеты на основе размера окна и ориентации. Одна плитка больше, чем остальная, и считается «максимизированной» плиткой. Остальные «сведены к минимуму». Когда я нажимаю на «минимизированную» плитку, она меняет ее с помощью «максимизированной» позиции.IgniteUI IgTileManager не поддерживает правильное максимальное расположение плитки при переключении макетов

РАБОТЫ: Если я не поменять местами какие-либо плитки, а просто изменить расположение, то все правильно, и самое большое положение плитки считается «максимальной» плитки.

НЕ РАБОТАЕТ: Если я первый нажмите на «свернутом» плитки, чтобы поменять его с «развернутом» плитки, а затем изменить макеты, то tilemanager будет использовать неправильную позицию удерживать «максимально» плитки ,

Максимальный индекс плитки должен указывать, какая конфигурация плитки в списке элементов является максимальной плиточкой, но это, по-видимому, меняется, когда плитки были заменены.

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

ответ

2

Вы обновляете конфигурацию плитки и ее слияния с существующей конфигурации на кнопку мыши. Если вы сначала уничтожаете виджет, а затем инициализируете его новой конфигурацией, ваш образец будет работать. Я обновил your fiddle.

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