jQuery UI Widgets › Forums › Grid › addrow with paging
Tagged: add row, addrow, angular grid, id, jquery grid, jqxgrid, row
This topic contains 4 replies, has 2 voices, and was last updated by simpzoid 9 years, 5 months ago.
-
Authoraddrow with paging Posts
-
Hi there,
The addrow button (see code after // addrow handler) works on the first page of the data, but when I press the addrow button on other pages, it doesn’t work. More specifically, a row is inserted but the id column is not assigned ‘noid’ and any edits I make disappear when I finish editing the cell.
In case it matters, I was trying to achieve a data grid where I could cache a number of edits on the client and then synchronise these to a server when I am finished. The back end is on a private network.
Any help would be greatly appreciated.
Regards,
Scott<link rel=”stylesheet” href=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/styles/jqx.base.css’) %]” />
<script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jquery-1.11.3.js’) %]”></script>
<script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxcore.js’) %]”></script>
<script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxdata.js’) %]”></script><script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxbuttons.js’) %]”></script>
<script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxscrollbar.js’) %]”></script>
<script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxmenu.js’) %]”></script>
<script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxcheckbox.js’) %]”></script>
<script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxlistbox.js’) %]”></script>
<script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxdropdownlist.js’) %]”></script>
<script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxgrid.js’) %]”></script>
<script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxgrid.sort.js’) %]”></script>
<script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxgrid.pager.js’) %]”></script>
<script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxgrid.selection.js’) %]”></script>
<script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxgrid.edit.js’) %]”></script>
<script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxgrid.columnsresize.js’) %]”></script>
<script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxgrid.filter.js’) %]”></script>
<script type=”text/javascript” src=”[% c.uri_for(‘/static/js/ext/jqwidgets-ver3.8.0/jqwidgets/jqxgrid.grouping.js’) %]”></script><script type=”text/javascript”>
$(document).ready(function () {
// prepare the datavar url = ‘http://alphaq:3000/REST/jqxcrud?’;
var theme = ‘classic’;
var edited_rows = [];
// edited_rows[0]=1;var generaterow = function () {
var row = {};row[“CompanyName”] = “New Company”;
row[“ContactName”] = “New Contact”;
row[“Address”] = “New Address”;
row[“City”] = “New City”;
row[“Country”] = “New Cuntry”;
return row;
}var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’},
{ name: ‘CompanyName’},
{ name: ‘ContactName’},
{ name: ‘ContactTitle’},
{ name: ‘Address’},
{ name: ‘City’},
{ name: ‘Country’}
],
url: url,update_rows: function (rowdata, commit) {
// synchronize with the server – send update command
// var data = “update=true&” + $.param(rowdata);
console.log(‘in function source.updaterow \n’);
$.ajax({
contentType: ‘application/json’,
dataType: ‘json’,
url: url,
data: JSON.stringify(rowdata),
type: ‘POST’,
cache: true,
success: function (data, status, xhr) {
// update command is executed.
$(“#jqxgrid”).jqxGrid(“updatebounddata”); //$(“#jqxgrid”).jqxGrid(“addrow”, ‘new’, {}, “first”);
// commit(true);
},
error: function (jqXHR, textStatus, errorThrown) {
alert(“Could not update server data”);
commit(false);
}
});
},
root: ‘Rows’,
id: ‘id’,
cache: false,
beforeprocessing: function(data)
{source.totalrecords = data[“TotalRows”];
}
};var dataadapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 600,
source: dataadapter,
editable: true,
theme: theme,
autoheight: true,
pageable: true,
virtualmode: true,
rendergridrows: function()
{
return dataadapter.records;
},
columns: [
{ text: ‘Company ID’, datafield: ‘id’, width: 250 },
{ text: ‘Company Name’, columntype: ‘textbox’, editable: false, datafield: ‘CompanyName’, width: 250 },
{ text: ‘Contact Name’, datafield: ‘ContactName’, width: 200 },
{ text: ‘Contact Title’, datafield: ‘ContactTitle’, width: 200 },
{ text: ‘Address’, datafield: ‘Address’, width: 180 },
{ text: ‘City’, datafield: ‘City’, width: 100 },
{ text: ‘Country’, datafield: ‘Country’ }
]
});// buttons
$(“#addrowbutton”).jqxButton({ theme: theme });
$(“#updaterowsbutton”).jqxButton({ theme: theme });// addrow handler.
$(“#addrowbutton”).bind(‘click’, function () {
$(“#jqxgrid”).jqxGrid(“addrow”, ‘noid’, {}, “first”);
for (i = 0; i < edited_rows.length; i++) {
edited_rows[i] = edited_rows[i] + 1;
}});
//update rows handler
$(“#updaterowsbutton”).bind(‘click’, function () {
console.log(‘The following rows have been edited’);
var return_data = [];
for (i = 0; i < edited_rows.length; i++) {
return_data.push($(“#jqxgrid”).jqxGrid(‘getrowdata’, edited_rows[i]));
}
source.update_rows(return_data) ;
//update_rows(return_data);
});//update edited_rows if a value is changed
$(‘#jqxgrid’).on(‘cellendedit’, function (event) {
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var in_array = “false”;if (edited_rows.length != 0) {
for (i = 0; i < edited_rows.length; i++) {
if (edited_rows[i] == selectedrowindex) {
in_array = “true”;
console.log(‘row exists’ + selectedrowindex);
}
}
}
if (in_array == “false”) {
edited_rows.push(selectedrowindex);
console.log(‘pushing’ + selectedrowindex);
}
});});
</script><body class=’default’>
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div style=”float: left;” id=”jqxgrid”>
</div>
<div style=”margin-left: 30px; float: left;”>
<div>
<input id=”addrowbutton” type=”button” value=”Add New Row” />
</div>
<div style=”margin-top: 10px;”>
<input id=”deleterowbutton” type=”button” value=”Delete Selected Row” />
</div>
<div style=”margin-top: 10px;”>
<input id=”updaterowsbutton” type=”button” value=”Update Edited Rows” />
</div>
</div>
</div>
<div id=”log”></div>
</body>
`Hi Scott,
Each row’s id has to be unique, but you are assigning the same id (‘noid’) to multiple rows. That is why you experience unexpected behaviour.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Dimitar,
Thanks that helps but when I assign a unique id I still get the same problem on all but the first page.
// addrow handler.
$(“#addrowbutton”).bind(‘click’, function () {
update_row_index = update_row_index + 1;
var add_id = ‘noid’ + update_row_index;
$(“#jqxgrid”).jqxGrid(“addrow”, add_id, {}, “first”);
for (i = 0; i < edited_rows.length; i++) {
edited_rows[i] = edited_rows[i] + 1;
}});
update_row_index is a global.
Regards,
ScottHi Scott,
The following example: https://www.jseditor.io/doc?key=b3ea19de0e7211e5b1c780ee734cf820 shows that your addrow code works fine.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Dimitar,
Thanks for all your help.
Regards,
Scott -
AuthorPosts
You must be logged in to reply to this topic.