ParamQuery grid support forum
General Category => Help for ParamQuery Grid (free version) => Topic started by: nur_kurz_hier on May 14, 2019, 04:27:38 pm
-
Hello,
out of necessity, as a newbie, I program a website with PQGrid and encounter some problems.
1.) Translation into German
I did this after the tutorial from the homepage and the controls are all still in English. You can handle it, but it would be a nice-to-have.
https://paramquery.com/demos/Localize
// Initialisation
var $grid = $("div#vormerkungen").pqGrid(obj);
$.extend($.paramquery.pqGrid.defaults, $.paramquery.pqGrid.regional['de']);
$.extend($.paramquery.pqPager.defaults, $.paramquery.pqPager.regional['de']);
2.) Edit the entries in a popup.
Also here I proceeded according to instructions and adapted it to my situation. Unfortunately without success, because here is the problem that he does not pass the data to the popup and I find no documentation about how this works best. Here I also look at similar products like jqgrid and try to get the solution via transfer, but always fail with different error messages.
Here a small snippet of my code. My problem is that I don't get any values with this snippet.
function editRow() {
var rowIndx = getRowIndx();
if (rowIndx != null) {
var row = $grid.pqGrid('getRowData', rowIndx);
var $frm = $("form#crud-form");
$frm.find("input[name='artikelnr']").val(row["artikelnr"]);
$frm.find("input[name='aufgabe']").val(row["aufgabe"]);
$frm.find("input[name='prio']").val(row["prio"]);
....
Basically I have to say that I have never programmed JavaScript before and am rather the office programmer for emergency solutions (we call it "Insellösung" in German), not a programmer of flesh and blood.
I hope anybody can help me to understand. And a third question is, how I can debug this to solve myself.
-
Good morning,
the last question that I had, I have been solve myself by reading all topics here in forum with the keyword "getRowData". There I found a different between the tutorial and solution.
Tutorial and other subjects said:
$frm.find("input[name='artikelnr']").val(row[0]);
//or
$frm.find("input[name='artikelnr']").val(row["ArtikelNr"]);
The solution is:
$frm.find("input[name='artikelnr']").val(row.ArtikelNr);The field is a child attribute and not a part of an array.
Now only the question for the translation into german is open :)
-
I have a new question.
How I can save modified data from grid to database. I didn't find any idea in the internet or very specified to another programming language.
My complete code for edit a row is this:
function editRow() {
var rowIndx = getRowIndx();
if (rowIndx != null) {
var row = $grid.pqGrid('getRowData', { rowIndx: rowIndx });
var aufgabeAlt = row.Aufgabe;
var $frm = $("form#crud-form");
$frm.find("input[name='artikelnr']").val(row.ArtikelNr);
$frm.find("input[name='aufgabe']").val(row.Aufgabe);
$frm.find("input[name='prio']").val(row.Prio);
$frm.find("input[name='VFG']").val(row.VFG);
$("#popup-dialog-crud").dialog({ title: "Vormerkung " + row.ArtikelNr + " bearbeiten", buttons: {
Update: function () {
//update row.
row = [];
row.ArtikelNr = $frm.find("input[name='artikelnr']").val();
row.Aufgabe = $frm.find("input[name='aufgabe']").val();
row.Prio = $frm.find("input[name='prio']").val();
row.VFG = $frm.find("input[name='vfg']").val();
// Umsetzung im Grid
$grid.pqGrid('updateRow', { rowIndx: rowIndx, row: row, checkEditable: false });
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
}).dialog("open");
}
}
-
There are 2 ways:
1. Send complete data from grid as json data and save it in database.
2. Send changed / deleted/ added data as json data and update database. (recommended )
Second approach is shown in the editing examples.
-
Good morning,
thank your very much. Did you mean "batch editing" with the buttons in toolbar?
Please can you give the url, so I can try to understand and implement in my tool.
-
Sorry for that stupid question, but the API documentation is up to date or the examples was built with this version of API?
I compare both and found mistakes, because I must double check this for my error message.
Error message: jquery.min.js:4 Uncaught Error: no such method 'getInstance' for pqGrid widget instance
In the example was used ...getInstance... to spoke with the grid, but in den API documentation you don't find this method.
-
Batch editing example url: https://paramquery.com/demos/editing_batch
API for getInstance
https://paramquery.com/api#method-getInstance
-
Again thank you, but it don't work!
In my code to edit the grid I have been integrate the function to save the edited values to db.
My function saveChanges()
function saveChanges() {
var grid = $( ".selector" ).pqGrid( "getInstance" ).grid;
var changes = $( ".selector" ).pqGrid('getChanges');
$.ajax({
dataType: "json",
type: "POST",
async: true,
beforeSend: function (jqXHR, settings) {
$( ".selector" ).pqGrid( "showLoading" );
},
url: "Vormerkungen_Grid_Speichern.php",
data: { list: JSON.stringify(changes) },
success: function (changes) {
//grid.commit({ type: 'add', rows: changes.addList });
grid.commit({ type: 'update', rows: changes.updateList });
//grid.commit({ type: 'delete', rows: changes.deleteList });
//grid.history({ method: 'reset' });
},
complete: function () {
$( ".selector" ).pqGrid( "hideLoading" );
}
})
};
And my file to execute the Update-Statement
<?php
// https://paramquery.com/demos/editing_batch
// Datei dient nur zum Speichen von Veränderungen im Grid
require ('./system_connector_mysql.php');
$artikelnr = $_POST['ArtikelNr'];
$aufgabe = $_POST['Aufgabe'];
$prio = $_POST['Prio'];
console_log $_POST['ArtikelNr'];
console_log $_POST['Aufgabe'];
console_log $_POST['Prio'];
$query = "UPDATE tab_vormerkungen SET Aufgabe = '$aufgabe', Prio=$prio WHERE ArtikelNr=$artikelnr";
mysql_query($query) OR ('Vormerkungen_Speichern.php - Zeile 13 |' . mysql_error());
?>
I don`t see anything in the console as well in db. What ist wrong?
-
Sorry but it doesn't work. In my opinion, the documentation is not so easy (for me to understand).
-
After a while I have solved the problem with saving in db and I would like to share to other to stay not for the same problem:
=> main file
var row = $grid.pqGrid('getRowData', { rowIndx: getRowIndx() })
artikel = row.ArtikelNr;
aufgabeAlt = row.Aufgabe;
if (typeof a2 !== 'undefined'){
aufgabeNeu = a2;
} else {
aufgabeNeu = row.Aufgabe;
}
if (typeof a3 !== 'undefined'){
prioritaet = a3;
} else {
prioritaet = row.Prio;
}
$.ajax({
url: 'Vormerkungen_Grid_Speichern.php',
data: {'ArtikelNr': artikel, 'AufgabeAlt': aufgabeAlt, 'AufgabeNeu': aufgabeNeu, 'Prio': prioritaet},
dataType: 'JSON',
type: 'GET',
contentType: false,
success: function(output) {
$grid.pqGrid.trigger("reloadGrid");
}
});
<?php
// Datei dient nur zum Speichen von Veränderungen im Grid
require ('./system_connector_mysql.php');
if(isset($_GET['ArtikelNr'])){
$artikelnr = $_GET['ArtikelNr'];
$aufgabe = $_GET['AufgabeNeu'];
$prio = $_GET['Prio'];
$query = "UPDATE tab_vormerkungen SET Aufgabe = '$aufgabe', Prio=$prio WHERE ArtikelNr=$artikelnr";
mysql_query($query) OR ('Vormerkungen_Speichern.php - Zeile 13 |' . mysql_error());
}
else {
echo 'no data here';
}
?>
I hope this is helpful