Odd behaviors with Grid when paging

[choni]

Hello, I have the following problems with paging on a Grid:

1. I have to click the forward and back buttons twice in order for the page to change, pressing them only once displays the loading image animating but doesn't actually changes the page number in the box.

2. it doesn't do any paging at all!!! I mean, it always shows all the records, no matter what the pageSize value.

3. The text of the "Page" part in the toolbar doesn't change when I set the beforePageText property.


this is the code:





...
dataModel = new YAHOO.ext.grid.JSONDataModel(schema);
dataModel.setDefaultSort(colModel, 1, "ASC");
dataModel.pageSize = 8;
dataModel.pageUrl = 'data.aspx';


elGrid = new YAHOO.ext.grid.Grid('grid', dataModel, colModel);
elGrid.allowResize = false;

elGrid.trackMouseOver = true;

elGrid.render();

elGrid.getSelectionModel().addListener('selectionchange', showDetailsSel);


var v = elGrid.getView();
v.beforePageText = 'Pagina'; //this line does't seem to work either, I mean, the default text "Page" is showing.




Regards, Choni

[tryanDLS]

I don't see your DM load call. Are you doing loadPage or load?

[choni]

yeah, later on I call dataModel.loadPage(1); so that's not the problem.

[tryanDLS]

I suggest stepping thru the load fn with a debugger. Make sure your paging parms are getting passed to the server. The fact that you're getting all rows back says the server isn't getting the paging parms or isn't handling them correctly.

[Animal]

Two things.

1 Use Firefox with the Firebug console showing.

2. Use connection-debug.js instead of connection.js while developing. connection.js swallows Exceptions thrown in Connect methods. Exceptions will then be logged to the console.

With firebug you can also examine the XMLHttpRequests to check they're working and contain what you expect.

You should really use initPaging to set up paging:

http://www.yui-ext.com/deploy/yui-ext/docs/output/YAHOO.ext.grid.JSONDataModel.html#initPaging

[choni]

oops, looks like I had made a typo in the server side, not a Js problems

thanks folks, still, i need to ckeck if that solves de double-pressing problem of the buttons in order to change page.

[choni]

Well, it didn't.

Let's see, I'm kind of confused here. If the page returns only the records I want to show, say, 10, how would the dataModel know about the total records the query returned in the server?? Can anyone explain to me the differece between getRowCount() and getTotalRowCount() ?? and how the process works?? it looks to me like getTotalRowCount shoud return the total results found, is' it?? now, if it is, how does it know it?? I get 10 records and no indication that there are more pages, when the actual query on the server returns 22 records, I deliberately send only 10, that's ok, but, from the datamodel perspective, how would it know there are more pages??

I know I may be asking some dummy questions, but I dont quite know all about the Grid and DataModel components yet, so I must be missing something.

Another thing, I still have to press the buttons twice SOMETIMES to move forward or backwrds, but not always, for example, from 1 to 2, I have to press twice, but from 2 to 3, it works fine.

and when I refered to a mistake in the documentation I meant that if you check it, it says...

getRow() : Array
Returns the column data for the specified row.

Isn't there a Id parameter missing?? I think jack should check that out in the docs.

Regards, Chony.

[choni]

Ok, getting closer to the problem here... first, take a look at the code>





dataModel = new YAHOO.ext.grid.JSONDataModel(schema);
dataModel.setDefaultSort(colModel, 1, "ASC");
dataModel.initPaging('data.aspx', 10);

elGrid = new YAHOO.ext.grid.Grid('grid', dataModel, colModel);
elGrid.allowResize = false;

elGrid.trackMouseOver = true;


elGrid.render();

elGrid.getSelectionModel().addListener('selectionchange', showDetailsSel);

var v = elGrid.getView();
v.beforePageText = 'Pagina';

that last line doesnt work!!! it still shows 'Page' instead, but lets go on...

to do the search, I do this...




dataModel.baseParams['query'] = wholeQuery;
dataModel.loadPage(1);


var total = dataModel.getTotalRowCount();
if (total > 0) {


and here is the strange part... 'total' returns 0, and somehow... it passes the condition!!!!! Firebug tells me it equals 0, I write an alert, and it returns 0, but still... it enters the IF !!! how's that possible??

and one more thing, once the grid shows the result, if I order or change the page number.. then 'total' does have a value different than 0...

I'm really going nuts here!!!!

[choni]

Well, looks like I fixed one problem, and it was the one with the strange behaviour of the condition, the thing is that we have to remember that when we load the data model, it asyncrounsly executes de load method, but the actual flow of the program continues, so, when the condition is reached, the datamodel hasnt finished loading yet, as it can take some time, so, the the row count return 0 at that time, but some miliseconds after, the model actually loads, and the data is returned.
I fixed this with this line>

dataModel.addListener('load', showResults);

now, the thing is, the function never fires! I tried placinf and alert in there, but nothing happens, I also tried with the datachanged event, but still the same results.

I suspect many of the problems I described in my previous postings relate to this one here, and they perhaps will be fixed when I get to get this working,so?? any idea??

[Animal]

Looking at the code (!!!)

It looks like you have to override getRowCount in your JSONDataModel. Otherwise it inherits the one which just returns data.length.

I think there's a problem with JSONDataModel. The row count should be returned in the JSON, and pulled out by the initial load call.

[tryanDLS]

You may have a scoping problem with your showResults method - you many need to change your listenter to pass 'this.showResults' and also pass 'this' and true as 3rd/4th args - look at the addListenerer doc.

[choni]

I found the solution! it turns out that all the problems were because my overriding of the getTotalRowCount() as Animal told me, only I had some bad code in there and it was a mess. After diving into the datamodel code, I discover that putting the property totalProperty in the schema, the getTotalRowCount looks for it in the JSON response and it works like charm, so, my schema now looks like this>



schema = { root: 'value',
id: 'ASIN',
fields: ['Foto', 'NombreCompleto', 'Tipo', 'Usuario' ,'Sexo'],
totalProperty:'total'
};

That's it! no overriding, no changes to the code, just add that line and some server code to write the attribute in the JSON resonse and that's it.

I still have one problem though, the grid is used to show people, a listing of them, when I click on a row, I have a ContentPanel which slides in and shows that persons details, I read the data like this>

var persona = dataModel.getRow(id).node;
divName.innerHTML = persona.NombreCompleto;
...
...


Now, that causes problems when paging. I have to click twice in order for the page to advance or move backward, it is as if the reference to the dataModel doesnt let it reload or somehting like that.

I tried writing persona = null after that, but the same.

Any idea?

[choni]

Hi guys, I solved the problem. I replaced addListener, of the dataModel, for bufferedListener, and it solved the problem. I was actually looking to achieve something else, trying to trigger an event some milliseconds after the action, and to my surprise, that also fixed the problem with the paging, still dont know why. :?

I have only one problem left, and it is that the text of the toolbar doesnt update when I write





elGrid.getView();
v.beforePageText = 'Pagina';


One more thing, IE 6.0 fails to stretch the paging grid so it covers the whole ContentPanel, so when it's empty, both bars, header and toolbar, appear together at the top, when the grid has some data, the toolbar goes down, but still doesnt stretches and snaps to the bottom of the Panel as it does in Firefox.

Is this a bug of the grid in IE?