PDA

View Full Version : JSON Grid Datamodel Example/Help



ojintoad
25 Sep 2006, 11:40 AM
I'm just doing some testing with JSON Data Model and am curious if someone could provide an example of what format the JSON code should be in for that particular model. I've gotten it to work in firefox but not IE.

Here's a code example.

function gridDraw() { var schema = {
root: 'food',
id: 'nothing',
fields: ['name', 'price']
};
var dataModel = new YAHOO.ext.grid.JSONDataModel(schema);
var data = eval('({"food": [{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "banana","price": 9},{"name": "steak","price": 10}]})');
dataModel.loadData(data);
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

jack.slocum
25 Sep 2006, 1:37 PM
That code looks fine. What is the error message you are receiving? Can you post the rest of the grid creation code?

ojintoad
25 Sep 2006, 1:54 PM
I'm not sure how it fixed itself, but it did. Might have been the upgrade to the new version. I guess this can sit as an example of a JSON setup that should work though.

kovtik
2 Oct 2006, 1:09 AM
Please look at the following page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="css/grid.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/yui/yahoo.js"></script>
<script type="text/javascript" src="js/yui/event.js"></script>
<script type="text/javascript" src="js/yui/dom.js"></script>
<script type="text/javascript" src="js/yui/dragdrop.js"></script>
<script type="text/javascript" src="js/yui/animation.js"></script>
<script type="text/javascript" src="js/yui/connection.js"></script>

<script type="text/javascript" src="js/yui-ext/yui-ext.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="grid" style="width:630px;height:250px;overflow:hidden;position:relative;"></div>
<script type="text/javascript">
var Example = {
init : function(){
var schema = {root: "FolderContent", id: "nothing", fields: ["name", "type"]};
var dataModel = new YAHOO.ext.grid.JSONDataModel(schema);
var data = eval("({'FolderContent':[{name:'folder1',type:'Folder'},{name:'folder2',type:'Folder'},{name:'file1.txt',type:'File'},{name:'file2.txt',type:'File'}]})");

var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

var myColumns = [
{header: "name", width: 200, sortable: true, sortType: sort.asUCString},
{header: "type", width: 100, sortable: true, sortType: sort.asUCString},
];
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);

this.grid = new YAHOO.ext.grid.Grid('grid', dataModel, colModel);
this.grid.render();
dataModel.loadData(data);
}
}

YAHOO.util.Event.on(window, 'load', Example.init, Example, true);
</script>
</form>
</body>
</html>

When I ran this page, I recieved an error: 'this.config[...].hidden' is null or not an object. During debugging I saw that this.config.length=3, but this.config contains only 2 elements.
I think that the problem is in my misunderstanding of how to use "id" tag of schema. Could you answer me the following questions:
1) is "id" tag obligatory in schema? If so, what is the format of representing id in JSON data?
2) how can I map data model columns into column model columns? For example, data model contains 3 columns in the order 1-2-3 and I what to render only first and third column. How can I implement this.

Thank you for advance.

jack.slocum
2 Oct 2006, 1:37 AM
You did the id right. If the id isn't present (and "nothing" isn't present) then the row index is used.

The problem is you have an extra comma at the end of your column model def resulting in a 3rd item in config that is null.



var myColumns = [
{header: "name", width: 200, sortable: true, sortType: sort.asUCString},
{header: "type", width: 100, sortable: true, sortType: sort.asUCString}, <---
];


If you remove that comma it will work, your code looks good.

jack.slocum
2 Oct 2006, 1:41 AM
To answer your question about 3 columns in the data and you only want to display 2, you can create a dummy hidden column:



var myColumns = [
{header: "name", width: 200, sortable: true, sortType: sort.asUCString},
{header:'', hidden:true},
{header: "type", width: 100, sortable: true, sortType: sort.asUCString},
];

kovtik
2 Oct 2006, 3:02 AM
To answer your question about 3 columns in the data and you only want to display 2, you can create a dummy hidden column:



var myColumns = [
{header: "name", width: 200, sortable: true, sortType: sort.asUCString},
{header:'', hidden:true},
{header: "type", width: 100, sortable: true, sortType: sort.asUCString},
];
Thanks alot for your answers. As I understand, currently there is no way to change the order of the rendered columns (example is that datasource contains columns 1-2-3 and I need to render it as 3-1). However, I am still intersting how schema "id" tag is represented in JSON format. Could you provide a simple example? Could you tell me how can I retrieve row from Grid by id (not by index)?

