Issues with Filtering

[MiguelMember]

hi i am working on two grid off the same json data, i need the grids when  they load to apply the filter. I created the filters according to the demos provided in here please see my code below. 
	 Displays finished and delivered campaigns from Volomp.
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
	
	
    
    
	
    
    
 	
	
		$(document).ready(function() {
			
			function getObjects(obj, key, val) {
    				var objects = [];
   					 for (var i in obj) {
       					 if (!obj.hasOwnProperty(i)) continue;
       					 if (typeof obj[i] == 'object') {
          					  objects : objects.concat(getObjects(obj[i], key, val));
       					 } else if (i == key && obj[key] == val) {
          				  objects.push(obj);
      					  }
   						 }
   					 return objects;
					};
			
			
			var url= "ServiceCallVolomp.php";
			//prepare data
			var source ={
			datatype: "json",
			datafields:[
			{ name:'MessageID'},
			{ name:'Status'},
			{ name:'Campaign'},
			{ name:'CampaignID'},
			{ name:'CampaignName'},
			{ name:'Processed'},
			{ name:'Delivered'},
			{ name:'Bounced'},
			{ name:'Open'},
			{ name:'Clicks'},],
			url: url
		};
				//add filter for delivering grid
			var addfilter1 = function () {
			    var filtergroup1 = new $.jqx.filter();
			    var filter_or_operator = 1;
			    var filtervalue1 = 'delivering';
			    var filtercondition = 'contains';
			    var filter1 = filtergroup.createfilter('stringfilter', filtervalue1, filtercondition);
			    filtergroup1.addfilter(filter_or_operator, filter1);
			    $("#jqxgrid1").jqxGrid('addfilter1', 'Status', filtergroup1);
			    $("#jqxgrid1").jqxGrid('applyfilters');
			};
            //add filter for finished grid
			var addfilter2 = function () {
					var filtergroup2 = new $.jqx.filter();
					var filter_or_operator = 1;
					var filtervalue2 = 'finished';
					var filtercondition = 'contains';
					var filter2 = filtergroup.createfilter('stringfilter' ,filtervalue2, filtercondition);
					filtergroup2.addfilter(filter_or_operator,filter2);
					$("#jqxgrid2").jqxGrid('addfilter2','Status',filtergroup2);
					$("#jqxgrid2").jqxGrid('applyfilters');
					
				}
		//data adapte;r
				var dataAdapter = new $.jqx.dataAdapter(source,{
					autoBind:true,
				downloadComplete: function(data,status,xhr){},
				loadComplete: function(data){},
				loadError: function(xhr,status,error){}
				});
	//initialize jqxgrid
			$("#jqxgrid1").jqxGrid(
			{
				width: 1250,
				source: dataAdapter,
    			 selectionmode: 'multiplerowsextended',
				 filterable: true,
                sortable: true,
                pageable: true,
                autoheight: true,
                columnsresize: true,
                ready: function () {
                    addfilter1();
                },
                autoshowfiltericon: true,
				columns: [
				{ text: 'Status', datafield:'Status', width:100},
				{ text: 'Message ID',datafield:'MessageID', width:150},
				{ text: 'Campaign',datafield:'Campaign', width:250},
				{ text: 'Campaign ID',datafield:'CampaignID', width:100},
				{ text: 'Campaign Name',datafield:'CampaignName', width:250},
				{ text: 'Processed', datafield:'Processed', width:75},
				{ text: 'Delivered',datafield:'Delivered', width:75},
				{ text: 'Bounced',datafield:'Bounced', width:75},
				{ text: 'Open',datafield:'Open', width:75},
				{ text: 'Clicks',datafield:'Clicks', width:100}
				]
	});
				$("#jqxgrid2").jqxGrid(
			{
				width: 1250,
				source: dataAdapter,
				selectionmode: 'multiplerowsextended',
				filterable: true,
                sortable: true,
                pageable: true,
                autoheight: true,
                columnsresize: true,
                ready: function () {
                    addfilter2();
                },
                autoshowfiltericon: true,
				columns: [
				{ text: 'Status', datafield:'Status', width:100},
				{ text: 'Message ID',datafield:'MessageID', width:150},
				{ text: 'Campaign',datafield:'Campaign', width:250},
				{ text: 'Campaign ID',datafield:'CampaignID', width:100},
				{ text: 'Campaign Name',datafield:'CampaignName', width:250},
				{ text: 'Processed', datafield:'Processed', width:75},
				{ text: 'Delivered',datafield:'Delivered', width:75},
				{ text: 'Bounced',datafield:'Bounced', width:75},
				{ text: 'Open',datafield:'Open', width:75},
				{ text: 'Clicks',datafield:'Clicks', width:100}
				]
	});
          $("#jqxcalendar").jqxCalendar({ width: '250px', height: '250px' });
          $('#jqxcalendar').bind('valuechanged', function (event) {
              var date = event.args.date;
              $("#log").text(date.toDateString());
		  });
	 // prepare jqxChart settings
	 
		var settings1 = {
			title: "Delivered Campaigns Stats",
			showLegend: true,
			padding: { left: 5, top: 5, right: 5, bottom: 5 },
			titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
			source: dataAdapter,
			categoryAxis:
				{
					dataField: 'messageID',
					showGridLines: true,
					
				},
			colorScheme: 'scheme01',
			seriesGroups:
				[
					{
						type: 'stackedcolumn',
						
						columnGapsPercent: 50,
						valueAxis:
						{
							unitInterval: 5000,
							displayValueAxis: true,
							description: 'Numbers of emails',
							//descriptionClass: 'css-class-name',
							
						},
						series: [
								{ dataField: 'Quantity', displayText: 'Quantity' },
								{ dataField:'Processed', displayText:'Processed'},
								{ dataField:'Delivered', displayText: 'Delivered'},
								{ dataField:'Bounced', displayText: 'Bounced'},
								{ dataField:'Open', displayText:'Open'},
								{ dataField:'Clicks', displayText:'Clicks'}
						  ]
					}
				]
		};
	 	 // prepare jqxChart settings
	 
		var settings2 = {
			title: " finished Campaigns Stats",
			showLegend: true,
			padding: { left: 5, top: 5, right: 5, bottom: 5 },
			titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
			source: dataAdapter,
			categoryAxis:
				{
					dataField: 'MessageID',
					showGridLines: true,
					
				},
			colorScheme: 'scheme01',
			seriesGroups:
				[
					{
						type: 'stackedcolumn',
						
						columnGapsPercent: 50,
						valueAxis:
						{
							unitInterval: 5000,
							displayValueAxis: true,
							description: 'Numbers of emails',
							//descriptionClass: 'css-class-name',
							
						},
						series: [
								{ dataField: 'Quantity', displayText: 'Quantity' },
								{ dataField:'Processed', displayText:'Processed'},
								{ dataField:'Delivered', displayText: 'Delivered'},
								{ dataField:'Bounced', displayText: 'Bounced'},
								{ dataField:'Open', displayText:'Open'},
								{ dataField:'Clicks', displayText:'Clicks'}
						  ]
					}
				]
		};
			// setup the chart
		$('#jqxChartdel').jqxChart(settings1);
		$('#jqxChartfin').jqxChart(settings2);
		    $('#jqxRefreshDataButton1').jqxButton({ width: '150' });
		    $("#jqxRefreshDataButton1").click( function(){source.localdata = url;
			$("#jqxgrid1").jqxGrid('updatebounddata', 'cells')});
			$("#jqxRefreshDataButton2").jqxButton({width: '150'});
			$("#jqxRefreshDataButton2").click( function(){source.localdata = url;
			    $("#jqxgrid2").jqxGrid('updatebounddata', 'cells')
			});
});
    
