Adding Columns Dynamically to SlickGrid with AJAX. Columns don't show up

Question

Using SlickGrid to display some pretty elaborate grids. The Example I am showing here isn't my code but basically an example given by the SlickGrid people duplicating my issue. My Grids need to have columns added dynamically with the column names being fed through an AJAX feed. Creating the column object in JS is not a problem and even adding them using the .push is seems to work fine as I can see them in the firebug console. The new columns never seem to rendner. I get a a bunch of tiny empty cells at the end of the grid but they never populate.

The script below can be replaced with the script in the "example1-simple.html" viewed here.

<script src="../lib/jquery.jsonp-1.1.0.min.js"></script>
<script>
var grid;
var data = [];
var columns = [
    {id:"title", name:"Title", field:"title"},
    {id:"duration", name:"Duration", field:"duration"},
    {id:"%", name:"% Complete", field:"percentComplete"},
    {id:"start", name:"Start", field:"start"},
    {id:"finish", name:"Finish", field:"finish"},
    {id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
];

var dynamicColumns = [];

var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
}; 

$(function() {
    data = [];
    BuildExtraColumnsAJAX();

    for (var i = 0; i < 2000; i++) {
        data[i] = {
            title: "Task " + i,
            duration: "5 days",
            percentComplete: Math.round(Math.random() * 100),
            start: "01/01/2009",
            finish: "01/05/2009",
            effortDriven: (i % 5 == 0)
        };
        for (var x = 0; x < 20; x++) {
            var columnName = "dynamicColumn" + x;
            data[i][columnName] = x;
        }
    }
    //alert("Go Pack Go");
    grid = new Slick.Grid("#myGrid", data, dynamicColumns, options);
    $("#myGrid").show();
})

function BuildExtraColumnsAJAX(){
    //dynamicColumns = [];          
    for (var x = 0; x < columns.length; x++){
        dynamicColumns.push(columns[x]);
    }           
    var url = "http://services.digg.com/search/stories?   query=apple&callback=C&offset=0&count=20&appkey=http://slickgrid.googlecode.com&type=javascript"; 
    $.jsonp({
        url: url,
        callbackParameter: "callback",
        cache: true, // Digg doesn't accept the autogenerated cachebuster param
        success: onSuccess,
        error: function(){
            alert("BOOM Goes my world");
            }
    });     

 }

 function onSuccess(resp) {
    for (var i = 0; i < resp.stories.length; i++) {
        dynamicColumns.push( {
            id: "dynamicColumn" + i, 
            name: "Dynamic Column" + i,
            field: "dynamicColumn" + i 
        });
    }
 }

 function BuildExtraColumns(){
    dynamicColumns = [];
    for (var x = 0; x < columns.length; x++){
        dynamicColumns.push(columns[x]);
    }
    for (var i = 0; i < 20; i++) {
        dynamicColumns.push( {
            id: "dynamicColumn" + i, 
            name: "Dynamic Column" + i,
            field: "dynamicColumn" + i 
        });
    }       
 }

If I put the line grid = new Slick.Grid("#myGrid", data, dynamicColumns, options); in the firebug console and run it the grid than renders fine. It is almost like the script is still executing lines of code even though its not done creating the dynamicColumns.

The Digg AJAX call is just to similute an AJAX call, I of course would be using my own.

Tin Tin · Accepted Answer · 2011-03-17T02:58:22

The grid is getting initialized before the AJAX call to get the additional columns completes. Either wait until the columns have loaded to initialize the grid, or update the grid after the additional columns have loaded:

grid.setColumns(dynamicColumns);

Adding Columns Dynamically to SlickGrid with AJAX. Columns don't show up

1 Answers