[webwiredMember]

That did not work, it threw errors, plus, I didn’t want the rowindex, I wanted the row’s ID…

Here’s the code that ultimately worked…

                var row;
                $('#jqxgrid').bind('rowselect', function (event) 
                { 
                    row = event.args.row.OrderTicketID;
                });
                $('#jqxgrid').bind('rowdoubleclick', function (event) {
                    window.location = 'orderticket.php?orderticketid=' + row;
                });

[webwiredMember]

Well, I had a look at the jqxDataAdapter documentation, and from what I can tell from the examples, it only works by showing HTML Tables…

I’m sorry to say that after careful consideration, I will not be continuing to use jqxwidgets products, for the lack of current standards integration and documentation, and the lack of support (as in unanswered forum posts).

[webwiredMember]

I did debug on the data.php page, that’s what I said up top, that the data comes out perfectly and exactly the same, in the browser, as when I pull it up with the original mysql syntax, here’s an example of what it puts out …

[{“TotalRows”:2,”Rows”:[{“OrderTicketID”:52,”ClientName”:”*****, *****”,”AgencyName”:”John Nowak Agency”,”AgentName”:”Nowak, John”,”InsuranceCarrier”:”Nationwide Life Insurance”,”OrderTicketDateReceived”:”2013-07-31″,”OrderTicketDateRejectedCanceled”:”2013-10-10″},{“OrderTicketID”:68,”ClientName”:”*****, *****”,”AgencyName”:”John Nowak Agency”,”AgentName”:”Nowak, John”,”InsuranceCarrier”:”Nationwide Life Insurance”,”OrderTicketDateReceived”:”2013-08-12″,”OrderTicketDateRejectedCanceled”:”2013-10-10″}]}]

Isn’t that perfectly formatted json for the Grid page to consume?

I just took a look at the jqxDataAdapter documenation, I’ll try to implement that tomorrow, I’ll post back.

[webwiredMember]

I think I’m getting close… I have gotten it to work with ‘rowselect’, but I cannot get it to work with ‘rowdoubleclick’ … would anyone be able to help me figure the rest of this out?

Here’s the code that I added…

$('#jqxgrid').bind('rowselect', function (event) 
{ 
    var row = event.args.row.OrderTicketID;
    window.location = 'orderticket.php?orderticketid=' + row;
});

[webwiredMember]

This post is resolved.

[webwiredMember]

Well, got the sorting figured out as well… just made this change inside of the data.php page code…

        $sortfield = $_GET['sortdatafield'];
        if ($sortfield == "ClientName") {
            $sortfield = "OrderTicketLastName";
        }
        if ($sortfield == "AgentName") {
            $sortfield = "AgentLastName";
        }

[webwiredMember]

Ok, I figured out the paging… That’s all cleared up, I just have to figure out something for the sorting…

[webwiredMember]

I changed the source a bit… Here’s that new code…

var source =
{
    datatype: "json",
    datafields: [
        { name: 'ClientName', type: 'string'},
        { name: 'AgencyName', type: 'string'},
        { name: 'AgentName', type: 'string'},
        { name: 'InsuranceCarrier', type: 'string'},
        { name: 'OrderTicketDateReceived', type: 'date'},
        { name: 'OrderTicketDateCompleted', type: 'date'}
    ],
    url: 'data.php',
    cache: false,
    root: 'Rows',
    pager: function (pagenum, pagesize, oldpagenum) {
        // callback called when a page or page size is changed.
    },
    sort: function()
    {
        // update the grid and send a request to the server.
        $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
    },
    beforeprocessing: function(data)
    {
        if (data != null)
        {
            source.totalrecords = data[0].TotalRows;
        }
    }
};

[webwiredMember]

Peter, thank you… I got the data to display in the Grid, but the sorting and paging is having problems…