<!--
	// create button widgets
			
			//$("#jqxGetChartButton").jqxButton({width: '150'});
			//$("#jqxRefreshDataButton").jqxButton({width: '150'});
			//$("#jqxGetChartButton").on('click',function(){ jqxChart(settings)});
		//	$("#jqxGetChartButton").on('click',function(){ source});
// -->
<div>
	<div></div>
    <div></div>
    </div>
    <!--display Grid-->
	<div style="font-size: 13px;font-family: Verdana;float: left">
		<div></div>
        <!-- Refresh data button-->
        
      &lt;!--  --&gt;
      <!-- Delivery Chart-->
      <div style="width:1000px;height:800px"></div>
	 </div>
    <div style="font-size: 13px;font-family: Verdana;float: left">
		<div></div>
 	 
       &lt;!--  --&gt;
       <!-- finished Chart-->
  		<div style="width:1000px;height:800px">
	</div>
	</div>
    
   
		
		  
          

[Peter StoevKeymaster]

Hi iviiguel,

1. When you bind a widget it should be bound to unique dataAdapter instance.
2. A syntax error in the provided code is the last “,” after the last item of an Array:

{ name:'Clicks'},

3. An issue is that the datafields Array is not initialized as expected i.e the type is not set to “string”, “date”, “number” or “boolean” of your data fields.
4. jqxGrid does not have a method called “addfilter1”. That is an issue and will raise an exception.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts