I wanted to find a way to span a column for only 1 row of data in Kendo Grid for Angular. I looked into using kendo-grid-span-column but that seems to do it for every row for the columns specified. I've also looked into using kendoGridFooterTemplate but it doesn't seem like there is support for spanning that quite yet. I've posted a picture of an example below:
You should be able to accomplish this by manually adding colspan attribute during the data bound event.
See below example for where I use a boolean data field named isSpecial to determine if that row needs to be altered:
function onDataBound(e) {
var grid = $("#myGrid").data("kendoGrid");
// Iterate through all the rows
var rows = grid.items();
$(rows).each(function (e) {
var row = this;
var data = grid.dataItem(row);
// Check if this row needs to be altered
if (data.isSpecial) {
// Set the column span
$(row).find("td:first-child").attr("colspan", "5");
}
});
}