Search Toolbar Clarification

[aravindtrueMember]

Hi,

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/toolbar.htm

I am not getting it.

var dataAdapter = new $.jqx.dataAdapter(source,
{
formatData: function (data) {
data.name_startsWith = $(“#searchField”).val();
return data;
}
}
);

is ‘data.name_startsWith’ is the predefined property?

Where are we providing the column datafield to be searched. If I want to search country name, what I have to do?

Please help me on this.

Regards,
Aravind.

[aravindtrueMember]

I figured it out, its really a silly question

Regards,
Aravind.

[shaserMember]

I’m have the same problem what you doing?

[aravindtrueMember]

Shaser, this is a remote search example. dataAdapter can able to format the data, but it doesn’t have in-build filter functionality. The properties where the ‘data’ holds are the query string of the ajax request url.

http://ws.geonames.org/searchJSON?callback=jQuery18204505064601544291_1355147014159&filterscount=0&groupscount=0&pagenum=0&pagesize=10&recordstartindex=0&recordendindex=18&featureClass=P&style=full&maxRows=20&name_startsWith=a

Here, geonames.org has the query string called ‘name_startsWith’, which filters out and sends the response.

You can simply use the filters,

var filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
filtergroup.addfilter(filter_or_operator, filter1);
$(“#Grid”).jqxGrid(‘addfilter’, datafield, filtergroup, true);

Regards,
Aravind.

[maeannMember]

In this example the Grid is bound to a Remote Data.

$(document).ready(function () {
var theme = getTheme();
// prepare the data
var data = new Array();
data[0] ={ countryName: ‘USA’,name: ‘oliver green’, population: ‘sdfdgfd’,continentCode:’JA-BRSH-0000795′,adminName1:’IBN BATTUTA MALL LLC’ };
data[1] ={ countryName: ‘UAE’,name: ‘clark kent’, population: ‘ggdfgfd’,continentCode:’JA-JUCD-0000921′,adminName1:’BURJ AL ARAB HOTEL’ };
data[2] ={ countryName: ‘USA’,name: ‘lex luthor’, population: ‘gfdgdfgdg’,continentCode:’DE-NRCD-0006571′,adminName1:’MEYDAN HOTEL(G+M+10)’ };
data[3] ={ countryName: ‘UAE’,name: ‘lana lang’, population: ‘gfdgfgfdgdfg’,continentCode:’DE-ALQS-0005344′,adminName1:’DUBAI WOMENS COLLEGE(HIGHER COLLEGES OF TECHNOLOGY)’};
data[4] ={ countryName: ‘USA’,name: ‘chloe suvillian’, population: ‘dfgdfgfgcontinent’,continentCode:’JA-JUCD-0000532′,adminName1:’MADINAT JUMEIRAH ARABIAN RESORT-DUBAI’};
data[5] ={ countryName: ‘UAE’,name: ‘pette ross’, population: ‘fgfgfg’,continentCode:’JA-JUCD-0001763′,adminName1:’ATLANTIS HOTEL’};

var source =
{
localdata: data,
datatype: “array”,
async: false

};
var dataAdapter = new $.jqx.dataAdapter(source,
{
formatData: function (data) {
data.name_startsWith = $(“#searchField”).val();
return data;

}
}

);

$(“#jqxgrid”).jqxGrid(
{
width: 680,
source: dataAdapter,
theme: theme,
columns: [
{ text: ‘City’, datafield: ‘name’, width: 170 },
{ text: ‘Country Name’, datafield: ‘countryName’, width: 200 },
{ text: ‘Population’, datafield: ‘population’, cellsformat: ‘f’, width: 170 },
{ text: ‘Continent Code’, datafield: ‘continentCode’, minwidth: 110 }
],
showtoolbar: true,
autoheight: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“”);
var span = $(“Search City: “);
var input = $(“”);
toolbar.append(container);
container.append(span);
container.append(input);
if (theme != “”) {
input.addClass(‘jqx-widget-content-‘ + theme);
input.addClass(‘jqx-rc-all-‘ + theme);
}
input.bind(‘keydown’, function (event) {
if (input.val().length >= 2) {
if (me.timer) clearTimeout(me.timer);
me.timer = setTimeout(function () {
dataAdapter.dataBind();
},300);
}
});
}
});

});

guys anyone can help me with this toolbar..cant able to search the hard coded data in array..trying to make the same as this one
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/toolbar.htm,…instead of jsonp file I made it hardcoded data…please help me this..thanks in advance..

—mae

[Peter StoevKeymaster]

Hi mae,

For filtering of data, you may look at this sample: grid filtering. You can build a filter using the input field’s value and apply it to the Grid.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[shaserMember]

Yes thank you I used that.

[Author]

Posts