I solved this by reshaping the data at the client using jQuery. I have an unknown number of grids that will be created on the page. To solve data collision problems I create a uniqueID for each grid. The grids are spawned off of a list in the model as seen below.

@{ var descList = Model.ReportDisplaySectionList;
foreach (var descr in descList)
{

<div id="@descr.UniqueId">
<div id="loading"></div>
<div id="errorCondition"></div>
</div>

<script>

$(function () {

$("#@descr.UniqueId").igGrid({
autoGenerateColumns: false,
width: "100%",
caption: "@descr.Owner @descr.Location @descr.ProductType @descr.ProductId @descr.Species @descr.Seasoning @descr.Grade @descr.Dressing @descr.Size @descr.Attr1",
showHeaders: true,
fixedHeaders: false,
scrolling: true,
columns: [
{ headerText: "", key: "IsBold", dataType: "bool", allowHiding: true, hidden: true },
{ headerText: "", key: "OdIndicators", dataType: "string", width: "*" },
{ headerText: "", key: "OrderNumber", dataType: "string", width: "100px" },
{ headerText: "", key: "DescriptiveText", dataType: "string", width: "200px" },
{ headerText: "", key: "DateDay", dataType: "string", width: "130px" },
{ headerText: "", key: "CostDescription", dataType: "currency", width: "*" },
{ headerText: "Pkg", key: "Pkg", dataType: "string", width: "50px" },
{ headerText: "Brd Ft", key: "BoardFeet", dataType: "string", width: "100px" }
]});

GetDataForSection("@descr.UniqueId", "@descr.ReportId", "@descr.Owner", "@descr.Location", "@descr.ProductType", "@descr.ProductId", "@descr.Attr1", "@descr.Size", "@descr.Dressing", "@descr.Species", "@descr.Grade", "@descr.Seasoning", "@descr.Pkg", "@descr.SortOrderPriority", "@descr.BreakOutAttributes", "@Model.WeekOf");
});

</script>
<hr />
}
}

As you can see, I call GetDataForSection that actually gets the data for the grid in JSON format. When the $.getJSON call returns, I pass the data and the uniqueId for the specific grid to a function called bindDataToGrid.

I get the column collection and get to the first row of data.  That shows me how to shape the data.  I loop through the collection (a dictionary object attached to each row of data) and create new columns for each key value pair in CountsBySizeDictionary. Then I simply reshape the data by adding additional columns to each row using the key value pair inside the dictionary. Once the data is reshaped, I simply bind the data to the grid as you would normally. 

<script type="text/javascript">

function GetDataForSection(uniqueId, reportId, owner, location, productType, productId, attr1, size, dressing, species, grade, seasoning, pkg, sortOrderPriority, breakOutAttributes, weekOf) {

// -- Start an async call to get the data
var url = "/Home/GetAllRecordsForSection?reportId=" +
reportId +
"&owner=" +
owner +
"&location=" +
location +
"&productType=" +
productType +
"&productId=" +
productId +
"&attr1=" +
attr1 +
"&size=" +
size +
"&dressing=" +
dressing +
"&species=" +
species +
"&grade=" +
grade +
"&seasoning=" +
seasoning +
"&pkg=" +
pkg +
"&sortOrderPriority=" +
sortOrderPriority +
"&breakOutAttributes=" +
breakOutAttributes +
"&weekOf=" +
weekOf;
$.getJSON(url, function (json) {
bindDataToGrid(uniqueId, json);
})
.fail(function (jqXhr, textStatus, errorThrown) { alert(errorThrown + ' getJSON request failed! ' + textStatus) });
return false;
}

function bindDataToGrid(uniqueId, data) {

// Get to the grid columns collection
var cols = $("#" + uniqueId).igGrid("option", "columns");

// Get to the CountsBySizeDictionary in the first row of data. This will tell us how to shape the grid.
var firstRowOfData = data[0];

// Loop through each dictionary item and create a new grid column with the correct header and key value to bind to
$.each(firstRowOfData.CountsBySizeDictionary, function(k, v) {
// Set
var newColumn = { headerText: k, key: k, dataType: "number", width: "50px" };
cols.push(newColumn); // add the new column to the columns collection
});

// use the new columns collection with this grid
$("#" + uniqueId).igGrid("option", "columns", cols);

// Loop through each row and create new columns for the size data
$.each(data, function (index, row) {
$.each(row.CountsBySizeDictionary,
function (key, value) {
row[key] = value;
});
});

$("#" + uniqueId).igGrid("dataSourceObject", data);
$("#" + uniqueId).igGrid("dataBind");
return false; // Returning false will prevent further event bubbling
}

</script>