jQWidgets Forums

jQuery UI Widgets Forums Grid how to have two grids with one json

This topic contains 8 replies, has 2 voices, and was last updated by  Miguel 11 years, 6 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • how to have two grids with one json #27322

    Miguel
    Member

    hi i currently sending two json request one for each Grid/table, i am trying to simplify this code and only send one json to get all the data then filter or select specific data to populate the grids and charts is this possible below is my code. any help would be great i have tried using the filter functions but have had no luck.

    <?php
    include 'config.php';
    // Check if the user is logged in
    if(!isSet($_SESSION['username']))
    {
    header("Location: login.php");
    exit;
    }
    ?>
    <!doctype html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="Styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/scripts/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxscrollview.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="/PHP/jqwidgets/jqxgrid.pager.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxgrid.columnsresize.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxdatetimeinput.js"></script>
    	<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxcalendar.js"></script>
    	<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/globalization/globalize.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxdropdownlist.js"></script>
    	<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxchart.js"></script>
     	<script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/jqxdragdrop.js"></script>
        <script type="text/javascript" src="/PHP/CPM_Stats/jqwidgets/scripts/gettheme.js"></script>
            <script type="text/javascript">
              $(document).ready(function() {
                    var theme = getDemoTheme();
                    var url1 = "DisplayResults.php";
                    var url2 = "DisplayResultsFinished.php";
                    //prepare data
                    var source1 = null;
                    var source2 = null;
                    var settings1 = null;
                    var settings2 = null;
                    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
                    };
                    //data adapter
                    var dataAdapterDel = new $.jqx.dataAdapter(source1,{
                    	autoBind:true,
                        downloadComplete: function (data, status, xhr) { },
                        loadComplete: function (data) {  },
                        loadError: function (xhr, status, error) { },
                    });
                    var dataAdapterFin = new $.jqx.dataAdapter(source2,{
                        autoBind: true,
                        downloadComplete: function (data, status, xhr) { },
                        loadComplete: function (data) { },
                        loadError: function (xhr, status, error) { },
                    });
                    //initialize jqxgrid
                    $("#jqxgrid1").jqxGrid(
                    {
                        width: 1400,
                        source: dataAdapterDel,
                       //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' }
                        ],
                    });
                    $("#jqxgrid2").jqxGrid(
                    {
                    width: 1400,
                    source: dataAdapterFin,
                   //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', theme: 'black' },
                            { text: 'Campaign', datafield: 'Campaign', width: 250, filtertype: 'textbox', theme: 'black' },
                            { text: 'Campaign ID', datafield: 'CampaignID', width: 100, filtertype: 'number', theme: 'black' },
                            { text: 'Campaign Name', datafield: 'CampaignName', width: 250, filtertype: 'textbox', theme: 'black' },
                            { text: 'Processed', datafield: 'Processed', width: 75, filtertype: 'number', theme: 'black' },
                            { text: 'Delivered', datafield: 'Delivered', width: 75, filtertype: 'number', theme: 'black' },
                            { text: 'Bounced', datafield: 'Bounced', width: 75, filtertype: 'number', theme: 'black' },
                            { text: 'Open', datafield: 'Open', width: 75, filtertype: 'number', theme: 'black' },
                            { text: 'Clicks', datafield: 'Clicks', width: 100, filtertype: 'number', theme: 'black' }
                            ]
                });
                    // prepare jqxChart settings
                     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:dataAdapterDel,
                        categoryAxis:
                            {
                                dataField: 'MessageID',
                                showGridLines: true,
                            },
                        colorScheme: 'scheme10',
                        seriesGroups:
                            [
                                {
                                    type: 'stackedcolumn',
                                   // showLabels: true,
                                    //symbolType:'circle',
                                   columnGapsPercent: 40,
                                    valueAxis:
                                    {
                                        unitInterval: 10000,
                                        minValue: 0,
                                        maxValue: 500000,
                                        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
                    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: dataAdapterFin,
                        categoryAxis:
                            {
                                dataField: 'MessageID',
                                showGridLines: true,
                            },
                        colorScheme: 'scheme11',
                        seriesGroups:
                            [
                                {
                                    type: 'stackedcolumn',
                                    columnGapsPercent: 50,
                                    valueAxis:
                                    {
                                        unitInterval: 20000,
                                        minValue: 0,
                                        maxValue:1000000,
                                        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'}
                                      ]
                                }
                            ]
                    };
                    //var source1clone = clone(source1);
                  //  var source2clone = clone(source2);
                    // set up calendar
                    $("#jqxcalendar").jqxDateTimeInput({ width: '250px', height: '25px', selectionMode: 'range',formatString: 'MM/dd/yyyy HH:mm' });
                    $("#jqxDateButton").jqxButton({});
                    $("#jqxDateButton").on('click',function () {
                           $('#spinner').show();
                            var selection = $('#jqxcalendar').jqxDateTimeInput('getRange');
                            if (selection.from != null) {
                                //alert("HELLO");
                                //gets the dates
                                var fromDate = (selection.from.getMonth()+1)  + '/' + selection.from.getDate() + '/' + selection.from.getFullYear() + ' ' + '00:00:00';
                                var toDate = (selection.from.getMonth()+1)  + '/' + selection.to.getDate() + '/' + selection.to.getFullYear() + ' ' + '23:59:59';
                                var data = { "start_date": fromDate, "end_date": toDate };
                                var urldel = 'data.php';
                                var urlfin = 'datafin.php';
                                source1.url = urldel;
                                source2.url = urlfin;
                                //injects the to and from date for the request
                                source1.data = data;
                                source2.data = data;
                                //gets the data for the updates
                                $("#jqxgrid1").jqxGrid({ source: source1 });
                                $("#jqxgrid2").jqxGrid({ source: source2 });
                                //chart data
                               dataAdapterDel.dataBind();
                               dataAdapterFin.dataBind();
                                $('#jqxChartdel').jqxChart({source:dataAdapterDel});
                                $('#jqxChartfin').jqxChart({ source: dataAdapterFin});
                                //processes the requests for the data
                            }
                    });
                        // setup the chart
                   $('#jqxChartdel').jqxChart(settings1);
                    $('#jqxChartdel').jqxDragDrop();
                    $('#jqxChartfin').jqxChart(settings2);
                    $('#jqxChartfin').jqxDragDrop();
                        //drag and drop
                    $('#jqxgrid1').jqxDragDrop();
                    $('#jqxgrid2').jqxDragDrop();
                  //  $('#jqxRefreshDataButton1').jqxDragDrop();
                   // $('#jqxRefreshDataButton2').jqxDragDrop();
                   // $('#clearfilteringbutton1').jqxDragDrop();
                    //$('#clearfilteringbutton2').jqxDragDrop();
                        //buttons
                    $('#jqxRefreshDataButton1').jqxButton({ width: '150'});
                   // $('#jqxRefreshDataButton1').bind($('#jqxgrid1').jqxGrid());
                    $('#jqxRefreshDataButton1').on('click', function () {
                       // ('#spinner').show();
                       // source1.replaceWith(source1clone);
    				    source1.url = url1;
                        dataAdapterDel.dataBind();
                        $("#jqxgrid1").jqxGrid({ source: source1 });
                        $('#jqxChartdel').jqxChart(settings1);
                    });
                    $('#jqxRefreshDataButton2').jqxButton({  width: '150'});
                   // $('#jqxRefreshDataButton2').bind($('#jqxgrid2').jqxGrid());
                    $('#jqxRefreshDataButton2').on('click', function () {
                      //  ('#spinner').show();
                       // source1.replaceWith(source1clone);
    				   	source2.url = url2;
    					dataAdapterFin.dataBind();
                        $("#jqxgrid1").jqxGrid({ source: source1 });
                        $('#jqxChartdel').jqxChart(settings1);
                        });
            });
            </script>
        <style type="text/css">
            .topcorner {
                position: absolute;
                top: 0;
                right: 0;
            }
        </style>
    </head>
    <body class = 'default'>
      <div id ='content'>
    	    <div id='jqxcalendar' ></div>
            <input type="submit" value="filter" id="jqxDateButton" />
          </div>
            <div><input class="topcorner" id="logout" type="button" name="logout" value="Logout" onclick="location.href='logout.php';" ></div>
             <!--display Grid-->
    	    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;" >
    		    <div id='jqxgrid1'></div>
                <!-- Refresh data button-->
                <input type = 'button' value='Refresh grid' id='jqxRefreshDataButton1' />
                <!--  <input type = "button" value="Display Charts" id= "jqxGetChartButton"  />-->
                <!-- Delivery Chart-->
                <div id='jqxChartdel' style="width:auto; height:800px; position: relative; left: 0px; top: 0px;"></div>
    	    </div>
                <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;" >
    		        <div id='jqxgrid2'></div>
     	        <input type = "button" value="Refresh grid" id="jqxRefreshDataButton2" />
                <!-- <input type = "button" value="Display Charts" id = "jqxGetChartButton"  /> -->
                 <!-- finished Chart-->
      		         <div id='jqxChartfin' style="width:1650px; height:800px; position: relative; left: 0px; top: 0px;">
            	    </div>
    	        </div>
        <!--<a href="logout.php">Logout</a><br /><br />-->
    </body>
    </html>
    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();
    ?>
    how to have two grids with one json #27337

    Peter Stoev
    Keymaster

    Hi iviiguel,

    If you want to make just 1 Server Request and you will not do any other requests on Page Change, Filter or Sort Change, my suggestion is to do the following:

    1. Create a new jqxDataAdapter instance that will handle your Server Request.
    2. Add a loadComplete callback function to that jqxDataAdapter.
    3. In the loadComplete, you can get the loaded records using the following code: var records = dataAdapter.records;
    4. Create new jqxDataAdapter instances, one for each widget that you plan to use.
    5. Each of that jqxDataAdapter instances will be initialized using the dataAdapter.records Array so your widgets will be actually bound to a Local Data Source from their point of view.
    6. Initialize the widgets in the loadComplete callback, too.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    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();
    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) { }

    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) {}
    });
    how to have two grids with one json #27458

    Peter Stoev
    Keymaster

    Hi,

    Please, look at the sample below which populates 2 Grids and 1 Chart making only 1 server call.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title id='Description'>This example shows how to create a Grid from JSON data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = getDemoTheme();
    var url = "../sampledata/beverages.txt";
    // prepare the data
    var source =
    {
    datatype: "json",
    datafields: [
    { name: 'name', type: 'string' },
    { name: 'type', type: 'string' },
    { name: 'calories', type: 'int' },
    { name: 'totalfat', type: 'string' },
    { name: 'protein', type: 'string' }
    ],
    id: 'id',
    url: url
    };
    var dataAdapter = new $.jqx.dataAdapter(source,
    {
    loadComplete: function () {
    var getSource = function () {
    var data = dataAdapter.records;
    var newSource =
    {
    datatype: "json",
    datafields: [
    { name: 'name', type: 'string' },
    { name: 'type', type: 'string' },
    { name: 'calories', type: 'int' },
    { name: 'totalfat', type: 'string' },
    { name: 'protein', type: 'string' }
    ],
    id: 'id',
    localdata: data
    };
    var newAdapter = new $.jqx.dataAdapter(newSource);
    return newAdapter;
    }
    // Create New Grid
    $("#jqxgrid2").jqxGrid(
    {
    width: 670,
    source: getSource(),
    theme: theme,
    columnsresize: true,
    columns: [
    { text: 'Name', datafield: 'name', width: 250 },
    { text: 'Beverage Type', datafield: 'type', width: 250 },
    { text: 'Calories', datafield: 'calories', width: 180 },
    { text: 'Total Fat', datafield: 'totalfat', width: 120 },
    { text: 'Protein', datafield: 'protein', minwidth: 120 }
    ]
    });
    // Create Chart
    // prepare jqxChart settings
    var settings = {
    showLegend: false,
    legendPosition: { left: 520, top: 140, width: 100, height: 100 },
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
    source: getSource(),
    colorScheme: 'scheme02',
    seriesGroups:
    [
    {
    type: 'pie',
    showLabels: true,
    series:
    [
    {
    dataField: 'calories',
    displayText: 'name',
    labelRadius: 100,
    initialAngle: 15,
    radius: 200,
    centerOffset: 0
    }
    ]
    }
    ]
    };
    $('#jqxChart').jqxChart(settings);
    }
    }
    );
    $("#jqxgrid").jqxGrid(
    {
    width: 670,
    source: dataAdapter,
    theme: theme,
    columnsresize: true,
    columns: [
    { text: 'Name', datafield: 'name', width: 250 },
    { text: 'Beverage Type', datafield: 'type', width: 250 },
    { text: 'Calories', datafield: 'calories', width: 180 },
    { text: 'Total Fat', datafield: 'totalfat', width: 120 },
    { text: 'Protein', datafield: 'protein', minwidth: 120 }
    ]
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid"></div>
    <div id="jqxgrid2"></div>
    <div id='jqxChart' style="width: 680px; height: 400px; position: relative; left: 0px; top: 0px;">
    </div>
    </div>
    </body>
    </html>

    Hope this helps.

    Best Regards,
    Peter Stoev

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

    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);
    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

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

You must be logged in to reply to this topic.