Messages

1

Help for ParamQuery Grid (free version) / Re: Use JSON to define colModel

« on: June 24, 2014, 11:59:45 pm »

Thanks. Must be my day for silly mistakes. The 'async' issue was just as dumb on my part.

2

Help for ParamQuery Grid (free version) / Re: Use JSON to define colModel

« on: June 24, 2014, 10:49:13 pm »

The code fragment you provided was good enough. The new version looks like:

Code: [Select]

$(function() {

    var gridObject = {};
   
    var buildGrid = function(gridJSON) {
        console.log(JSON.stringify(gridJSON));
        gridObject = {
            width: 640,
            height: 400,
            colModel: gridJSON.columns,
            dataModel: gridJSON.data
        };
         console.log(JSON.stringify(gridObject));
   };
   
    $.ajax ({
        url: 'data/facilitygrid.json',
        type: 'GET',
        dataType: 'JSON',
        async: false,
        success: buildGrid
    });
   
    $("#aGrid").pqGrid(gridObject);
});

Console log has (line breaks added for readability):

Code: [Select]

{"columns":[
{"title":"Name","width":100,"dataType":"string","dataIndx":"facName"},
{"title":"Bldg","width":50,"dataType":"string","dataIndx":"facBldg"},
{"title":"Floor","width":50,"dataType":"string","dataIndx":"facFloor"},
{"title":"Column","width":50,"dataType":"string","dataIndx":"facColumn"},
{"title":"Room","width":50,"dataType":"string","dataIndx":"facRoom"},
{"title":"Class","width":50,"dataType":"string","dataIndx":"facClass"},
{"title":"Ready","width":100,"dataType":"string","dataIndx":"facReady"}],
"data":[
{"facName":"N-100","facBldg":"N","facFloor":"1","facColumn":"","facRoom":"100","facClass":"SAR","facReady":"12-31-2014"},
{"facName":"A1-11","facBldg":"M103","facFloor":"1","facColumn":"R29","facRoom":"","facClass":"DoD","facReady":"12-31-2014"}]}

gridObject has (line breaks added for readability):

Code: [Select]


{"width":640,"height":400,
"colModel":[
{"title":"Name","width":100,"dataType":"string","dataIndx":"facName"},
{"title":"Bldg","width":50,"dataType":"string","dataIndx":"facBldg"},
{"title":"Floor","width":50,"dataType":"string","dataIndx":"facFloor"},
{"title":"Column","width":50,"dataType":"string","dataIndx":"facColumn"},
{"title":"Room","width":50,"dataType":"string","dataIndx":"facRoom"},
{"title":"Class","width":50,"dataType":"string","dataIndx":"facClass"},
{"title":"Ready","width":100,"dataType":"string","dataIndx":"facReady"}],
"dataModel":[{"facName":"N-100","facBldg":"N","facFloor":"1","facColumn":"","facRoom":"100","facClass":"SAR","facReady":"12-31-2014"},
{"facName":"A1-11","facBldg":"M103","facFloor":"1","facColumn":"R29","facRoom":"","facClass":"DoD","facReady":"12-31-2014"}]}

The grid and column titles show up but there are no data rows. Is there something obvious I'm missing?

Also, I don't understand why I need 'async: false' (there is nothing in gridJSON otherwise) but, that's not a pqGrid issue.

3

Help for ParamQuery Grid (free version) / Use JSON to define colModel

« on: June 20, 2014, 03:24:02 am »

I have a grid that accepts a valid JSON file for data. Now, I'd like to use JSON to define the column model. I'd prefer that it use the same JSON file but, I'd be just as happy using two different files for now.

The JSON file is:

Code: [Select]

{
    "columns": [
        {"title": "Name", "width": 100, "dataType":"string", "dataIndx":"facName"},
        {"title": "Bldg", "width": 50, "dataType":"string", "dataIndx":"facBldg"},
        {"title": "Floor", "width": 50, "dataType":"string", "dataIndx":"facFloor"},
        {"title": "Column", "width": 50, "dataType":"string", "dataIndx":"facColumn"},
        {"title": "Room", "width": 50, "dataType":"string", "dataIndx":"facRoom"},
        {"title": "Class", "width": 50, "dataType":"string", "dataIndx":"facClass"},
        {"title": "Ready", "width": 100, "dataType":"string", "dataIndx":"facReady"}
    ],
    "data": [
        {"facName": "N-100", "facBldg": "N", "facFloor": "1", "facColumn": "", "facRoom": "100", "facClass": "SAR", "facReady": "12-31-2014"},
        {"facName": "A1-11", "facBldg": "M103", "facFloor": "1", "facColumn": "R29", "facRoom": "", "facClass": "DoD", "facReady": "12-31-2014"}
    ]
}

and that works with the following JS for the data, apparently ignoring the 'columns' element.

Code: [Select]

$(function() {         
    var facilityGridColumns = [
        {title: "Name",   width: 100, dataType:"string", dataIndx:"facName"},
        {title: "Bldg",   width:  50, dataType:"string", dataIndx:"facBldg"},
        {title: "Floor",  width:  50, dataType:"string", dataIndx:"facFloor"},
        {title: "Column", width:  50, dataType:"string", dataIndx:"facColumn"},
        {title: "Room",   width:  50, dataType:"string", dataIndx:"facRoom"},
        {title: "Class",  width:  50, dataType:"string", dataIndx:"facClass"},
        {title: "Ready",  width: 100, dataType:"string", dataIndx:"facReady"}
    ];
   
    var facilityGridObject = {
        width: 640,
        height: 400,
        colModel: facilityGridColumns,
        dataModel: {
            location: "remote",
            dataType: "JSON",
            method: "GET",
            getUrl: function() {
                return {url:"data/facilitygrid.json"};
            },
            getData: function(dataJSON) {
                var data = dataJSON.data;
                return {data: dataJSON.data};
            }
        }
    };
    $("#facilityGrid").pqGrid(facilityGridObject); 
});

Long term, I'd like to generalize building grids by relying on JSON from restful resources for definition and content. For now, a code fragment pointing in the right direction would be really nice.