Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Handling a dynamic number of columns from $.getjson

I have data being returned that has a fixed, known number of columns then an embedded array that I need to show on the same line as the row it's attached to. How do I configure the hierarchcalGrid to do that?

I've attached the data example, and a screen snap from the current report that I need to reproduce.

  • 255
    Verified Answer
    Offline posted

    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>


    $(function () {

    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");

    <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=" +
    $.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) {
    function (key, value) {
    row[key] = value;

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


Reply Children
No Data