jack.slocum
2 Oct 2006, 3:27 AM
Did you see my post (http://www.jackslocum.com/forum/viewtopic.php?p=464#464) above that one? Your problem was an extra comma not the id tag.

I will give you an id example (using your data):



var dataModel = new YAHOO.ext.grid.JSONDataModel({
root: "FolderContent",
id: "fid",
fields: ["name", "type"]
});

var data = eval("({'FolderContent':[
{fid: 1, name:'folder1',type:'Folder'},
{fid: 5, name:'folder2',type:'Folder'},
{fid: 9, name:'file1.txt',type:'File'},
{fid: 2, name:'file2.txt',type:'File'}
]})");

var row = grid.getRowsById(1);
//or
var rows = grid.getRowsById([1, 5]);


You data model doesn't have to match the structure of the json data and can use just the data it wants (in any order) but your column model must map to your data model (although you can hide columns). Does that make sense?

kovtik
2 Oct 2006, 3:54 AM
Did you see my post (http://www.jackslocum.com/forum/viewtopic.php?p=464#464) above that one? Your problem was an extra comma not the id tag.Yes, I saw it, I removed comma and now it works fine :) . I wrote my questions after I fixed this bug. I just wanted to know how I can use this id. Thank you for your answers.
You data model doesn't have to match the structure of the json data and can use just the data it wants (in any order) but your column model must map to your data model (although you can hide columns). Does that make sense?Yes, it does.

jack.slocum
2 Oct 2006, 3:59 AM
Great. If you have any more questions I am almost always around ;)

soad
12 Jan 2007, 2:34 AM
I started to play with JSONDataModel and encountered similar problem: Firefox, IE, and Opera displayed different number of rows (only FF displayed correct number). Then I found this thread but unfortunately didn't find the answer here.

Well, a bit later I found out that this problem is due to different ways theses browsers cache pages. In order to prevent caching issues one can use the following code:



// grid intialization, etc
dataModel.load("mydata.json.txt?d=" + (new Date()).getTime());


The trick is that URL above is unique every time you load you data, which prevents caching in all the browsers.

Hope this helps.[/code]

saJoshua
26 Dec 2007, 3:08 AM
I was also experiencing unwelcome caching when using JSON. I had tried the extra querystring parameter without success.

What worked for me was calling destroy on any grids that may exist before initialising them again.



if(historicalExpenditureGrid){
historicalExpenditureGrid.destroy();
}

var historicalExpenditureGrid = new Ext.grid.GridPanel({
title : 'Historical Expenditure',
store : store,
cm : cm,
viewConfig: {
forceFit:true,
autoExpandColumn:0
},
cls : 'report-grid',
disableSelection:true,
autoHeight:true,
autoWidth:false,
iconCls:'icon-grid'
});

var siteSummaryPanel = new Ext.Panel({
border: false,
tbar : new ReportToolbar(),
items : historicalExpenditureGrid
});

siteSummaryPanel.render('divSiteSummary');

sanjaybh
22 Feb 2010, 6:10 AM
Great. If you have any more questions I am almost always around ;)
Hi,

I am trying something, need your help for it, it will be great if you can help me.

I am sending ajax request to the server and getting one object with all the required values, my requirement is to populate a editable grid with those values, plz have a look to the code

success: function(result, request) { // after sending ajax request get values in an object
var jsonData = Ext.util.JSON.decode(result.responseText);
var arrayOfObjects = jsonData; // json for this mentioned below
alert(arrayOfObjects ) // [object Object]
var m = updateGridwithValues(arrayOfObjects);
}

var updateGridwithValues = function (arrayOfObjects){
var gdStore = arrayOfObjects;

var colModel = new Ext.grid.ColumnModel([
{header: "SNo", dataIndex: 'sno', width:50},
{header: "Combination_tbl", dataIndex: 'routelist_tbl', width:200},
{header: "Listing_tbl", dataIndex: 'matrix_tbl', width:180},
{header: "Matrix_tbl", dataIndex: 'lcrid', width:200}
]);

var oldStore = Ext.getCmp('modifyCust');
oldStore.reconfigure(gdStore, colModel);
//gdStore.load(); // not sure how to populate values to the grid, it an editable grids
};


// JSON response is like this

{
getScndLastRecordSetUsingSP:[
{"sno":1,"routelist_tbl":"IP_INTER_COMBINATIONS","matrix_tbl":"IP_INTER_LISTINGS","lcrid":13},
{"sno":2,"routelist_tbl":"IP_INTRA_COMBINATIONS","matrix_tbl":"IP_INTRA_LISTINGS","lcrid":14},
{"sno":3,"routelist_tbl":"PSTN_INTER_COMBINATIONS","matrix_tbl":"PSTN_INTER_LISTINGS","lcrid":34},
{"sno":4,"routelist_tbl":"PSTN_INTRA_COMBINATIONS","matrix_tbl":"PSTN_INTRA_LISTINGS","lcrid":35}
]
}

// Have one editable grid, need to put these values inside this grid and should be able to edit them, i know how to edit though


regards,
Sanjay