[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

[Author]

Posts