2014-09-05 3 views
1

Я ничего не вижу в официальной документации Kendo UI. Просто проверьте, выполнил ли кто-нибудь настройку для объединения ячеек в сетке пользовательских интерфейсов Kendo.Как объединить ячейки в сетке пользовательского интерфейса Kendo

У меня есть содержание, как это:

Technology  Core Language & Communication        15 
---------------------------------------------------------------------------------- 
Technology  Mathematics & Application         20 
---------------------------------------------------------------------------------- 
Technology  Science Application & Understanding       30 
--------------------------------------------------------------------------------- 
Communication Using language to reason, interpret & analyse    40 
--------------------------------------------------------------------------------- 
Communication Using visualization for design/creating      40 

мне нужно получить следующий вывод:

Technology  Core Language & Communication        15 
       ----------------------------------------------------------------- 
       Mathematics & Application         20 
       ----------------------------------------------------------------- 
       Science Application & Understanding       30 
--------------------------------------------------------------------------------- 
Communication Using language to reason, interpret & analyse    40 
       ----------------------------------------------------------------- 
       Using visualization for design/creating      40 

Не знаю, как это будет сделано с помощью шаблона.

+3

я бы, вероятно, использовать вложенную сетку –

ответ

2

Слияние ячеек в сетке пользовательского интерфейса Kendo не поддерживается.

Так что, наконец, я решил объединить ячейки после рендеринга сетки kendo ui, поэтому я использовал javascript для объединения ячеек в событие DataBound для kendo ui Grid.

function mergeGridRows(gridId, colTitle) { 

$('#' + gridId + '>.k-grid-content>table').each(function (index, item) { 

    var dimension_col = 1; 
    // First, scan first row of headers for the "Dimensions" column. 
    $('#' + gridId + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function() { 
     if ($(this).text() == colTitle) { 

      // first_instance holds the first instance of identical td 
      var first_instance = null; 

      $(item).find('tr').each(function() { 

       // find the td of the correct column (determined by the colTitle) 
       var dimension_td = $(this).find('td:nth-child(' + dimension_col + ')'); 

       if (first_instance == null) { 
        first_instance = dimension_td; 
       } else if (dimension_td.text() == first_instance.text()) { 
        // if current td is identical to the previous 
        // then remove the current td 
        dimension_td.remove(); 
        // increment the rowspan attribute of the first instance 
        first_instance.attr('rowspan', typeof first_instance.attr('rowspan') == "undefined" ? 2 : first_instance.attr('rowspan') + 1); 
       } else { 
        // this cell is different from the last 
        first_instance = dimension_td; 
       } 
      }); 
      return; 
     } 
     dimension_col++; 
    }); 

}); 
} 

More Details

Смежные вопросы