programmatically creating OnDemandGrid using ColumnResizer

[TracySchloss]

I'm dynamically creating a dGrid/OnDemandGrid and I'm having a hard time getting the ColumnResizer extension to work.  Maybe it doesn't do what I think it's supposed to do?  I was expecting it to allow me to grab the edge of the header and drag the column to a larger size.  Is that not what it does?

I have the appropriate require definitions at the top for

"dgrid/OnDemandGrid", "dgrid/extensions/ColumnHider","dgrid/extensions/DijitRegistry","dgrid/extensions/ColumnResizer","dgrid/Selection",

My grids are generated based on the results of multiple queryTasks, coming out of a set of functions based on promise/all.  I have a separate function, buildColumns, to generate the columns using the attributes of each layer.  I assume this buildColumns function is where I should tell each column that it's resizable. The grids are populated with the correct data.  

function queryGeometryResultsHandler_toGrid(results, idx) { //format the data for the data grid
//gridList.length = 0;
 var featureAttributes = arrayUtil.map(results.features, function(feature){     
    return feature.attributes;
 });
    var currentMemory = new Memory ({data:featureAttributes, idProperty:'OBJECTID'}); 
    var gridcolumns = [];
    if (results.features.length > 0) {
      gridcolumns = buildColumns(results.features[0]);  
    }
//create a titlePane in the floatingPane for each visible layer
    var currentLayerId = qTaskNameList[idx];//a list of layers created in query task functions, array created previously 
    var currentQTask = qTaskList[idx];
    var paneTitle = (currentLayerId.split('_').join(' '))+"  ("+results.features.length+")";//formats string to make a nice title
    tp = new TitlePane({ 
    id: 'gridPane_'+currentLayerId, 
    title: paneTitle, 
    splitter:true});
  tp.set('class', 'reportTitlePane');
    registry.byId("reportContainer").addChild(tp);
    tp.startup();

// Create Grid using structure and data defined above  
      if (results.features.length > 0) { 
        var grid = new (declare([Grid, ColumnHider, DijitRegistry, ColumnResizer]))({
            id:currentLayerId+'_grid', 
            columns: gridcolumns,
            store: currentMemory
        }); 
        grid.startup(); 
        tp.set("content", grid);
        grid.on('.dgrid-row:click', function(event){
            highlightGridSelection(event, grid, currentQTask);
        });
    }else {
        tp.set("content", "No features found");
    }  
}
function buildColumns(feature) {
    var attributes = feature.attributes;
    var columns = [];
    for (var attribute in attributes) {
        if (attributes.hasOwnProperty(attribute)) {
            var objects = {};
            objects.label = attribute;
            objects.field = attribute;
            objects.id = attribute;
            objects.resizable = true;//is this in the right place??
            if (attribute === "Shape.len" || attribute === 'Shape.area'  || attribute === 'OBJECTID') {
                objects.hidden = true;
            }
            columns.push(objects);
        }
    }
    return columns;
}

[ScottGunn]

Hi Tracy,

I just got this to work (although it's a little slow right now, not sure why) on my example.  Basically after you call buildColumns() you can append "resizable: true" to the end of the gridColumns array, like so:

if (results.features.length > 0) {
      gridcolumns = buildColumns(results.features[0]);  
     } 
    gridcolumns.push("resizable: true");

This worked but I'm wondering if there's a more efficient way.  Here's my full code for the queryTask.execute section:

queryTask.execute(query, function(results) {                
     
     var featureAttributes = [];
                    featureAttributes = array.map(results.features, function(feature){     
     return feature.attributes;
     });
     
     var currentMemory = new Memory ({data:featureAttributes, idProperty:'OBJECTID'}); 
     var gridcolumns = [];
     
     if (results.features.length > 0) {
      gridcolumns = buildColumns(results.features[0]);  
     } 
    gridcolumns.push("resizable: true");
    grid = new customGrid({
    columns: gridcolumns,
    store: currentMemory,
    selectionMode: "single",
    cellNavigation: false,
    loadingMessage: "Loading data...",
    noDataMessage: "No results found for: " + city
      }, "grid");

[JonathanUihlein]

Hi Tracy!

I missed this thread yesterday but I love troubleshooting dgrid!
I took a look at your code and didn't see anything amiss... but its hard to troubleshoot without the entire code context.

When ColumnHider or ColumnResizer fail, it usually has to do with either  the store or the column object itself being slightly malformed (even if  it appears that everything is working correctly), thus the ids for each column are generated incorrectly, causing the extensions to fail.

I would compare the store  object to the column object and make sure nothing is strange about how  the two structures relate to eachother.

Could you potentially replicate this in a http://jsfiddle ?
I have several other theories based on previous experiences with dynamic column structures but I'd like to inspect a live demo before going into more detail.

Thank you!!