How do we dynamically populate a Sigma Grid?

Question

This should be so easy and yet...

The following code works just fine (I've trimmed away the info not needed here):

$(function() 
{
    .
    ..
    ...
    // Defining the data options.
    var datasetOptions = 
    {
        fields: fieldArray,
        recordType: 'array',
        data: rowData
    };

    // Putting together the column options.
    var columnOptions = new Array();
    for (var i = 0; i < fieldNames.length; i++)
    {
        columnOptions.push({id: fieldNames[i], header: fieldNames[i], width: columnWidth});
    }

    // Defining the grid options.
    var toolbar = 'filter state';
    var gridOptions =
    {
        id: 'SigmaGridID',
        container: 'SigmaGridDiv', 
        height: gridHeight,
        pageSize: rowCount,
        replaceContainer: true, 
        resizable: true,
        selectRowByCheck: false,
        showGridMenu : false,
        showIndexColumn: false,
        skin: "vista",
        toolbarContent: toolbar,
        toolbarPosition: 'bottom',
        width: gridWidth, 

        dataset: datasetOptions,
        columns: columnOptions
    };

    // Displaying the grid.
    var grid = new Sigma.Grid(gridOptions);
    Sigma.Util.onLoad(Sigma.Grid.render(grid)); 
});

When the page loads the grid is populated and all is good. But I don't want to have to reload the entire page everytime.

I've succeeded is repopulating the grid dynamically using:

var grid = Sigma.$grid("SigmaGridID");
grid.refresh(rowData);
Sigma.Grid.render(grid);

but this doesn't adjust the columns. So if I am adding a column the data is updated but there is a column missing. If I remove a column then the data is displayed but with the extra column all empty.

So. How do I adjust the columns or is there a way better way to dynamically re-render and re-display the Sigma Grid? In other words, how do we display the Sigma Grid but not only when the page is loading?

Thanks.

Michael

Michael · Answer 1 · 2016-02-01T16:58:03.147

Well, finally I found something that works.

When I want to repopulate the Sigma Grid I first do some cleaning up:

        Sigma.destroyGrids();
        gGrid = null;

        var oldSigmaGridDiv = document.getElementById("SigmaGridDiv");
        if (!isEmpty(oldSigmaGridDiv))
        {
            oldSigmaGridDiv.parentNode.removeChild(oldSigmaGridDiv);
        }

        var newSigmaGridDiv = document.createElement("div");
        newSigmaGridDiv.id = "SigmaGridDiv";
        var parentDiv = document.getElementById("SigmaGridParentDiv");
        parentDiv.appendChild(newSigmaGridDiv);

Note: gGrid is simply "var grid" above that I put global to be able set it to null (in order to have the garbage collector wipe it out and insure that we use new memory space).

Than I call the previous code (which I put in a function to be able to call it at will) with one change (at the end):

    gGrid = new Sigma.Grid(gridOptions);
    if (pOnPageLoad)
    {
        Sigma.Util.onLoad(Sigma.Grid.render(gGrid));
    }
    else
    {
        gGrid.render();
    }

Voila!

Also, you can target cell specifically. Here is some sample code which shows you that we are changing the value of column "ColumnA" to contain a new value in all of the selected rows in the Sigma Grid:

var newValue = 'Some amazing new value';

var selectedRows = gGrid.selectedRows;
for (var i = 0; i < selectedRows.length; i++)
{
    // Retrieving the current selected row's index in the grid.
    var indexStr = selectedRows[i].getAttribute("__gt_ds_index__");

    // Changing the value.
    gGrid.setCellValue('ColumnA', parseInt(indexStr), newValue);
    gGrid.refreshRow(selectedRows[i]);
}

gGrid.reload();

How do we dynamically populate a Sigma Grid?

1 Answers1