Search toolbar

[shaserMember]

Hello I have this code:

$(document).ready(function () {
var theme = getTheme();
var dataJ = ;

// prepare the data
var source =
{
localdata: dataJ,
datatype: “jsonp”,
datafields: [
//{ name: ‘name’ },
//{ name: ‘display_name’ },
//{ name: ‘qty’},
//{ name: ‘Sprice’ },
//{ name: ‘population’ }
{ name: ‘countryName’ },
{ name: ‘name’ },
{ name: ‘population’, type: ‘float’ },
{ name: ‘continentCode’ },
{ name: ‘adminName1’ }
],
async: false,
data: {
featureClass: “P”,
style: “full”,
maxRows: 20
}
};
var dataAdapter = new $.jqx.dataAdapter(source,
{
formatData: function (data) {
data.name_startsWith = $(“#searchField”).val();
return data;
}
}
);

$(“#jqxgrid”).jqxGrid(
{
width: ‘99.5%’,
source: dataAdapter,
theme: ‘ui-redmond’,

columns: [
{ text: ‘Code’, datafield: ‘name’, width: 80 },
{ text: ‘Name’, datafield: ‘display_name’, width: 220 },
{ text: ‘Qty’, datafield: ‘qty’, width: 50 },
{ text: ‘Sale Price’, datafield: ‘Sprice’, width: 100 },
{ text: ‘Buy Price’, datafield: ‘population’, width: 100 },
{ text: ‘Product Type’, datafield: ‘population’, width: 150 },
{ text: ‘Provider’, datafield: ‘population’, width: 140 },
{ text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’,width: 70, cellsrenderer: function () {
return “Edit”;
},
buttonclick: function (row) {

}
}//edit
],
pageable: true,
//sortable: true,
//altrows: false,
showtoolbar: true,
autoheight: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“

“);
var span = $(“Search Product: “);
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();
}, 100);
}
});
}
});
});

the $viewData is the json var I get the value trow php Codeigniter, the Grid get the value but whet I try search nothing happens any Idea?

this is the json result:

[{“subsidiary_id”:”2″,”name”:”2990″,”display_name”:”jdjddkj”, “qty”:10,”Sprice”:”$ 56.2″},{“subsidiary_id”:”2″,”name”:”3990″,”display_name”:”jdjddkj”, “qty”:10,”Sprice”:”$ 56.2″}]

Thank you

[shaserMember]

I have the solution thank you.

[kuberasamratParticipant]

I would like to know how to add jqxbutton to JqxGrid toolbar which is having multiple search fields?
Such that I would be able to send all the search field values at once to my server.

[kuberasamratParticipant]

We have commercial licence.
Please provide us the solution soon for the problem statement below.
We have this Code Snippet. It does Send the SearchString(say ‘company’) and SearchValue(say ‘jqwidgets’) which are empty on initialization. The function searchContDetails() will give the strings to getlists function and reload the grid with those constants.

Problem Statement:
Its working fine when I am not using button in the toolbar(only one request to the server). (Commented out).
1) When we are using button and on clicking on the button, It is sending 4 to 5 requests sequentially to the server and then rendering the grid on last request complete.
2) When Grid is rendering, we cannot click any of the UI items in the page.(Major issue).

function searchContDetails(){
	var searchstring=new Array();
	var searchvalues=new Array();
	if($("#FirstName123").val()!=''){
		searchstring.push('firstname');
		searchvalues.push($("#FirstName123").val());
	}
	getlists(searchstring, searchvalues);
}
function getlists(searchString,searchValue){	
	var theme='ui-redmond';
	var url ="data.php"; 
	    
    	var  source =
       {
            	datatype: "json",
		async:false,
		type: 'POST',	
            	datafields: [{name:'firstname'},{name:'secondname'},{name:'gender'},{name:'company'},{name:'email1'}],
	        url:url,
	        pager: function (pagenum, pagesize, oldpagenum) {
		        	// callback called when a page or page size is changed.
               	},
               	root: 'Rows',
               	data: {    			
        			searchField:searchString,
        			searchString:searchValue
        		},
               	id:'id',               	
		beforeprocessing: function(data)
		{		
			source.totalrecords = data.TotalRows;
		},
				sort: function()
				{
					$("#list2").jqxGrid('updatebounddata');
				}
		
		};
	  
  	  var dataAdapter = new jQuery.jqx.dataAdapter(source);  // Used only when button is placed
      /*    var dataAdapter = new jQuery.jqx.dataAdapter(source,{formatData: function (data) {
  	  	  data.searchField='firstname'; 	  	  
          data.searchString = $("#FirstName123").val();
          return data;
      }}); */	 // Used only when button is removed   
            
	jQuery("#list2").jqxGrid({
		width:sWidth,
		source: dataAdapter,
		pageable:true,	
		virtualmode: true,
		theme:theme,
		showtoolbar:true, 		
		filterable:true,		
		sortable:true,
		autoheight: true,		
		rendergridrows: function()
				{
					  return dataAdapter.records;     
				},
		rendertoolbar: function (toolbar) {
			var me = this;
			var container = $("<div style='margin: 5px'></div>");
			var span1 = $("<span style='float: left;margin-top: 5px;margin-right: 4px'>FirstName123: </span>");
			var button1= $("<div></div>");// Used only when button is placed
			toolbar.append(container);
			container.append(span1);
			container.append(input1);	
			container.append(button1);  // Used only when button is placed
			if (theme != "") {	input1.addClass('jqx-widget-content-' + theme);
								input1.addClass('jqx-rc-all-' + theme);																				
							 }
             /*          input1.bind('keydown', function (event) {
				if (input1.val().length &gt;= 2) {
							if (me.timer) clearTimeout(me.timer);
							me.timer = setTimeout(function () {
									dataAdapter.dataBind();	},300);
							}
				});*/		 // Used only when button is removed			 		 
			
		},										
		
		columns:[
			{text:'First name',datafield:'firstname', columntype: 'textbox', resizable: true, minwidth:90},
			{text:'Second name',datafield:'secondname',  resizable: true, minwidth:80},
			{text:'Gender',datafield:'gender',  resizable: true, minwidth:80},
			{text:'Company',datafield:'company', resizable: true, minwidth:80},
			{text:'Email ID',datafield:'email1', resizable: true, minwidth:180}]			
	});  
}  

[Peter StoevKeymaster]

Hi kuberasamrat,

In case you are a licensed developer and you request for help from the Support Team, please send your support requests to support@jqwidgets.com. You should not expect answers from jQWidgets Team in the Community Forum.

Note that the “rendertoolbar” callback is called when the Grid is rendered. If you dynamically change the Grid’s data, this means that you re-render the Grid. In the callback function you subscribe to events which means that you may end up in more than 1 events subscriptions. I suggest you to check whether you have subscribe to an event or unbind from previous event binding, before binding again.

I also suggest you to take a look at the Online PHP Samples and the Server Sorting, Filtering and Paging.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kuberasamratParticipant]

Thanks Peter,

The above two issues were resolved. I have converted async:false –> true. But Now I am facing the issue:

The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.

Could you please help me to resolve the issue.

[cloudsurferMember]

Peter,

How to give auto suggestions in the toolbar search?
How to do folder(tree) search in toolbar?

[Author]

Posts