The problem that I think the Sorting has, is because I have ‘ClientName’ put together from two different columns in the table, OrderTicketFirstName & OrderTicketLastName … I have the same thing going on for the ‘AgentName’, it is put together from AgentFirstName & AgentLastName … So that when it goes to sort, that column name doesn’t exist… I need some way to be able to fix that, any ideas?

As far as the Paging goes, on the bottom when I click next or previous, it changes the records on the bottom row, but it doesn’t update the Grid with the new rows… Any ideas on that as well would be great?

I left out Filtering from your example because I didn’t want to use it…

Anyway, here is my data.php page code…

<?php
#Include the connect.php file
include('connect.php');
#Connect to the database
//connection String
$connect = mysql_connect($hostname, $username, $password)
or die('Could not connect: ' . mysql_error());
//select database
mysql_select_db($database, $connect);
//Select The database
$bool = mysql_select_db($database, $connect);
if ($bool === False){
	print "can't find $database";
}
// get data and store in a json array
$pagenum = $_GET['pagenum'];
$pagesize = $_GET['pagesize'];
$start = $pagenum * $pagesize;
$query = "SELECT SQL_CALC_FOUND_ROWS OrderTickets.*, Agencies.AgencyName, Agents.AgentFirstName, Agents.AgentLastName, InsuranceCarriers.InsuranceCarrier 
            FROM OrderTickets 
            LEFT JOIN Agencies ON OrderTickets.AgencyID = Agencies.AgencyID
            LEFT JOIN Agents ON OrderTickets.AgentID = Agents.AgentID
            LEFT JOIN InsuranceCarriers ON OrderTickets.InsuranceCarrierID = InsuranceCarriers.InsuranceCarrierID
            WHERE ((ExaminerID = 0 OR ExaminerID = 2) AND OrderTicketCurrentStatus = 'Completed')";
if (isset($_GET['sortdatafield']))
{
        $sortfield = $_GET['sortdatafield'];
        $sortorder = $_GET['sortorder'];
        $result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
        $sql = "SELECT FOUND_ROWS() AS found_rows";
        $rows = mysql_query($sql);
        $rows = mysql_fetch_assoc($rows);
        $total_rows = $rows['found_rows'];
        if ($sortfield != NULL)
        {
                if ($sortorder == "desc")
                {
                        $query = "SELECT OrderTickets.*, Agencies.AgencyName, Agents.AgentFirstName, Agents.AgentLastName, InsuranceCarriers.InsuranceCarrier
                            FROM OrderTickets
                            LEFT JOIN Agencies ON OrderTickets.AgencyID = Agencies.AgencyID
                            LEFT JOIN Agents ON OrderTickets.AgentID = Agents.AgentID
                            LEFT JOIN InsuranceCarriers ON OrderTickets.InsuranceCarrierID = InsuranceCarriers.InsuranceCarrierID
                            WHERE ((ExaminerID = 0 OR ExaminerID = 2) AND OrderTicketCurrentStatus = 'Completed') ORDER BY" . " " . $sortfield . " DESC LIMIT $start, $pagesize";
                }
                else if ($sortorder == "asc")
                {
                        $query = "SELECT OrderTickets.*, Agencies.AgencyName, Agents.AgentFirstName, Agents.AgentLastName, InsuranceCarriers.InsuranceCarrier
                            FROM OrderTickets
                            LEFT JOIN Agencies ON OrderTickets.AgencyID = Agencies.AgencyID
                            LEFT JOIN Agents ON OrderTickets.AgentID = Agents.AgentID
                            LEFT JOIN InsuranceCarriers ON OrderTickets.InsuranceCarrierID = InsuranceCarriers.InsuranceCarrierID
                            WHERE ((ExaminerID = 0 OR ExaminerID = 2) AND OrderTicketCurrentStatus = 'Completed') ORDER BY" . " " . $sortfield . " ASC LIMIT $start, $pagesize";
                }			
                $result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
        }
}
else
{
        $result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
        $sql = "SELECT FOUND_ROWS() AS found_rows";
        $rows = mysql_query($sql);
        $rows = mysql_fetch_assoc($rows);
        $total_rows = $rows['found_rows'];	
}
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
	$customers[] = array(
        'ClientName' => $row['OrderTicketFirstName'] .' '. $row['OrderTicketLastName'],
        'AgencyName' => $row['AgencyName'],
	'AgentName' => $row['AgentFirstName'] .' '. $row['AgentLastName'],
	'InsuranceCarrier' => $row['InsuranceCarrier'],
	'OrderTicketDateReceived' => $row['OrderTicketDateReceived'],
	'OrderTicketDateCompleted' => $row['OrderTicketDateCompleted']
      );
}
$data[] = array(
    'TotalRows' => $total_rows,
    'Rows' => $customers
    );
