c# - Displaying multivalued attributes from model in columns -

i kicking things off kendo ui, not find way display multivalued attributes in column, respect value in preceeding column. here representational mockup of view want:

the values in column 2 , 3 belong value 1, 2 , 3 respectively. have model, list containing list columns 2 , 3. here have far:

@model list<customer> <div class="left" style="margin-top: 30px; margin-left: 0px;">     <div style="margin-bottom: 5px;">         <span style="font-weight: bold">customer data</span></div>     @(html.kendo().grid<customer>()    .name("gvcustomerdata")    .columns(columns =>        {            columns.bound(model => model.customername);        })        .pageable()        .sortable()        .scrollable()        .filterable()        .datasource(datasource => datasource            .ajax().model(model => model.id(model => model.customerid))                            .read(read => read.action("getcustomerdata", "customer", new { deptid= @viewbag.deptid})))     ) </div> 

in case, values customers phone numbers or projects working on. not want manually iterate on model list , construct raw html against that. can kendo simplify process?

while kendo ui support merged column headers, doesn't seem support requirement.

however, found this piece of code, perhaps helps you:

function mergegridrows(gridid, coltitle) {     $('#' + gridid + '>.k-grid-content>table').each(function (index, item) {          var dimension_col = 1;         // first, scan first row of headers "dimensions" column.         $('#' + gridid + '>.k-grid-header>.k-grid-header-wrap>table').find('th').each(function () {             if ($(this).text() == coltitle) {                  // first_instance holds first instance of identical td                 var first_instance = null;                      $(item).find('tr').each(function () {                          // find td of correct column (determined 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 identical previous                         // remove current td                         dimension_td.remove();                         // increment rowspan attribute of first instance                         first_instance.attr('rowspan', typeof first_instance.attr('rowspan') == "undefined" ? 2 : first_instance.attr('rowspan') + 1);                     } else {                         // cell different last                         first_instance = dimension_td;                     }                 });                 return;             }             dimension_col++;         });      }); }