PDA

View Full Version : Getting Loading ... message on Grid if no records are found



natts_82
14 Dec 2009, 2:34 AM
Hello Gurus,

I am getting 'Loading....' message if there is no data found on the Grid. I am using Ext.ux.DynamicGridPanel with Ext.PagingToolBar.

Also, suppose that I have performed a search, and it yields say, certain x number of records. Now, if I search again with different set of parameters, which is suppose to not show any results in the grid (because there is no data returned from the server for the search criteria), still the old data is shown. I should ideally get 'no records to display' which I configured in PagingToolBar.

The code snippet for the Panel and Toolbar is:


var handleCallbackAction = function(action){

tabPanel = Ext.getCmp('assetPanel').findById('assetgridTabs');
tableName = Ext.getCmp('tableNamesCB').getValue();
gridId = tableName+'grid';
tabPanel.show();
var tab = tabPanel.items.find(
function(i){
return i.title == tableName;
}
);

var toolbar = new Ext.PagingToolbar({
id:gridId+'bbar',
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying Records {0} - {1} of {2}',
emptyMsg: "No Records to display"
});
var grid = new Ext.ux.DynamicGridPanel({

id: gridId,
storeUrl: assetGridUrl,
rowNumberer: true,
width: 600,
height: 300
,frame: true

// paging bar on the bottom
,bbar: toolbar
});

if (!tab)
{
tab = tabPanel.add({

title: tableName,
layout:'fit',
items:[grid],
closable:true

});
toolbar.bindStore(grid.getStore());
}
refreshAssetGrid(gridId);
tabPanel.setActiveTab(tab);

};

Please pitch with the advise on the issue.

Thanks in advance.

Best Regards,
Nataraja

14 Dec 2009, 6:08 AM
You can add the grid directly to the tab panel, no need to nest a panel around it.

That said, is your web service returning an empty array if no records are available?

dlbjr
14 Dec 2009, 6:27 AM
//Golobal Object
var Config = {
blank_image_url: 'resources/images/default/s.gif',
load_mask: 'loading data. Please be patient...',
grid_no_data: '<br/><br/><center><div class="no_data">No data available...</div></center>'
// and many other items
};

//Sample Grid
var g = new Ext.grid.GridPanel({
loadMask: { msg: Config.load_mask, store: ds },
viewConfig: { emptyText: Config.grid_no_data },
store: ds,
stripeRows: true,
autoScroll: true,
clicksToEdit: 1,
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
cm: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
{
header: 'id',
dataIndex: 'id',
hideable: true,
sortable: true,
hidden: true,
}, {
header: 'data',
dataIndex: 'data',
hideable: true,
sortable: true,
hidden: false,
width: 120
}])
});

natts_82
14 Dec 2009, 11:46 PM
Hi Garcia and Dlbjr,

Many thanks for your responses.

Garcia,

The JSON string is as follows, when there are no records being fetched from my service:
List of Map:[]
convertAndSaveGridDataToInputStream JsonString:{"metaData":{"totalProperty":"totalCount","root":"records"},"records":[],"totalCount":0}.

I am looking at your advise, and will update once I have something in place.

Best Regards,
Nataraja

natts_82
28 Dec 2009, 11:27 PM
Hi Garcia,

As mentioned in my previous post, the json response returns empty array as follows.


{"metaData":{"totalProperty":"totalCount","root":"records"},"records":[],"totalCount":0}


Also, can you please clarify what do you mean by nesting -
What I have done is defining a toolbar, and using the toolbar in the DynamicGridPanel and then using the DynamicGridPanel object in the tab panel.

What should I modify to make sure that text specified in emptyMsg gets displayed in the paging toolbar when the DynamicGridPanel does not contain any records?

Kindly advise.

Best Regards,
Nataraja

umarkashmiri
29 Dec 2009, 3:15 AM
Hi Garcia,

As mentioned in my previous post, the json response returns empty array as follows.


{"metaData":{"totalProperty":"totalCount","root":"records"},"records":[],"totalCount":0}
Also, can you please clarify what do you mean by nesting -
What I have done is defining a toolbar, and using the toolbar in the DynamicGridPanel and then using the DynamicGridPanel object in the tab panel.

What should I modify to make sure that text specified in emptyMsg gets displayed in the paging toolbar when the DynamicGridPanel does not contain any records?

Kindly advise.

Best Regards,
Nataraja


Just add the load listener e.g

grid.store.on('load',function(response){});

parse the response to check whether the count is zero or not. if zero hide the mask

Umar Kashmiri ~o)

Condor
29 Dec 2009, 4:42 AM
Since this is a DynamicGridPanel you are also going to have to provide fields and columns in the JSON response.

natts_82
4 Jan 2010, 12:43 AM
Hi Umar, Condor,

Thanks for your responses.

Condor,

My implementation of dynamicGrid is attached. I modified my Json server response to render in this format -



convertAndSaveGridDataToInputStream JsonString:{"metaData":{"totalProperty":"totalCount","root":"records"},"records":[],"totalCount":0,"columns":[]}


But I still get the Loading message in the grid when I dont have records. Do I need to modify the implementation of dynamic grid to handle masking ?

Thanks in advance.

Regards,
Nataraja

Condor
4 Jan 2010, 1:25 AM
Your application has 2 masks (one from the mask() call in onRender and one from the loadMask:true config).

Use either one, but not both.

natts_82
4 Jan 2010, 1:52 AM
Hi Condor,

Thanks for the response. There are a couple of issues - I cannot make remove loadMask property at all, since it results in syntax error; I can make it only false.

If I make it false, and keep the mask() call in the onRender, I get Loading message forever, as I had mentioned earlier.

If I keep the loadMask: true, and comment mask() call in the onRender,
I do not get Loading ... message at all(which I need, and naturally there is no text to specify in the config, hence no message).

The Loading message should come initially and disappear after response is returned to the client( which happens when there are records returned, but does not happen when no records are found ).

Another issue is, suppose that I get, say 5 records on the grid. Next time when I search which would yield zero records,it will not clear the grid and say no records found. It will still show the old result set. However, in the second search, if records are retrieved, then the new result set is shown in the grid.

Kindly advise.

Regards,
Nataraja

natts_82
4 Jan 2010, 11:05 PM
Hi,

The screenshots for the same are attached. Kindly take a look at it and advise. I have not touched the unmask() method though.

Best Regards,
Nataraja

natts_82
6 Jan 2010, 10:37 PM
Hi,

Can someone please advise on why emptyMsg is not being shown, altho no records are found.


emptyMsg: "No Records to display"


I thought that the double quotes was the issue, but changing it into single quotes did not help either.

Regards,
Nataraja

natts_82
7 Jan 2010, 11:19 PM
Hi All,

I finally resolved this issue by giving a generic solution from the server side -

Modified the Json response to make sure it provided everything - columns, fields, records etc.

So, when there are no records - Json response looks like this :



convertAndSaveGridDataToInputStream JsonString:{"metaData":{"totalProperty":"totalCount","root":"records","fields":["NO RECORDS"]},"records":[{"NO RECORDS":"No Records Found"}],"totalCount":0,"columns":[{"header":"NO RECORDS"
,"dataIndex":"NO RECORDS","sortable":true}]}
.

This would ensure that masking / unmasking of the grid works as expected; Since there is atleast one record returned always.

Thanks for everyone who participated and advised.

Regards,:)
Nataraja