Use JSON to define colModel

[sandman]

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.

[paramvir]

I'm not sure what code fragment you are looking for but you have answered your question yourself.

step 1) use $.ajax API to fetch file.

2) in success callback construct the definition of grid with colModel/ columns and data from the JSON response.

$.ajax({success: function (response ){
  var colModel = response.columns;
  var data = response.data;
  //define the grid constructor and initialize it.
}
});

[sandman]

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.

[paramvir]

It's dataModel: {data: gridJSON.data} instead of dataModel: gridJSON.data

[sandman]

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

[MK]

Hello Team,
Its really helpful tool.

I also need something similar i.e fetching json from remote and using this to build grid and use this to populate data.
I tried the same code as suggested here in this thread; however its not working for me. Is there anything I am missing or doing terribly wrong? Neither it draws the grid, nor does it populate.

$(function() {
    var gridObject = {};
    var buildGrid = function(gridJSON) {
    /*alert("buildGrid");
    alert(JSON.stringify(gridJSON));
    alert(gridJSON.columns);
    */
        gridObject = {
            width: 640,
            height: 400,
            colModel: gridJSON.columns,
            dataModel: {data: gridJSON.data}
        };
        //alert(JSON.stringify(gridObject));         
   };
    $.ajax ({
        url: 'ttlookupcol.json',
      datatype: 'json',
      success: buildGrid
    });   

    $("#grid-json").pqGrid(gridObject);
});


my json file i am using is:
{
    "columns": [
        {"title": "CODE", "width": 100, "dataType":"string", "dataIndx":"CODE", editable: false},
        {"title": "DESCRIPTION", "width": 50, "dataType":"string", "dataIndx":"DESCRIPTION", editable: false}       
    ],
    "data": [
        {CODE: "GROSC", DESCRIPTION: "Client Chain (UK) Ltd"},
   {CODE: "GROST000", DESCRIPTION: "GROSProperties (UK)"},
   {CODE: "GROST001", DESCRIPTION: "GROS Property Two UK Ltd"},
   {CODE: "GROST002", DESCRIPTION: "GROS Properties Ltd 2"},
        {CODE: "GROST003", DESCRIPTION: "GROS Stow Limited"}
        ]
}

Please help me with this.

[paramvir]

If it's not drawing the grid, then you need to check path of dependency files and look for errors in the browser console.

[MK]

Thanks for looking into this.
I checked the dpendency files and they seem all ok.
Also  found "$.ajax ({ " is somehow not working ok. I replaced this with Jquery  "$.getJSON('ttlookupcol.json'," and then it draws the grid(need this in a popup) and also populates ok.
$(function () {

    /*Display gridObjectInPopup when lookup button clicked*/
    $("#showlookup").click(function (evt) {
        $.getJSON('ttlookupcol.json',

        function (gridJSON) {
            gridObject = {
                width: 640,
                height: 400,
                selectionModel: { type: 'cell'},
                colModel: gridJSON.columns,
                dataModel: {
                    data: gridJSON.data
                }
            };
            gridObject.cellSelect = function (evt, obj) {
                var dataCell = obj.data[obj.rowIndx][obj.dataIndx];
            $("#clientcode").attr('value', dataCell);
                $("#pq-grid-in-popup-dialog").dialog('close');
            };

            //$("#pq-grid-in-popup-dialog").dialog('destroy');
            $("#pq-grid-in-popup-dialog").dialog({
                height: 300,
                width: 500,
                create: function (evt, ui) {
                    //$(this).detach().appendTo($("#pq-dialog-cont"));
                },
                open: function (evt, ui) {
                    var $grid = $("#grid_in_popup_grid");
                    var ht = $grid.parent().height() - 2;
                    var wd = $grid.parent().width() - 2;
                    //alert("ht=" + ht + ", wd=" + wd);
                    if ($grid.hasClass('pq-grid')) {
                        $grid.pqGrid("option", {
                            height: ht,
                            width: wd
                        });
                    } else {
                        gridObject.width = wd;
                        gridObject.height = ht;
                        $grid.pqGrid(gridObject);
                    }
                    //refresh the selections made before closing grid if any.
                    //$grid.pqGrid("selection", { type: 'cell', method: 'refresh' });
                },
                close: function () {
                    var $grid = $("#grid_in_popup_grid");
                    $grid.pqGrid('destroy');
                },
                resizeStop: function (evt, ui) {
                    var $grid = $("#grid_in_popup_grid");
                    var ht = $grid.parent().height();
                    var wd = $grid.parent().width();
                    $grid.pqGrid("option", {
                        height: ht - 2,
                        width: wd - 2
                    });
                },
                show: {
                    effect: "blind",
                    duration: 500
                },
                hide: {
                    effect: "explode",
                    duration: 500
                }
            }); /*$("#pq-grid-in-popup-dialog").dialog({*/
        });
        /********************/

    });
});


However I am now facing another problem.
I need this functionality to support Remote data(json) plus remote sorting plus rempote paging. I tried the remote sorting demo example; and function geturl does'nt bring anything back. I am fetching same json file as I have fetched with "$.getJSON('ttlookupcol.json',";  and thus assume that location is ok. Or otherwise, how do I enable remote sorting by using the same code as above?

Could somebody please help me this;