I'm having trouble with a search results page. The search page has 16 inputs and the results page uses a dynamic query to fetch the results and input them into an array which is used (with json_encode) to populate a jqgrid with the results. However, the grid is only displaying the first record. I've added a php "echo
json_encode()..." script to the page to view the json formatted results and it's showing all the records in the search results, so I don't know why the grid is only displaying the first row. I'd appreciate any help I can get on this. Here is the script for the grid (I'm not including the dynamic query or the array scripts because they're working fine):
$(document).ready(function () {
$("#slist").jqGrid({
data: "srchres",
datatype: "local",
mtype: "GET",
colNames: ['ProjectID', 'Customer Name', 'Invoice Number', 'Vehicle Info.', 'Project Date'],
colModel: [
{name:'ProjectID', index:'ProjectID', align:'right', hidden:true, editable:false},
{name:'CustomerName', index:'CustomerName', editable:false, width:175, align:'center'},
{name:'InvoiceNumber', index:'InvoiceNumber', editable:false, width:175, align:'center'},
{name:'VehicleInfo', index:'VehicleInfo', width:350, align:'left', editable:false},
{name:'ProjectDate', index:'ProjectDate', editable:false, width:125, align:'center', formatter: 'date', formatoptions: { newformat: 'm/d/Y' }},
],
jsonReader: {repeatitems: false, id: "ProjectID"},
onSelectRow: function (rowid) {
var rowData = $(this).getRowData(rowid);
document.location.href = "../manageproject.php?pid=" + rowData['ProjectID'];
},
pager: "#spager",
loadonce: true,
rowNum: 20,
rowList: [],
width: "auto",
height: "auto",
caption: "",
sortname: "",
sortorder: "",
viewrecords: true,
gridview: true
});
var srchres = <?php echo json_encode($projects_array); ?>;
for(var i=0;i<srchres.length;i++)
jQuery("#slist").addRowData(srchres[i].id,srchres[i]);
});
Try with the following settings into the grid:
$(document).ready(function () {
var srchres = <?php echo json_encode($projects_array); ?>;
$("#slist").jqGrid({
data: srchres,
datatype: "local",
....
});
...
});
Note the variable srchres and how is defined into the grid options. addRowData is not needed to be used.
Good day,
I'm pretty new in extjs 5 and mvvm. I want to make an ajax request in order to display a treepanel with datas caught with a php.
Here is my store
Ext.define('MyApp.store.servicesStore', {
extend: 'Ext.data.TreeStore',
// alias: 'store.servicesStore',
storeId : 'servicesStore',
model : 'MyApp.model.servicesModel',
proxy: {
type: 'ajax',
url: 'app/store/data/GetServices.php'
},
root: {
text: 'Events',
id: 'root'
},
autoLoad: true,
folderSort: true
});
I've seen that a "success" can resolve that issue but I don't need a succes as it's only displayed in a treePanel
Ext.define('MyApp.view.tabServices.servicesTab', {
extend: 'Ext.tree.Panel',
xtype: 'servicesTab',
layout: {
type: 'border'
},
useArrows: true,
rootVisible: false,
store: {type: 'servicesStore'},
forceFit: true,
columns: [{
xtype: 'treecolumn',
dataIndex: 'text',
width: 600
}, {
dataIndex: 'mbt',
cls: 'mbtcss',
width: 80
}, {
dataIndex: 'bt',
cls: 'btcss',
width: 75
}, {
dataIndex: 'details', // port separated from rest
width: 60
}, {
dataIndex: 'code',
width: 80
}]
});
So, when I launch my app, the "You're trying to decode an invalid JSON String" appears, how can I do to make it understand that I actually use a php file?
More precisely, that code is working in extjs 3.4
To run the PHP code which did work under ExtJS 4 you must either modify your PHP to return the data in JSON format. Or otherwise you set your "enable compatibility" to version 4.
See "Enabling Compatibility" under http://docs.sencha.com/extjs/5.0/whats_new/5.0/extjs_upgrade_guide.html#Enabling_Compatibility.
compatibility: {
ext: '4.2'
}
I'm working with a jqgrid and I would like to upload a file (pictures and pdf's). I've seen a lot of examples but nothing... I'd like to do un ajaxfileupload. Here is my code,
colModel: [
{ name: "id", index:"id", key: true,width: 30,editable: false },
{ name: "name", index:"name", width: 100,editable: true },
{ name: "fileToUpload",
editoptions: {
enctype: "multipart/form-data"
},
edittype:'file',
index: 'fileToUpload',
width: 150,
align: "left",
editable: true },
],
I've four days trying and looking for informations and tutoriasl!! help me!
May be duplicate of :
File upload with jqgrid in PHP
I hope this will works.
Can Some one help me, I have a jqgrid and I want to highlight the row if the checkbox is true, thanks!!
this is what i want to make in this project...
function loadjqGrid(jsonGridData){
var xaxis=1300
var yaxis = $(document).height();
yaxis = yaxis-500;
getGrids();
$("#maingrid").jqGrid({
url:'models/mod.quoservicetypedetails.php?ACTION=view',
mtype: 'POST',
datatype: 'xml',
colNames:getColumnNames(jsonGridData),
colModel :[
{name:'TypeID', index:'TypeID', width:350,hidden:true, align:'center',sortable:false,editable:true,
edittype:"select",editoptions:{value:getTypeID()},editrules: { edithidden: true}},
{name:'Order1', index:'Order1', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
{name:'Order2', index:'Order2', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
{name:'Order3', index:'Order3', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
{name:'Description', index:'Description', width:140, align:'center',sortable:false,editable:true,
edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
{name:'Notes', index:'Notes', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
{name:'Measure', index:'Measure', width:80, align:'center',sortable:false,editable:true, edittype:"textarea", editoptions:{size:"30",maxlength:"30"}},
{name:'UnitPrice', index:'UnitPrice', width:100, align:'center',sortable:false,editable:false,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
{name:'Remarks', index:'Remarks', width:140, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
{name:'UnitCost', index:'UnitCost', width:100, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
{name:'Service', index:'Service', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},
//If the GroupHeader is true the row background is yellow
{name:'GroupHeader', index:'GroupHeader', width:100, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}},
{name:'IsGroup', index:'IsGroup', width:80, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}},
],
viewrecords: true,
rowNum:20,
sortname: 'id',
viewrecords: true,
sortorder: "desc",
height: yaxis,
pager : '#gridpager',
recordtext: "View {0} - {1} of {2}",
emptyrecords: "No records to view",
loadtext: "Loading...",
pgtext : "Page {0} of {1}",
height: yaxis,
width: xaxis,
shrinkToFit: false,
multiselect: true,
editurl:'models/mod.quoservicetypedetails.php?ACTION=edit'
});
}
How could I do this? Can someone help me?
I described in the answer one good way how you can implement the highlighting.
Version 4.3.2 of jqGrid has new feature - rowattr callback (see my original suggestion), which was introduced especially for cases like yours. It allows you to highlight some rows of grid during filling of the grid. To have the best performance advantage you should use gridview: true additionally. By the way I recommend you to use gridview: true in all jqGrids.
The usage of rowattr callback is very easy:
gridview: true,
rowattr: function (rd) {
if (rd.GroupHeader === "1") { // verify that the testing is correct in your case
return {"class": "myAltRowClass"};
}
}
The CSS class myAltRowClass should define background color of highlighted rows.
The corresponding demo you can find here:
Because in your demo you need just highlight and not select the rows I didn't used multiselect: true in my demo. In case of multiselect: true it works exactly in the same way.
At the end of my answer I would like to recommend you to use column templates. The feature will make your code shorter, more readable and easy to maintain. What you need to do is the following:
you can include common or the most frequently used settings from column definitions in cmTemplete. In your case it could be
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80}
then you can define some variables which describe common properties which you use frequently in some columns. For example:
var myCheckboxTemplate = {formatter: 'checkbox', edittype: 'checkbox', type: 'select',
editoptions: {value: "1:0"}},
myTextareaTemplate = {edittype: "textarea",
editoptions: {size: "30", maxlength: "30"}};
after that you can use myCheckboxTemplate and myTextareaTemplate inside of colModel which will reduced in your case to the following
colModel: [
{name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select",
editoptions: {value: getTypeID()}, editrules: { edithidden: true}},
{name: 'Order1', index: 'Order1', template: myTextareaTemplate},
{name: 'Order2', index: 'Order2', template: myTextareaTemplate},
{name: 'Order3', index: 'Order3', template: myTextareaTemplate},
{name: 'Description', index: 'Description', width: 140, template: myTextareaTemplate},
{name: 'Notes', index: 'Notes', width: 120, template: myTextareaTemplate},
{name: 'Measure', index: 'Measure', template: myTextareaTemplate},
{name: 'UnitPrice', index: 'UnitPrice', width: 100, editable: false, template: myTextareaTemplate},
{name: 'Remarks', index: 'Remarks', width: 140, template: myTextareaTemplate},
{name: 'UnitCost', index: 'UnitCost', width: 100, template: myTextareaTemplate},
{name: 'Service', index: 'Service', width: 120, template: myTextareaTemplate},
//If the GroupHeader is true the row background is yellow
{name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate},
{name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate}
],
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},
I have one JQGrid in my php file and I have placed inside one form . On submitting form, i just want the checked value from the JQGrid.
<script type="text/javascript">
$(function() {
$("#list1").jqGrid({
url:'revMemberJson.php',
datatype: 'json',
mtype: 'GET',
loadonce: true,
// jsonReader: { repeatitems: false },
colNames:['Name','Mobile'],
colModel :[
{name:'name', index:'name',width: 100,searchoptions: { sopt: ['eq', 'ne','cn']}},
{name:'mobile', index:'mobile',search: false,width: 120}
],
pager: '#pager',
rowNum: 5,
rowList:[5,20,30],
rownumbers: true,
multiselect:true,
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
height: 'auto',
width: 420,
shrinkToFit: false,
gridview: true,
caption: 'Members'
});
jQuery("#list1").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
});
var myGrid = $('#list1'),
selRowId = myGrid.jqGrid ('getGridParam', 'selrow'),
celValue = myGrid.jqGrid ('getCell', selRowId, 'mobile');
</script>
And I have used the following code to get the checked value , But All stuff are made in java script. But I have to get the values for updating the database. So i need to get the value by post.
Please provide me the methods..
You should use
var selRowIds = myGrid.jqGrid ('getGridParam', 'selarrrow');
insteda of
var selRowId = myGrid.jqGrid ('getGridParam', 'selrow');
to get the array with ids of selected rows. You can use JSON.stringify(selRowIds) or selRowIds.join(',') to convert array in the form which you can easy send to the server.
I think that you can find some additional information in the answer (see the demo).