jQWidgets Forums

Forum Replies Created

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts

August 22, 2013 at 8:08 pm in reply to: how to have two grids with one json how to have two grids with one json #27482

Miguel

Member

Peter

i yused your example but i am having problems binding to the grid when i debug(using firebug) all the records are there but when i finish stepping through the code nothing shows up in the grid

	var record= [];
				var dataAdapter = new $.jqx.dataAdapter(source,{
					autoBind:true,
				 	downloadComplete: function (data, status, xhr){},
                    loadComplete: function (records) {
						var getSource = function () {
							var records = dataAdapter.records;
							var length = records.length;
							for (var i = 0; i<length;i++)
							{
								for(key in records[i])
								{
	
									if (records[i][key] == "delivering")
									{
										record.push(records[i]);
									 	
									};
								}
							}
							
							var sourceDel = {
		                    	datatype: "json",
		                    	datafields: [
				                    { name: 'MessageID', type: 'int' },
				                    { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' },
				                    { name: 'Status', type: 'string' },
				                    { name: 'Campaign', type: 'string' },
				                    { name: 'CampaignID', type: 'int' },
				                    { name: 'CampaignName', type: 'string' },
				                    { name: 'Processed' ,type:'int'},
				                    { name: 'Delivered', type: 'int' },
				                    { name: 'Bounced', type: 'int' },
				                    { name: 'Open', type: 'int' },
				                    { name: 'Clicks', type: 'int' }, 
								],
		                    	localData: record
							};	
						 	var dataAdapterDel = new $.jqx.dataAdapter(sourceDel, { autoBind:true });
							return dataAdapterDel
						};
					 $("#jqxgrid1").jqxGrid({
	                    width: 1400,
	                    source: getSource(),
	                   //theme: "jqx.ui-darkness",
	                    selectionmode: 'multiplerowsextended',
	                    //showfilterrow: true,
	                    filterable: true,
	                    sortable: true,
	                    pageable: true,
	                    autoheight: true,
	                    columnsresize: true,
	                    autoshowfiltericon: true,
	                    columns: [
	                        {text: 'Status', datafield: 'Status', width: 100 },
	                        { text: 'Date', datafield: 'Start', filtertype: 'date', width: 150, cellsformat: 'MM/dd/yyyy HH:mm' },
	                        { text: 'Message ID', datafield: 'MessageID', width: 150, filtertype: 'number' },
	                        { text: 'Campaign', datafield: 'Campaign', width: 250, filtertype: 'textbox' },
	                        { text: 'Campaign ID', datafield: 'CampaignID', width: 100, filtertype: 'number'},
	                        { text: 'Campaign Name', datafield: 'CampaignName', width: 250, filtertype: 'textbox' },
	                        { text: 'Processed', datafield: 'Processed', width: 75, filtertype: 'number'},
	                        { text: 'Delivered', datafield: 'Delivered', width: 75, filtertype: 'number'},
	                        { text: 'Bounced', datafield: 'Bounced', width: 75, filtertype: 'number'},
	                        { text: 'Open', datafield: 'Open', width: 75, filtertype: 'number'},
	                        { text: 'Clicks', datafield: 'Clicks', width: 100, filtertype: 'number' }
	                    ]
	           
					});
				}		
			});

Also here is what the json looks like this is a small excert of the json

[
    {
        "MessageID": "283306",
        "Start": "2013-08-01 04:00:00",
        "Status": "finished",
        "Campaign": "ADK_HOT_OP",
        "CampaignID": "2282 ",
        "CampaignName": " Minnesota Internship",
        "Processed": "71752",
        "Delivered": "46413",
        "Bounced": "25339",
        "Open": "1321",
        "Clicks": "12"
    },
    {
        "MessageID": "284306",
        "Start": "2013-08-01 04:10:00",
        "Status": "finished",
        "Campaign": "ADK_HOT_OP",
        "CampaignID": "2282 ",
        "CampaignName": " Minnesota Internship",
        "Processed": "71751",
        "Delivered": "46839",
        "Bounced": "24912",
        "Open": "1306",
        "Clicks": "17"
    },
    {
        "MessageID": "1238306",
        "Start": "2013-08-19 10:35:00",
        "Status": "delivering",
        "Campaign": "2467 - Dutchess Chrysler Dodge Jeep",
        "CampaignID": "2467 ",
        "CampaignName": " Dutchess Chrysler Dodge Jeep",
        "Processed": "1398",
        "Delivered": "819",
        "Bounced": "579",
        "Open": "0",
        "Clicks": "0"
    }
]

i created the new source and grid within the data adapter like you shown me in the example, but it seems the data is not binding to the grid. please advise.

thank you

August 22, 2013 at 3:45 pm in reply to: how to have two grids with one json how to have two grids with one json #27471

Miguel

Member

thank you Peter,

but how do i specify the data to display in each grid with your example. what i am trying to do is parse through the json request and assigned the data to their respective grid/ chart based on the status of the record ie, if status = delivering then it should go to the delivering grid(jqxgrid1, jqxchart1) and if the record status = finished that record to go to the finished grid/chart (jqxGrid2,jqxchart2)

this is what i have came up with. i’m trying to separate the data coming from the json assigning it to a variable and i created two other source with localdata using the variables i assigned the records to, but for some reason the records are empty

  var source ={
                    datatype: 'json',
                    type: "POST",
                    datafields:[
                    { name: 'MessageID', type: 'int' },
                    { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' },
                    { name: 'Status', type: 'string' },
                    { name: 'Campaign', type: 'string' },
                    { name: 'CampaignID', type: 'int' },
                    { name: 'CampaignName', type: 'string' },
                    { name: 'Processed' ,type:'int'},
                    { name: 'Delivered', type: 'int' },
                    { name: 'Bounced', type: 'int' },
                    { name: 'Open', type: 'int' },
                    { name: 'Clicks', type: 'int' }, ],
                    url: url1
                  
                };
               /* var source2 = {
                    datatype: "json",
                   type: "POST",
                    datafields: [
                    { name: 'MessageID', type: 'int' },
                    { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' },
                    { name: 'Status', type: 'string' },
                    { name: 'Campaign', type: 'string' },
                    { name: 'CampaignID', type: 'int' },
                    { name: 'CampaignName', type: 'string' },
                    { name: 'Processed' ,type:'int'},
                    { name: 'Delivered', type: 'int' },
                    { name: 'Bounced', type: 'int' },
                    { name: 'Open', type: 'int' },
                    { name: 'Clicks', type: 'int' }, ],
                    url: url2
                    
                };*/
				var dataAdapter = new $.jqx.dataAdapter(source,{
					autoBind:true,
				 	downloadComplete: function (data, status, xhr){},
                    loadComplete: function (data){},
                    loadError: function (xhr, status, error){},
					
				}); 
				
				
				var records = dataAdapter.records;
				var length = records.length;
				/*for (var i = 0; i< length; i++){
						if (records['status']= "delivering"){
						var delData = records[i]
						}
						else if (records['status']= "finished"){
							var finData = records[i]
						}
					 };*/
				
					var dataDel = function (){
						for (var i = 0; i< length; i++ ){
						if (records['status']== "delivering"){
						 delData = records[i]
						}}};
					var dataFin = function (){
						for (var i = 0; i< length; i++){
						if (records['status']== "finished"){
						 finData = records[i]
						}}};
				var sourceDel = {
                    datatype: "json",
                    datafields: [
                    { name: 'MessageID', type: 'int' },
                    { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' },
                    { name: 'Status', type: 'string' },
                    { name: 'Campaign', type: 'string' },
                    { name: 'CampaignID', type: 'int' },
                    { name: 'CampaignName', type: 'string' },
                    { name: 'Processed' ,type:'int'},
                    { name: 'Delivered', type: 'int' },
                    { name: 'Bounced', type: 'int' },
                    { name: 'Open', type: 'int' },
                    { name: 'Clicks', type: 'int' }, ],
                    localData: dataDel
				};
				var sourceFin = {
                    datatype: "json",
                    datafields: [
                    { name: 'MessageID', type: 'int' },
                    { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' },
                    { name: 'Status', type: 'string' },
                    { name: 'Campaign', type: 'string' },
                    { name: 'CampaignID', type: 'int' },
                    { name: 'CampaignName', type: 'string' },
                    { name: 'Processed' ,type:'int'},
                    { name: 'Delivered', type: 'int' },
                    { name: 'Bounced', type: 'int' },
                    { name: 'Open', type: 'int' },
                    { name: 'Clicks', type: 'int' }, ],
                    localdata:dataFin
				};
				
                //data adapter
                var dataAdapterDel = new $.jqx.dataAdapter(sourceDel);
				//dataAdapterDel.dataBind();
                var dataAdapterFin = new $.jqx.dataAdapter(sourceFin);

August 22, 2013 at 2:00 pm in reply to: how to have two grids with one json how to have two grids with one json #27446

Miguel

Member

this is another way i just though of but still getting same error

          source1 ={
                    datatype: "json",
                    type: "POST",
                    datafields:[
                    { name: 'MessageID', type: 'int' },
                    { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' },
                    { name: 'Status', type: 'string' },
                    { name: 'Campaign', type: 'string' },
                    { name: 'CampaignID', type: 'int' },
                    { name: 'CampaignName', type: 'string' },
                    { name: 'Processed' ,type:'int'},
                    { name: 'Delivered', type: 'int' },
                    { name: 'Bounced', type: 'int' },
                    { name: 'Open', type: 'int' },
                    { name: 'Clicks', type: 'int' }, ],
                    url: url1
                  
                };
               /* var source2 = {
                    datatype: "json",
                   type: "POST",
                    datafields: [
                    { name: 'MessageID', type: 'int' },
                    { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' },
                    { name: 'Status', type: 'string' },
                    { name: 'Campaign', type: 'string' },
                    { name: 'CampaignID', type: 'int' },
                    { name: 'CampaignName', type: 'string' },
                    { name: 'Processed' ,type:'int'},
                    { name: 'Delivered', type: 'int' },
                    { name: 'Bounced', type: 'int' },
                    { name: 'Open', type: 'int' },
                    { name: 'Clicks', type: 'int' }, ],
                    url: url2
                    
                };*/
				var dataAdapter = new $.jqx.dataAdpater(source1,{
					autoBind:true,
				 	downloadComplete: function (data, status, xhr){},
                    loadComplete: function (data){},
                    loadError: function (xhr, status, error){}
				});
				var records = dataAdapter.records;
				var length = records.length;
				for (var i = 0; i< length; i++){
						if (records['status']= "delivering"){
						var delData = records[i]
						}
						else if (records['status']= "finished"){
							var finData = records[i]
						}
					 }; 
				var sourceDel = {
                    datatype: "array",
                    datafields: [
                    { name: 'MessageID', type: 'int' },
                    { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' },
                    { name: 'Status', type: 'string' },
                    { name: 'Campaign', type: 'string' },
                    { name: 'CampaignID', type: 'int' },
                    { name: 'CampaignName', type: 'string' },
                    { name: 'Processed' ,type:'int'},
                    { name: 'Delivered', type: 'int' },
                    { name: 'Bounced', type: 'int' },
                    { name: 'Open', type: 'int' },
                    { name: 'Clicks', type: 'int' }, ],
                    localData: delData
				};
				var sourceFin = {
                    datatype: "array",
                    datafields: [
                    { name: 'MessageID', type: 'int' },
                    { name: 'Start', type: 'date', cellsformat: 'MM/dd/yyyy HH:mm' },
                    { name: 'Status', type: 'string' },
                    { name: 'Campaign', type: 'string' },
                    { name: 'CampaignID', type: 'int' },
                    { name: 'CampaignName', type: 'string' },
                    { name: 'Processed' ,type:'int'},
                    { name: 'Delivered', type: 'int' },
                    { name: 'Bounced', type: 'int' },
                    { name: 'Open', type: 'int' },
                    { name: 'Clicks', type: 'int' }, ],
                    localData: finData
				};
				
                //data adapter
                var dataAdapterDel = new $.jqx.dataAdapter(sourceDel,{
                    autoBind:true,
                    downloadComplete: function (data, status, xhr) {},
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) {}
                   
                });
				
                var dataAdapterFin = new $.jqx.dataAdapter(sourceFin,{
                    autoBind:true,
                    downloadComplete: function (data, status, xhr) {},
                    loadComplete: function (data) {},
                    loadError: function (xhr, status, error) {}
                   
                });

August 22, 2013 at 1:46 pm in reply to: how to have two grids with one json how to have two grids with one json #27441

Miguel

Member

this is the error i am getting
TypeError: $.jqx.dataAdpater is not a constructor

loadError: function (xhr, status, error) { }

August 22, 2013 at 1:44 pm in reply to: how to have two grids with one json how to have two grids with one json #27439

Miguel

Member

Thank you Peter,

could you help me with the logic of the data adapters or point me to an example i’mm getting an error saying that the data adapter is not a constructor data adapter code below

	var dataAdapter = new $.jqx.dataAdpater(source1,{
					autoBind:true,
				 	downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
				});
				
                //data adapter
                var dataAdapterDel = new $.jqx.dataAdapter(dataAdapter.records,{
                    autoBind:true,
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (records) {
					var records = dataAdapter.records;
					var length = records.length;
					for (var i = 0; i< length; i++){
						if (records['status']= "delivering"){
						var record = records[i]
						}
					} 
                    	dataAdapterDel.records = record
                    },
                    loadError: function (xhr, status, error) { }
                   
                });
				dataAdapterDel.dataBind();
                var dataAdapterFin = new $.jqx.dataAdapter(dataAdapter.records,{
                    autoBind:true,
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (records) {
					var records = dataAdapter.records;
					var length = records.length;
					for (var i = 0; i< length; i++){
						if (records['status']= "finished"){
						var record = records[i]
						}
					} 
                    	dataAdapterFin.records = record;
                    },
                    loadError: function (xhr, status, error) { }
                   
                });
				dataAdapterFin.dataBind();

August 21, 2013 at 9:42 pm in reply to: how to have two grids with one json how to have two grids with one json #27323

Miguel

Member

Maybe when i send the request to get the data from the php script below, is there a way to specify my select statement to get data

<?php
function displayResultsDel(){
	include_once 'connect.php';
	$con = new mysqli($server,$user,$pass,$db_name);
if ($con->connect_errno) {
echo "Failed to connect to MySQL: (" . $con->connect_errno . ") " . $con->connect_error;
}
			 $sql =  "SELECT DISTINCT * FROM volomp where status = 'delivering'";
			 $res = $con->query($sql) or die("SQL Error 1: " . mysqli_error($con));
			// $resultFinished = mysqli_query($con,"SELECT * FROM finshed");
		
			 while ($row = mysqli_fetch_array($res,MYSQLI_ASSOC))
			 {
				 $resultsdel[] = array(
				 'MessageID'=>$row['message_id'],
        		 'Start'=>$row['Start'],
				 'Status'=>$row['status'],
				 'Campaign'=>$row['campaign'],
				 'CampaignID'=>$row['campaign_id'],
				 'CampaignName'=>$row['campaign_name'],
				 'Processed'=>$row['processed'],
				 'Delivered'=>$row['delivered'],
				 'Bounced'=>$row['bounced'],
				 'Open'=>$row['open'],
				 'Clicks'=>$row['clicks']);
			 }
			
			 header("Content-type: application/json"); 
			echo json_encode($resultsdel,JSON_PRETTY_PRINT);
			$error = json_last_error();
		
			
		 }	
	
	displayResultsDel();
?>

<?php
function displayResultsFin(){
	include_once 'connect.php';
	$con = new mysqli($server,$user,$pass,$db_name);
if ($con->connect_errno) {
echo "Failed to connect to MySQL: (" . $con->connect_errno . ") " . $con->connect_error;
}
			 $sql =  "SELECT DISTINCT * FROM volomp where status = 'finished'";
			 $res = $con->query($sql) or die("SQL Error 1: " . mysqli_error($con));
			// $resultFinished = mysqli_query($con,"SELECT * FROM finshed");
		
			 while ($row = mysqli_fetch_array($res,MYSQLI_ASSOC))
			 {
				 $resultsfin[] = array(
				 'MessageID'=>$row['message_id'],
        		 'Start'=>$row['Start'],
				 'Status'=>$row['status'],
				 'Campaign'=>$row['campaign'],
				 'CampaignID'=>$row['campaign_id'],
				 'CampaignName'=>$row['campaign_name'],
				 'Processed'=>$row['processed'],
				 'Delivered'=>$row['delivered'],
				 'Bounced'=>$row['bounced'],
				 'Open'=>$row['open'],
				 'Clicks'=>$row['clicks']);
			 }
			
			 header("Content-type: application/json"); 
			echo json_encode($resultsfin,JSON_PRETTY_PRINT);
			$error = json_last_error();
		
			
		 }	
	
	displayResultsFin();
?>

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)