[andyMember]

PLEASE IGNORE MY LAST POST. I HADN’T TESTED IT PROPERLY AND THERE WERE ACTUALLY SOME PROBLEMS!! Sorry about that.

DO specify the id field for autoincrement fields in the source:

var source =
{
datatype: "json",
datafields: [
{ name: 'year_id', type: 'number' },
{ name: 'year', type: 'number' },
],
id: 'year_id', //ENABLE
url: 'data.php',
addrow: function (rowid, rowdata, position, commit) {
var data = "insert=true&" + $.param(rowdata);
$.ajax({
dataType: 'json',
url: 'data.php',
data: data,
success: function (data, status, xhr) {
	commit(true);
},
error: function(jqXHR, textStatus, errorThrown)
{
	commit(false);
}
});
}
};

After closing (hiding) the popup window, call “updatebounddata” refreshes the gridview in synch with the database:

$("#Save").click(function () {
var newrow={}; //REINITIALISE NOT WORKING !!??
var newrow = {					
//year_id: $("#year_id").val(), // autoincrement - not to be saved
year: $("#year").val()
};
$("#jqxgrid").jqxGrid('addrow', null, newrow);
$("#AddWindow").jqxWindow('hide');
$("#jqxgrid").jqxGrid('updatebounddata'); 
//$("#jqxgrid").jqxGrid('refresh'); // ONLY USE 'updatebounddata'!
});

The only unresolved issue is how to reinitialise the popup field values to null as they are currently set to the previous new entry.
Anyone know how to reinitilise values in a popup? Thanks.

[andyMember]

Thanks Peter for the quick feedback.

Got it working now.

For anyone else facing the same here is the code extract based on the above:

Do NOT specify the id field for autoincrement fields in the source:

var source =
{
datatype: "json",
datafields: [
{ name: 'year_id', type: 'number' },
{ name: 'year', type: 'number' },
],
//id: 'year_id', //IF ENABLED DISPLAYS IN THE GRID AFTER ADD, BUT INCORRECT VALUE!
url: 'data.php',
addrow: function (rowid, rowdata, position, commit) {
var data = "insert=true&" + $.param(rowdata);
$.ajax({
dataType: 'json',
url: 'data.php',
data: data,
success: function (data, status, xhr) {
	commit(true);
},
error: function(jqXHR, textStatus, errorThrown)
{
	commit(false);
}
});
}
};

After closing (hiding) the popup window, call “updatebounddata” and then “refresh” methods (not “refreshdata”). Seems to work:

$("#Save").click(function () {
var newrow={}; //REINITIALISE OTHERWISE SUBSEQUENT POPUPS WILL HAVE PREVIOUS VALUE.
var newrow = {					
//year_id: $("#year_id").val(), // autoincrement - not to be saved
year: $("#year").val()
};
$("#jqxgrid").jqxGrid('addrow', null, newrow);
$("#AddWindow").jqxWindow('hide');
$("#jqxgrid").jqxGrid('updatebounddata'); 
$("#jqxgrid").jqxGrid('refresh'); 
});

[andyMember]

Thanks, Peter, for your advice.
I now understand better and have got it working.
There is only one thing that doesn’t work:
The autoincremented id field (not set via the popup form or grid but by the database) does not display after adding the new row.
It’s there and displays if you manually refresh the page.

A couple of interesting attempts to find a workaround didn’t work either.

For anyone trying to achieve the same thing, here’s the code (same data processing file as above):

$(document).ready(function () {
// prepare the data
data = {};
var theme = 'classic';

var source =
{
datatype: "json",
datafields: [
{ name: 'year_id', type: 'number' },
{ name: 'year', type: 'number' },
],
//id: 'year_id', //IF ENABLED DISPLAYS IN THE GRID AFTER ADD, BUT INCORRECT VALUE!
url: 'data.php',


addrow: function (rowid, rowdata, position, commit) {
var data = "insert=true&" + $.param(rowdata);
$.ajax({
dataType: 'json',
url: 'data.php',
data: data,
success: function (data, status, xhr) {
	commit(true);
},
error: function(jqXHR, textStatus, errorThrown)
{
	commit(false);
}
});
}
};

var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 440,
//height: 600,
autoheight: true,
theme: theme,
source: dataAdapter,
//editable: true,
pageable: true,
pagesize: 30,

//STATUSBAR START
showstatusbar: true,
renderstatusbar: function (statusbar) {
// appends buttons to the status bar.
var container = $("
");
var addButton = $("
Add
");
container.append(addButton);
statusbar.append(container);
addButton.jqxButton({ theme: theme, width: 60, height: 20 });
// add new row.
addButton.click(function (event) {
// open the Add Record popup window when the user clicks a button.. EXPERIMENTAL
//addrow = addrow();
//$("#jqxgrid").jqxGrid('addrow', null, newrow);
//$("#AddWindow").jqxWindow('open');
//$("#AddWindow").jqxWindow('move', offset.left + 30, offset.top + 30);
$("#AddWindow").jqxWindow('show');
$("#year").focus();
});
},
//STATUSBAR END

//COLUMNS START
columns: [
{ text: 'ID', datafield: 'year_id', width: 100 },
{ text: 'Year', datafield: 'year' },
]
//COLUMNS END
});


// INITIALIZE THE ADD POPUP WINDOW AND BUTTONS. 
$("#AddWindow").jqxWindow({ width: 400, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.5, keyboardCloseKey: 'esc', title: 'Add Year', showAnimationDuration: 600, closeAnimationDuration: 200 });
var offset = $("#jqxgrid").offset();
$("#AddWindow").jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60} });
$("#Cancel").jqxButton({ theme: theme });
$("#Save").jqxButton({ theme: theme });

// UPDATE THE ADDED ROW WHEN THE USER CLICKS THE 'SAVE' BUTTON. 
$("#Save").click(function () {
var newrow={}; //REINITIALISE OTHERWISE SUBSEQUENT POPUPS WILL HAVE PREVIOUS VALUE.
var newrow = {					
//year_id: $("#year_id").val(), // autoincrement - not to be saved
year: $("#year").val()
};
$("#jqxgrid").jqxGrid('addrow', null, newrow);
$("#AddWindow").jqxWindow('hide');
//$("#jqxgrid").jqxGrid('refreshdata'); //DOESN'T REFRESH GRID DATA
//$("#jqxgrid").jqxGrid('refresh'); //DOESN'T REFRESH GRID DATAVIEW
});


});

My attempts at manually rereshing the grid were unsuccessful:

$("#Save").click(function () {
var newrow={}; //REINITIALISE OTHERWISE SUBSEQUENT POPUPS WILL HAVE PREVIOUS VALUE.
var newrow = {					
//year_id: $("#year_id").val(), // autoincrement - not to be saved
year: $("#year").val()
};
$("#jqxgrid").jqxGrid('addrow', null, newrow);
$("#AddWindow").jqxWindow('hide');
//$("#jqxgrid").jqxGrid('refreshdata'); //DOESN'T REFRESH GRID DATA
//$("#jqxgrid").jqxGrid('refresh'); //DOESN'T REFRESH GRID DATAVIEW
});

Also, if I specified the id in the source, it then successfully displayed the id after being added via the popup window, but displayed an incorrect value!!

var source =
{
datatype: "json",
datafields: [
{ name: 'year_id', type: 'number' },
{ name: 'year', type: 'number' },
],
//id: 'year_id', //IF ENABLED DISPLAYS IN THE GRID AFTER ADD, BUT INCORRECT VALUE!
url: 'data.php',  

HOW DO YOU REFRESH THE GRID DATA / GRID VIEW?

[Author]

Posts