PDA

View Full Version : Grid data not rendering after successful HttpProxy call? (ASP.NET related?)



mvelasquez
6 May 2010, 11:56 AM
I have a grid in an .ascx user control, named "GridControl.ascx".
this user control is rendered in an ASP.NET MVC view using "Html.RenderPartial("GridControl", model);".

when the view loads, the HttpProxy is successfully called, as i'm setting a breakpoint on the server side where the Http post is received.

i pass back the XML serialized string to the HttpProxy call. i call ".load()" on the store.
but by this point the grid has already been rendered on the page, empty.

i know i'm passing the XML serialized string back to the HttpProxy call but the data is not being rendered.

here is my code:



Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var myData = new Ext.data.Store({
// load using HTTP
proxy: new Ext.data.HttpProxy({ url: '<%=URLHelper.URLRewrite("~/Documents/GetGridDocumentXml")%>' + '/' + '<%=((KTClient.Models.DocumentsModel)Model).DrawerId %>' }),
// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have a "Document" tag
record: 'Document',
id: 'Id',
//totalRecords: "recCount"
}, [
// set up the fields mapping into the xml doc
'DocType', 'Versions', 'Locked', 'Comment', 'DocName', 'RetDate', 'Pages', 'User', 'TagDate', 'ScanDate', 'TagNum', 'ModDate'
]),
// turn on remote sorting
remoteSort: true
});
myData.setDefaultSort('ModDate', 'desc');
myData.load();
/**
* Custom function used for column renderer
* @param {Object} val
*/
function change(val) {
if (val > 0) {
return '<span style="color:green;">' + 'X' + '</span>';
} else if (val <= 0) {
return '';
}
return val;
}
function lock(val) {
if (val > 0) {
return '<img src="<%=URLHelper.URLRewrite("~/images/lock.jpg")%>" alt="Locked">';
} else if (val <= 0) {
return '';
}
return val;
}
function doctype(val) {
return '<img src="<%=URLHelper.URLRewrite("~/images/doc_types/icon_' + val + '.gif")%>" alt="' + val + '">';
return val;
}
/**
* Custom function used for column renderer
* @param {Object} val
*/
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{ name: 'doctype' },
{ name: 'versions', type: 'boolean' },
{ name: 'locked', type: 'boolean' },
{ name: 'comment' },
{ name: 'docname' },
{ name: 'retdate' },
{ name: 'pages', type: 'int' },
{ name: 'user' },
{ name: 'tagdate' },
{ name: 'scandate' },
{ name: 'tagnum' },
{ name: 'moddate' },
]
});
// manually load local data
store.loadData(myData);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{ header: 'Doc Type', width: 40, sortable: true, renderer: doctype, dataIndex: 'doctype' },
{ header: 'V', width: 15, sortable: true, renderer: change, dataIndex: 'versions' },
{ header: 'L', width: 15, sortable: true, renderer: lock, dataIndex: 'locked' },
{ header: 'Comment', width: 75, sortable: true, dataIndex: 'comment' },
{ header: 'Name', width: 125, sortable: true, renderer: payment, dataIndex: 'docname' },
{ header: 'Retention Date', width: 75, sortable: true, renderer: Ext.util.Format.dateRenderer('Y/m/d H:i:s'), dataIndex: 'retdate' },
{ header: 'Pages', width: 40, sortable: true, dataIndex: 'pages' },
{ header: 'User', width: 75, sortable: true, dataIndex: 'user' },
{ header: 'Tagged', width: 75, sortable: true, renderer: Ext.util.Format.dateRenderer('Y/m/d H:i:s'), dataIndex: 'tagdate' },
{ header: 'Scanned', width: 75, sortable: true, renderer: Ext.util.Format.dateRenderer('Y/m/d H:i:s'), dataIndex: 'scandate' },
{ id: 'tagnum', header: 'Tag Number', width: 75, sortable: true, dataIndex: 'tagnum' },
{ header: 'Modified', width: 75, sortable: true, renderer: Ext.util.Format.dateRenderer('Y/m/d H:i:s'), dataIndex: 'moddate' }
],
stripeRows: true,
autoExpandColumn: 'tagnum',
height: 320,
width: 670,
title: 'Documents',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});
// render the grid to the specified div in the page
grid.render('grid');
});