I am trying to use jqGrid with Phalcon framework. I am trying to fetch data from table and show it in jqGrid. I am able to get a lot of it to work but the data present in a php variable doesn't show up in jqGrid. I have tried a lot of options, seen jqGrid samples etc. The samples fetch data from a mysql table so there is a "url" option where a php file used to get this data is specified. In Phalcon I cannot fix the URL as its a volt file which gets converted to a php on the fly and is executed and secondly the data is in a variable. I have used echo json_encode($responce); but it actually echoes the data on screen rather than showing it in the grid. $responce is the variable containing the json data. I am using the volt templating engine of Phalcon which generates 'php' files. Most of the lines in below code are php and volt lines are intuitive. The complete javascript and php is in a single file. I could be doing some incorrect things so pardon my lack of knowledge of javascript & ajax.
I am trying to show data in two parts, on top is the master data like in an invoice and jqGrid should show the line items, i.e. detail rows of the master data.
Here is the whole code of edit.volt file from directory app\views\<mymodel> in my MVC structured Phalcon setup. I have tried using datatype as local as my data is in a variable $relOrderItem but it didn't help.
<script type="text/javascript">
$(document).ready(function () {
jQuery("#list4").jqGrid({
datatype: "json",
mtype: "post",
height: 'auto',
colNames:['ItemIid', 'Size', 'Colour', 'Position', 'Material', 'Amount', 'AmtRecvd'],
colModel:[
{name:'ro_relorder_item_iid', width:60, key:true, sorttype:"int"},
{name:'ro_relorder_size', width:90},
{name:'ro_relorder_colour', width:100},
{name:'ro_relorder_position', width:80, align:"right"},
{name:'ro_relorder_material', width:80, align:"right"},
{name:'ro_relorder_amount', width:80,align:"right",sorttype:"float"},
{name:'ro_relorder_amount_recvd', width:150}
],
pager: "#pager1",
rowNum: 10,
rowList: [10, 20, 30],
loadonce: true,
sortname: "ro_relorder_item_iid",
sortorder: "asc",
viewrecords: true,
gridview: true,
autoencode: true,
multiselect: true,
onSelectRow: function(id) {
var getID = $(this).jqGrid('getCell', id, 'ro_relorder_item_iid');
},
caption: "Detail Data"
})
});
jQuery("#list4").jqGrid('navGrid','#pager1',{edit:true,add:false,del:false});
</script>
{{ content() }}
{{ form("ro_relorder_t/save", "method":"post") }}
<ul class="pager">
<li class="previous pull-left">
{{ link_to("ro_relorder_t", " Go Back") }}
{{ link_to("ro_relorder_t/search", "Back To Search") }}
</li>
<li class="pull-right">
{{ submit_button("Save", "class": "btn btn-success") }}
</li>
</ul>
<div align="center">
<h3>Edit Release Order</h3>
</div>
<table>
<tr>
<td align="right"><label for="ro_relorder_iid">Relorder Iid</label></td>
<td align="left">{{ text_field("ro_relorder_iid", "type" : "numeric") }}</td>
<td align="right"><label for="ro_relorder_id">Relorder</label></td>
<td align="left">{{ text_field("ro_relorder_id", "type" : "numeric") }}</td>
<td align="right"><label for="ro_relorder_date">Relorder Date</label></td>
<td align="left">{{ text_field("ro_relorder_date", "size" : 30) }}</td>
</tr>
<tr>
<td align="right"><label for="ro_project_id">Project</label></td>
<td align="left">{{ text_field("ro_project_id", "size" : 30) }}</td>
<td align="right"><label for="ro_client_iid">Client Iid</label></td>
<td align="left">{{ text_field("ro_client_iid", "type" : "numeric") }}</td>
<td align="right"><label for="ro_client_contact">Client Contact</label></td>
<td align="left">{{ text_field("ro_client_contact", "size" : 30) }}</td>
</tr>
<tr>
<td align="right"><label for="ro_total_amt">Total Amt</label></td>
<td align="left">{{ text_field("ro_total_amt", "size" : 30) }}</td>
<td align="right"><label for="ro_advance_amt">Advance Amt</label></td>
<td align="left">{{ text_field("ro_advance_amt", "size" : 30) }}</td>
<td align="right"><label for="ro_balance_amt">Balance Amt</label></td>
<td align="left">{{ text_field("ro_balance_amt", "size" : 30) }}</td>
</tr>
<tr>
<td align="right"><label for="ro_employee_name">Employee Name</label></td>
<td align="left">{{ text_field("ro_employee_name", "size" : 30) }}</td>
<td align="right"><label for="ro_approval_recvd">Approval Recvd</label></td>
<td align="left">{{ text_field("ro_approval_recvd") }}</td>
<td align="right"><label for="ro_cancelled">Cancelled</label></td>
<td align="left">{{ text_field("ro_cancelled") }}</td>
</tr>
</table>
<div class="col-lg-12" style="height: 250px; overflow: scroll;">
<?php
if(!isset($_GET['page'])) $page=1;
else $page = $_GET['page'];
// get how many rows we want to have into the grid - rowNum parameter in the grid
if(!isset($_GET['rows'])) $limit=10;
else $limit = $_GET['rows'];
// get index row - i.e. user click to sort. At first time sortname parameter -
// after that the index from colModel
if(!isset($_GET['sidx'])) $sidx=1;
else $sidx = $_GET['sidx'];
// sorting order - at first time sortorder
if(!isset($_GET['sord'])) $sord="asc";
else $sord = $_GET['sord'];
$count = count($relOrderItemList) ;
// calculate the total pages for the query
if( $count > 0 && $limit > 0) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
// if for some reasons the requested page is greater than the total
// set the requested page to total page
if ($page > $total_pages) $page=$total_pages;
// calculate the starting position of the rows
$start = $limit*$page - $limit;
// if for some reasons start position is negative set it to 0
// typical case is that the user type 0 for the requested page
if($start < 0) $start = 0;
$responce = new stdClass();
$responce->total = $total_pages;
$responce->page = $page;
$responce->records = $count;
$i = 0;
?>
{% for relOrderItem in relOrderItemList %}
<?php
$responce->rows[$i]['id'] = $relOrderItem->getRoRelorderItemIid() ;
$responce->rows[$i]['cell'] = array($relOrderItem->getRoRelorderItemIid(), $relOrderItem->getRoRelorderSize(), $relOrderItem->getRoRelorderColour(), $relOrderItem->getRoRelorderPosition(), $relOrderItem->getRoRelorderMaterial(), $relOrderItem->getRoRelorderAmount(), $relOrderItem->getRoRelorderAmountRecvd() );
$i++;
?>
{% endfor %}
<?php
echo json_encode($responce);
?>
<table id="list4"><tr><td></td></tr></table>
<div id="pager1"></div>
</div>
{{ submit_button("Save", "class": "btn btn-success") }}</td
</form>
The output of the above code in addition to the top part is the content of json encoded $responce as shown below and an empty jqGrid. If I place this in a text file and specify in the jqGrid setting as source of data then it loads in jqGrid successfully.
{"total":1,"page":1,"records":6,"rows":[
{"id":"1","cell":["1","M","3","Back","E","23409","90890"]},
{"id":"2","cell":["2","L","2","Front","D","989","675"]},
{"id":"3","cell":["3","3","2","Side 3","E","23904","0"]},
{"id":"4","cell":["4","S4","3","P4","D","90382","0"]},
{"id":"5","cell":["5","S5","2","P5","P","302409","0"]},
{"id":"6","cell":["6","S6","B\/W","P6","O","932","0"]}
]}
How to load the JSON data into the Jqgrid? and Load local JSON data in jQgrid without AddJsonRows provide some hints but actual code is not present so I am unable to get it working. Anybody using a MVC framework like CodeIgniter, Yii, CakePhp, Zend etc with jqGrid should be able to suggest a solution.
Thanks
