adding a new paramater to the post request from a datamodel

[jbowman]

I wanted to include some filtering support in a paged grid view by also passing a filter variable along with the post request. Here's how I did it.


dm = new YAHOO.ext.grid.JSONDataModel({
root: 'Users',
totalProperty: "totalCount",
id: 'id',
fields: ['username', 'email', 'level', 'birthday', 'join_date', 'last_login']
});
dm.initPaging('/ci/admin/users_list', 50);
dm.setDefaultSort(cm, 0, 'DESC');
grid = new YAHOO.ext.grid.EditorGrid('users_grid', dm, cm);
grid.getSelectionModel().clicksToActivateCell = 2;
grid.render();

dm.paramMap['filter'] = 'filter';

dm.createParams = function(pageNum, sortColumn, sortDir, filter){
var params = {}, map = this.paramMap;
for(var key in this.baseParams){
params[key] = this.baseParams[key];
}
params[map['page']] = pageNum;
params[map['pageSize']] = this.getPageSize();
params[map['sortColumn']] = (typeof sortColumn == 'undefined' ? '' : sortColumn);
params[map['sortDir']] = sortDir || '';
params[map['filter']] = filter || '';
return params;
};

dm.loadPage = function(pageNum, filter, callback, keepExisting){
var sort = this.getSortState();
var params = this.createParams(pageNum, sort.column, sort.direction, filter);
this.load(this.pageUrl, params, this.setLoadedPage.createDelegate(this, [pageNum, callback]),
keepExisting ? (pageNum-1) * this.pageSize : null);
};

dm.loadPage(1, 'temp');


This will now send a post request that looks like this -


page=1&pageSize=50&sortColumn=0&sortDir=DESC&filter=temp


This is just a start, as I'll have to figure out how to carry over that filter value for all the requests to loadPage and such, but figured I'd throw the start out there for anyone else looking to do something similar and trying to find a starting point.

[jack.slocum]

I hate to tell you this, but you could have said:

dm.baseParams['filter'] = 'temp';
dm.loadPage(1);

and had the same result. You can add/remove custom parameters using the baseParams object.

Modifying the signature of loadPage is a bad idea since the signature is expected for internal loading (like the PagedGridView).

[jbowman]

nope, I'm glad you did tell me :) As before I quit messing with it for the night, I was looking at everything else I was going to have to change to get it to go through :)

[rodiniz]

Or you could use my gridExtensions
/*
©2006 Rodrigo Diniz
www.rodrigodiniz.qsh.eu
You may use this code in anyway you like but do not remove this copyright
*/
//Filter Helper
YAHOO.ext.grid.Grid.prototype.filter=function(filterCol,filterValue){
var baseParams={'filtercol': filterCol,'filterValue':filterValue};
this.dataModel.baseParams = baseParams;
this.clearSelection();
this.dataModel.loadPage(1);
}
/*
Helper gets the data in the selected row as an object
with properties names that match the FIELDS
*/
YAHOO.ext.grid.Grid.prototype.getRowData=function(){
var dm = this.dataModel;
var node = dm.getNode(this.getSelectedRowIndex());
var fields=dm.schema.fields
var objRet= new Object();

for(var i=0;i< fields.length;i++){
objRet[fields[i]]=dm.getNamedValue(node,fields[i]);
}
return objRet;
}
YAHOO.ext.grid.Grid.prototype.getAllRows=function(){
var objArray= new Array();
var dm=this.dataModel;
var len= dm.getRowCount();
var fields=dm.schema.fields
for(var i = 0; i < len; i++){
var node= dm.getNode(i);
objRet= new Object();
for(var j=0;j< fields.length;j++){
objRet[fields[j]]=dm.getNamedValue(node,fields[j]);
}
objArray.push(objRet);
}
return objArray;
}
//helper --lets the grid know that no row is selected
YAHOO.ext.grid.Grid.prototype.clearSelection=function(){
this.selModel.clearSelections();
};

[jbowman]

I did this and it works


dm.baseParams['filterField'] = '';
dm.baseParams['filterValue'] = '';

var toolbar = grid.getView().getPageToolbar();
toolbar.add("Filter");
var filterFieldSelect = document.createElement('select');
filterFieldSelect.id = 'filterName';
var blankOption = document.createElement('option');
filterFieldSelect.appendChild(blankOption);

for (var i = 0, len = cm.config.length; i < len; i++)
{
var op = document.createElement('option');
var opVal = cm.config[i].header;
YAHOO.log(opVal);
op.value = opVal;
op.innerHTML = opVal;
filterFieldSelect.appendChild(op);
}

toolbar.add(filterFieldSelect);
toolbar.add("by");
var filterText = document.createElement('input');
filterText.type = "text";
filterText.id = "filterVal";
toolbar.add(filterText);
toolbar.addButton({
className: 'filter',
text: "Go!",
click: function(){
dm.baseParams['filterField'] = filterFieldSelect.value;
dm.baseParams['filterValue'] = filterText.value;
dm.loadPage(1)
}
});

dm.loadPage(1);


Edit: Removed some default values I had set for when I was first setting it up

[jbowman]

err I could set those 2 strings at the beginning to blank :oops:

[stonecracker]

nope, I'm glad you did tell me :) As before I quit messing with it for the night, I was looking at everything else I was going to have to change to get it to go through :)

I spent a evening on finding out how to make my form-based-filter work and fall into a solution:

1. pick out YAHOO.util.Connect.setForm as a standalone method to process form into a array
2. set baseParams with the array

of course, you have to turn your filter into a form before that.