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.
Related
Free jqGrid uses data in the following JSON name:value pairs format:
var data = {
"page": "1",
"records": "3",
"rows": [
{ "DataID": "1", "DataDesc": "Test 1", "DataTitle": "Test 1" }
]
};
I have the following in the PHP script:
$i=0;
while ($row = mysql_fetch_assoc($result)) {
$data->rows[$i]['cell']=array($row);
$i++;
}
print json_encode($data);
Which returns:
{"rows":[{"cell":[{"user_id":"00082563","first_name":"Peter","case_title":"Male with STI (urethritis)","case_started":"2017-06-02 10:52:10"}]}]}
Which looks to be OK. However, with the JSON parts of the code below, the grid doesn't display at all.
function loadFirstGrid() {
$("#FirstGrid").jqGrid({
url: "scripts/json_test.php?user=" + user,
dataType: "json",
mtype: "GET",
postData: {
json: JSON.stringify(data)
},
colModel: [{
name: "user_id",
label: "User ID",
width: 120
},
{
name: "first_name",
label: "Name",
width: 400
},
{
name: "case_title",
label: "Case Title",
width: 500
},
{
name: "case_started",
label: "Case Started",
width: 200
},
],
emtyrecords: "Nothing to display",
viewrecords: true,
sortable: true,
shrinkToFit: false,
autowidth: true,
caption: 'First Grid'
});
}
But if I remove the postData part to have the following, the grid displays, but of course no data.
function loadFirstGrid() {
$("#FirstGrid").jqGrid({
url: "scripts/json_test.php?user=" + user,
dataType: "json",
mtype: "GET",
colModel: [{...
Any ideas?
OK, finally worked through this and got it working with this
function loadFirstGrid() {
$("#FirstGrid").jqGrid({
url: "scripts/json_test.php?user=" + user,
dataType: "json",
mtype: "GET",
colModel: [
{name: "user_id", label:"User ID", width: 120},
{name: "first_name", label:"Name", width: 400},
{name: "case_title", label:"Case Title", width: 500},
{name: "case_started", label:"Case Started", width: 200},
],
emtyrecords: "Nothing to display",
viewrecords: true,
sortable: true,
shrinkToFit: false,
autowidth: true,
caption: 'First Grid',
});
}
To get the correct format JSON for jqGrid:
{"page":"1","total":"1","records":"1","rows":[{"user_id":"00082563","first_name":"Peter","case_title":"Male with STI (urethritis)","case_started":"2017-06-02 10:52:10"}]}
I used the following PHP script:
$page = '1';
$total_pages = '1';
$count = '1';
$data = (object) array('page' => $page, 'total' => $total_pages, 'records' =>$count, 'rows' => "");
$data->page = $page;
$data->total = $total_pages;
$data->records = $count;
$i=0;
while ($row = mysql_fetch_assoc($result)) {
$data->rows=array($row);
$i++;
}
print json_encode($data);
?>
(NOTE: I don't care about the number of pages, total_pages and count as my grids will only ever have one primary record and multiple subgrids with only one record). So hope this helps someone; there is not much in the documentation or examples that describes how to do this with Free jqGrid ;-(
First of all JavaScript is case sensitive language and jqGrid will ignore parameter dataType: "json". You should fix it to datatype: "json".
Seconds, you use exotic format of the JSON data:
{
"rows": [{
"cell": {
"user_id": "00082563",
"first_name": "Peter",
"case_title": "Male with STI (urethritis)",
"case_started": "2017-06-02 10:52:10"
}
}]
}
instead of
{
"rows": [ {
"user_id": "00082563",
"first_name": "Peter",
"case_title": "Male with STI (urethritis)",
"case_started": "2017-06-02 10:52:10"
}]
}
or
[ {
"user_id": "00082563",
"first_name": "Peter",
"case_title": "Male with STI (urethritis)",
"case_started": "2017-06-02 10:52:10"
}]
You don't use loadonce: true and it's unclear, whether you plan to implement server side paging, sorting and filtering of data or you want to return all the data at once and jqGrid should use client side paging, sorting and filtering.
Finally, you should use name properties of colModel corresponds to the properties of user_id. It's very important to understand, that jqGrid have to assign unique id to every row of the grid (see here). Thus you have to inform jqGrid, which property contains rowid. You can use either jsonReader: { id: "user_id" } or to include property key: true in the column user_id.
The demo https://jsfiddle.net/OlegKi/qgrwymuu/1/ contains an example of described above modifications. It uses Echo service of JSFiddle to simulate server, which responses with some JSON data.
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 using jqgrid to show data from a database, I have this HTML file:
<script type="text/javascript">
jQuery().ready(function (){jQuery("#tblclientes").jqGrid({
url: "category.php",
datatype: "xml",
mtype: "GET",
colNames: ["ID", "Categorias Es", "Categorias En", "Categorias Ru"],
colModel: [
{ name: "idCategoria", width: 55 },
{ name: "nomCategoriaEs", width: 200 },
{ name: "nomCategoriaEn", width: 200, align: "right" },
{ name: "nomCategoriaRu", width: 200, align: "right" },
],
pager: jQuery("#paginacion"),
rowNum:10,
rowList:[10,20,30],
sortname: "idCategoria",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption:"XML Example" }).navGrid('#paginacion',{edit:false,add:false,del:false});
});
</script>
And this is my XML file created by the PHP file:
<?xml version='1.0' encoding='utf-8'?><rows><page>1</page><total>2</total><records>13</records><row id="1"><cell>1</cell><cell>Coke Drums</cell><cell>Coke Drums</cell><cell>Коксовые камеры</cell></row><row id="2"><cell>2</cell><cell>Columnas</cell><cell>Columns</cell><cell>Колонны</cell></row><row id="3"><cell>3</cell><cell>Reactores</cell><cell>Reactors</cell><cell>Реакторы</cell></row><row id="4"><cell>4</cell><cell>Intercambiadores de Calor</cell><cell>Heat Exchangers</cell><cell>Теплообменное оборудование</cell></row><row id="5"><cell>5</cell><cell>Autoclaves</cell><cell>Autoclaves</cell><cell>Автоклавы</cell></row><row id="6"><cell>6</cell><cell>Separadores</cell><cell>Separators</cell><cell>Сепараторы</cell></row><row id="7"><cell>7</cell><cell>Drums</cell><cell>Drums</cell><cell>Баки для нефтепродуктов</cell></row><row id="8"><cell>8</cell><cell>Módulos / Skid</cell><cell>Process Modules / Skid</cell><cell>Технологические модули, модульные основания</cell></row><row id="9"><cell>9</cell><cell>Tanques</cell><cell>Storage Tanks</cell><cell>Резервуары для хранения нефтепродуктов</cell></row><row id="10"><cell>10</cell><cell>Fundaciones OWF</cell><cell>OWF Fundations</cell><cell>Фундаменты для ветровых энергоустановок</cell></row></rows>
The Jqgrid appears as I want, but without data.
I don't see any important errors in the code or in the data which you posted. The demo uses the same code (with minimal modifications) and the same data saved as file and all works. I would recommend you to use loadError callback (see the answer) to see more information which kind of error you have.
I've such a simple question but can't find answer (documentation) on it. I've created Grid , where information is retrieved from MySQL database. Using Ext JS 4.2 .
Let's take a look of script ...
Ext.define("AppStore",{
extend: "Ext.data.Model",
fields: [
{name: "nickname" , type: "auto"},
{name: "email" , type: "auto"}
]
});
var store = Ext.create("Ext.data.Store",{
model: "AppStore",
proxy: {
type: "ajax",
api: {
read : "./read.php",
update : "./update.php"
},
reader: {
type: "json",
root: ""
},
writer: {
type: "json",
writeAllFields: true,
encode: false,
root: ""
}
},
listeners: {
read: function(operation, callback, scope){
},
update: function(operation, callback, scope){
// Do I have to do something from here ?
}
},
autoLoad: true
});
Ext.create("Ext.grid.Panel",{
store: store,
selMode: "cellmodel",
columns: [
{
text: "Nickname",
flex: 1,
dataIndex: "nickname",
editor: {
xtype: "textfield",
allowBlank: false
}
},
{
text: "Email",
flex: 1.5,
dataIndex: "email",
editor: {
xtype: "textfield",
allowBlank: false
}
}
],
plugins: [
Ext.create("Ext.grid.plugin.CellEditing",{
clicksToEdit: 2
})
]
});
Everything is working fine , just interested in how I have to send request to MySQL for updating data after changing it in Grid cell . Any example , documentation or the way how to accomplish this task will be appreciated , thanks ...
Typically, you'll want to call sync() on your grid's store in order to persist the model changes to the server. This can be configured to occur automatically on every edit (see the autoSync property of the store). However, I would suggest it's better to handle the sync() call based on some specific action (e.g., a "Save" button being clicked, etc.).
So, due to my noobiness, with EXT.js I am using the GUI ext designer to develop a data portal of sorts. I am retrieving the data form the server via PHP encoded as JSON. I have dropped the url into the GUI and set the params as I saw fit. I tried the edit prefs, to change the URL.
And I am getting a load error, any help would be great. Screenshot link.
http://camdesigns.net/images/img.png
Side question, what is the root param?
Here is my store:
MyStore = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
MyStore.superclass.constructor.call(this, Ext.apply({
storeId: 'MyStore',
url: '/lids/return-data-json.php?investor=fifth-colony-capital',
root: 'rows',
successProperty: 'true',
autoLoad: true,
restful: true,
fields: [
{
name: 'total_investors',
mapping: 'total_investors'
},
{
name: 'total_insurerds',
mapping: 'total_insurerds'
},
{
name: 'total_policies',
mapping: 'total_policies'
},
{
name: 'fieldactive_policies',
mapping: 'active_policies'
},
{
name: 'maturity_count',
mapping: 'maturity_count'
},
{
name: 'average_age',
mapping: 'average_age',
allowBlank: false
},
{
name: 'average_life_expectancy',
mapping: 'average_life_expectancy'
},
{
name: 'minimum_life_expectancy',
mapping: 'minimum_life_expectancy',
allowBlank: false,
type: 'string'
}
]
}, cfg));
}
});
new MyStore();