jQuery UI Widgets › Forums › Grid › Getting data by search
Tagged: angular grid, filter, getdata, grid, jquery grid, jqxgrid, load, load on demand, Remote data, search
This topic contains 6 replies, has 2 voices, and was last updated by Programmerswe 8 years, 9 months ago.
-
AuthorGetting data by search Posts
-
Hi!
I’m going to have a service that will get the data to populate the grid. However, i do not want the grid to load all the data when I get to the site, but when I’m is filtering / searching for an account, ill send the input to the service to get te accounts containing that search.
Is there a simple way of doing this, if so, could you give me an example? The data can come from Json in the example, but just so that I can se the logic.
Thanks!Hi Programmerswe,
A similar scenario is shown in the demo Toolbar. Please take a look at it.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Almost yeah, its a great start. However the grid is already loaded with the data when you get to the page. It should be empty and just get the data similar to the search in the input field. This should be possible to do somehow though, right?
Hi Programmerswe,
Please take a look at the following solution. We hope it is helpful to you:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var source = { datatype: "jsonp", datafields: [ { name: 'countryName' }, { name: 'name' }, { name: 'population', type: 'float' }, { name: 'continentCode' }, { name: 'adminName1' } ], async: false, url: "http://api.geonames.org/searchJSON", data: { featureClass: "P", style: "full", maxRows: 20, username: "jqwidgets" } }; var dataAdapter = new $.jqx.dataAdapter(source, { formatData: function (data) { data.name_startsWith = $("#searchField").val(); return data; } } ); var emptySource = true; $("#jqxgrid").jqxGrid( { width: 850, source: [], 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 = $("<div style='margin: 5px;'></div>"); var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'>Search City: </span>"); var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />"); toolbar.append(container); container.append(span); container.append(input); if (theme != "") { input.addClass('jqx-widget-content-' + theme); input.addClass('jqx-rc-all-' + theme); } var oldVal = ""; input.on('keydown', function (event) { if (emptySource === false && input.val().length === 0) { $("#jqxgrid").jqxGrid({ source: [] }); } if (input.val().length >= 2) { if (emptySource === true) { $("#jqxgrid").jqxGrid({ source: dataAdapter }); emptySource = false; } if (me.timer) { clearTimeout(me.timer); } if (oldVal != input.val()) { me.timer = setTimeout(function () { $("#jqxgrid").jqxGrid('updatebounddata'); }, 1000); oldVal = input.val(); } } else { $("#jqxgrid").jqxGrid('updatebounddata'); } }); } }); }); </script> </head> <body class='default'> <div id='jqxgrid'> </div> </body> </html>Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hm, yes, it’s starting to work, almost at least. Still having some difficulty with the getting of the data. The grid loads without any data. But as soon as i filled in something to search for, the grid gets filled with all the data, not only the data that i searched for.
Hi Programmerswe,
Please try the following modification to rendertoolbar:
rendertoolbar: function (toolbar) { var me = this; var container = $("<div style='margin: 5px;'></div>"); var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'>Search City: </span>"); var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />"); toolbar.append(container); container.append(span); container.append(input); if (theme != "") { input.addClass('jqx-widget-content-' + theme); input.addClass('jqx-rc-all-' + theme); } var oldVal = ""; input.on('keyup', function (event) { if (emptySource === false && input.val().length === 0) { $("#jqxgrid").jqxGrid({ source: [] }); } if (input.val().length >= 1) { if (emptySource === true) { $("#jqxgrid").jqxGrid({ source: dataAdapter }); emptySource = false; } if (me.timer) { clearTimeout(me.timer); } if (oldVal != input.val()) { me.timer = setTimeout(function () { $("#jqxgrid").jqxGrid('updatebounddata'); }, 1000); oldVal = input.val(); } } }); }Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks for the help Dimitar!
-
AuthorPosts
You must be logged in to reply to this topic.