echo json_encode($data);
?>

And here is my Grid page code…

<? 
require 'includes/auth.php';
$ExaminerID = $_SESSION['ExaminerID'];
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
        <link rel="shortcut icon" href="images/favicon.ico" />
        
        <link rel="stylesheet" href="../jqwidgets-ver3.0.3/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../jqwidgets-ver3.0.3/scripts/jquery-1.10.2.min.js"></script>  
        <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxgrid.selection.js"></script>
	<script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxdata.js"></script>
	<script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxgrid.pager.js"></script>	
	<script type="text/javascript" src="../jqwidgets-ver3.0.3/jqwidgets/jqxdropdownlist.js"></script>	
 	<script type="text/javascript" src="../jqwidgets-ver3.0.3/scripts/gettheme.js"></script>
        
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var theme = 'classic';
                
                var source =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'ClientName', type: 'string'},
                        { name: 'AgencyName', type: 'string'},
                        { name: 'AgentName', type: 'string'},
                        { name: 'InsuranceCarrier', type: 'string'},
                        { name: 'OrderTicketDateReceived', type: 'date'},
                        { name: 'OrderTicketDateCompleted', type: 'date'}
                    ],
                    url: 'data.php',
                    cache: false,
                    filter: function()
                    {
                        // update the grid and send a request to the server.
                        $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
                    },
                    sort: function()
                    {
                        // update the grid and send a request to the server.
                        $("#jqxgrid").jqxGrid('updatebounddata', 'sort');
                    },
                    root: 'Rows',
                    beforeprocessing: function(data)
                    {
                        if (data != null)
                        {
                            source.totalrecords = data[0].TotalRows;
                        }
                    }
                };
		var dataAdapter = new $.jqx.dataAdapter(source);
                $("#jqxgrid").jqxGrid(
                {
                    width: 900,
                    source: dataAdapter,
                    theme: theme,
                    autoheight: true,
                    pageable: true,
                    virtualmode: true,
                    sortable: true,
                    rendergridrows: function(obj)
                    {
                        return obj.data;   
                    },
                    columns: [
                      { text: 'Client Name', datafield: 'ClientName', width: 150},
                      { text: 'Agency', datafield: 'AgencyName', width: 200 },
                      { text: 'Agent', datafield: 'AgentName', width: 150 },
                      { text: 'Carrier', datafield: 'InsuranceCarrier', width: 200 },
                      { text: 'Date Received', datafield: 'OrderTicketDateReceived', width: 100, cellsformat: 'MM-dd-yyyy' },
                      { text: 'Date Completed', datafield: 'OrderTicketDateCompleted', width: 100, cellsformat: 'MM-dd-yyyy' }
                  ]
                });        
            });
        </script>
    
        <title>Order Tickets</title>
    </head>
    <body class='default'>
        <div id="LogoHeader">
            <img src="images/logo.png" />
        </div>
        <div id="Menu">
            <? include 'includes/menu.php'; ?>
        </div>
        <div style="margin-left: auto; margin-right: auto; width: 900px;">
            <div id="jqxgrid"></div>
        </div>
    </body>
</html>

[webwiredMember]

Peter, I figured out how to add code to the forum page, does it still look like I’m missing something in regards to references?

[Author]

Posts