Ask Question

merge Grid row cells vertically

Arash

asked at 05 Nov 2024

Answers

there's no built-in feature specifically for this, but here's a small example using the current feature set: (in this example the Column Person will be merged vertically whenever the same values is present on 2 or more consecutive rows, when sorting or grouping usually) @{ var mergeRowsGrid = Html.Awe().Grid("GridMergeRows") .Columns( new Column { Bind = "Id", Width = 75, Groupable = false, Resizable = false }, new Column { Bind = "Person", Sort = Sort.Asc }, new Column { Bind = "Food.Name" }, new Column { Bind = "Location" }) .Url(Url.Action("GetItems", "LunchGrid")) .Resizable() .Height(450); var originalContentStr = mergeRowsGrid.ContentStr; mergeRowsGrid.Mod(o => o.Main().CustomRender("mergeRows")); mergeRowsGrid.ContentStr = originalContentStr; } @(mergeRowsGrid) the javascript necessary: NOTE: if you're using auto camelCase json serialization (asp.net core default), it could be `.person` instead of `.Person` function mergeRows(o) { var api = o.api; // node content api.ncon = function (p) { var items = p.gv.it; var mergeCount = 0; var mergeItem = null; // calculate merges on items; awef.loop(items, function (item, i) { var item = items[i]; if (!mergeItem || mergeItem.Person != item.Person) { if (mergeItem != null) { mergeItem.PersonMergeCount = mergeCount; } mergeItem = item; mergeCount = 1; } else { mergeCount++; item.PersonSkipCell = 1; } // last item if (i == items.length - 1) { mergeItem.PersonMergeCount = mergeCount; } }); return p.ren(); }; function renderIndentation(level) { var res = ''; for (var i = 0; i < level - 1; i++) { res += "<td class='awe-idn'></td>"; } return res; } // render item api.itmf = function (opt) { var columns = o.columns; var content = ''; if (opt.con) { content = opt.con; } else { console.log(opt.itm.PersonMergeCount); var item = opt.itm; for (var i = 0; i < columns.length; i++) { var col = columns[i]; var tdAttr = ''; // is column hidden if (api.ich(col)) continue; if (col.P == 'Person') { if (item.PersonSkipCell) continue; if (item.PersonMergeCount) { tdAttr = 'rowspan=' + item.PersonMergeCount; } } content += '<td ' + tdAttr + '>' + api.gcv(item, col) + '</td>'; } } var attr = opt.attr; attr += ' class="' + opt.clss + '"'; opt.style && (attr += ' style="' + opt.style + '"'); return '<tr ' + attr + '>' + renderIndentation(opt.ind) + content + '</tr>'; }; }
Omu

answered at 06 Nov 2024
- Thanks for me is more important in the line(Row) than in the column, what should be done for it
  
  at 09 Nov 2024 Arash
- do you need to merge consecutive cells with equal value in the same row ?
  
  at 09 Nov 2024 Omu
- ok Thanks for you Please share this code with other people in Merge-grid-row-cells-vertically tanks
  
  at 09 Nov 2024 Arash

please Sign In to leave an answer