Start Building Professional
Web Apps Today

Text Filter in Paging Mode

hello
i am using dhtmlxGrid_pro_v15_71114.
i want to create a text_filter with paging mode enabled.

this is how i initialize the grid:

<code>

textListGrid = new dhtmlXGridObject('textListDiv');
textListGrid.setImagePath('webresources/JS/dhtmlxGrid/codebase/imgs/');
textListGrid.enablePaging(true,3,null,'textListpagingAreaDiv',false,'recinfoArea');
textListGrid.enableHeaderMenu();

//=== THIS IS HOW I CREATE THE FILTER ===
textListGrid.attachHeader('#text_filter,,,');


textListGrid.init();
textListGrid.enableAutoHeight(true,600,true);
textListGrid.setSkin('light');
textListGrid.setXMLAutoLoading('http://localhost:8080/FooBar/Backend/AjaxRequest?AjaxRequest=true&AjaxCommand=LoadTeamWerkstattTextsListCommand');
textListGrid.loadXML('http://localhost:8080/FooBar/Backend/AjaxRequest?AjaxRequest=true&AjaxCommand=LoadTeamWerkstattTextsListCommand');
textListGrid.setSizes();
textListGrid.setOnRowSelectHandler(doOnRowSelected_textList);
textListGrid.setDateFormat('d.m.y');
textListDataProcessor = new dataProcessor('http://localhost:8080/FooBar/Backend/AjaxRequest');
textListDataProcessor.enableDataNames(true);
textListDataProcessor.setUpdateMode('cell');
textListDataProcessor.defineAction('error',function(obj){if (obj && obj.firstChild){alert(obj.firstChild.nodeValue);} textListDataProcessor.stopOnError = true;return false;});
textListDataProcessor.defineAction('OnUpdated',function doOnUpdated(action){var id = action.getAttribute('sid');doOnRowSelected_textList(id);});
textListDataProcessor.setTransactionMode('GET');
textListDataProcessor.init(textListGrid);
textListDataProcessor.setOnBeforeUpdateHandler(doOnBeforeUpdate_textList);
function doOnBeforeUpdate_textList(id,op) {textListGrid.setUserData(id,'AjaxRequest','true');textListGrid.setUserData(id,'AjaxCommand','UpdateTeamWerkstattTextCommand');var bo = function(){};var numColumns = textListGrid.getColumnsNum();for (var i=0;i<numColumns;i++){var property = textListGrid.getColumnId(i);var value = textListGrid.cellById(id,i).getValue();if (value == 'null') value = null;cmd = 'bo.prototype.'+property+' = value;';eval(cmd);}bo.prototype.id = id;var boJSON = JSON.stringify(new bo());textListGrid.setUserData(id,'JsonObject','{at.symbion.hw3.domain.teamwerkstatt.TextEntry:'+boJSON+'}');return true;}
function doOnRowSelected_textList(rowId){document.getElementById('TeamWerkstattListForm:textEntryId').value = rowId;document.getElementById('TeamWerkstattListForm:showTextDetails').click();}

</code>

Everything (including the filter) is rendered correctly on the first page of the list. After i click on the second Page in the pagingAreaDiv the rows of the 2nd page are displayed but the filter disapears. Is this filter supposed to work in paging mode? Am I missing anything?
thanks a lot for your help
BR
stefan.

>> Is this filter supposed to work in paging mode?
Yes, filters must work in paging mode

>>Am I missing anything?
The code looks correct and the same initialization code works correctly in local samples.

Please try to use attached js file instead of original one - it is latest version with all fixes up to date.

hi, thanks for your fast reply!

i tried your new filter js but that did not fix the problem.
actually the problem seems to be slightly different as i described it.
i attach some screenshots to this posting...

screenshot1: list renders correctly, filter is displayed and works. then i click on the next page...
screenshot2: filter disapearsy, list did not change the page. then i click again on the next page...
screenshot3: list changed to 2nd page. filter still gone...

i also attached the html sourcecode.
as i am writing a Java Server Faces component that generates the dhtmlx code, the code ist not really reader-friendly. i should also mention that no javascript error at all occurs.
i tested it with Firefox 2.0.0.12 and IE 6.0 - same behaviour.

thanks!
BR
stefan.

As far as I can see you init configuration from XML ( right ? )
In such case next scenario is possible
a) first chunk of data loaded , all correctly initialized
b) second page selected
c) because not all data loaded on client side - request to server side sent
d) server side data return additional or empty XML and returns configuration block again
e) because configuration block found - structure of grid reinitialized including header line, which removed

Please check how you code works, it must not return configuration headers for any additiona XML requests.

I will investigate your source code more deeply, but it seems as most possible reason of problem.

You were perfectly right. I always sent <head>...</head> to the client.
I tested it without sending the headers and it works.
I am not really sure how to solve this problem...
How can i find out from the http request params if i should sent the headers or not. As far as i can see, there are two params "rowsLoaded" and "lastid".
I cannot base my condition on rowsLoaded as it equals in 2 cases 0:
case 1:  initial load
case 2: filter is triggerd (no matter on what page i am) ?!

thanks
stefan.

You can use next code while grid initialization

textListGrid.setXMLAutoLoading('http://localhost:8080/FooBar/Backend/AjaxRequest?AjaxRequest=true&AjaxCommand=LoadTeamWerkstattTextsListCommand&head=false');
textListGrid.loadXML('http://localhost:8080/FooBar/Backend/AjaxRequest?AjaxRequest=true&AjaxCommand=LoadTeamWerkstattTextsListCommand&head=true');

The url set by loadXML  will be used for initial data loading and may include "head" section
The url set by setXMLAutoLoading will be used for additional data requests, and must not have "head" in response.
By adding custom parameter for both urls, you can easily separate them on server side.