jQuery UI Widgets › Forums › Grid › jqxGrid: Error The data is still loading
Tagged: bindingcomplete, error, event, grid, jqxgrid, save, The data is still loading, updaterow
This topic contains 8 replies, has 2 voices, and was last updated by Dimitar 10 years, 3 months ago.
-
Author
-
Hi,
I am not sure what I have missed here in the below code. I am getting this error ” jqxGrid: The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handle” after updateRow method
Thanks in advance.
$(document).ready(function () {
var editrow = -1;
var url = “allLookup?pageType=users”;
var source =
{
dataType : “json”,
url : url,
datafields:
[
{ name: ‘userID’, type: ‘string’ },
{ name: ‘name’, type: ‘string’ },
{ name: ’email’, type: ‘string’ },
{ name: ‘phone’, type: ‘string’ },
{ name: ‘status’, type: ‘string’ },
] ,updateRow: function (rowID, rowData, commit) {
var newData = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, rowID);
var data = $.param(newData);
$.ajax({
dataType : ‘json’,
url : ‘updateUser.do’,
data : data,
success : function(data, status, xhr) {
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
commit(true);
},});
},
deleteRow : function(rowid) {
var data = “UserId=” + rowid;
$.ajax({
dataType : ‘json’,
url : ‘removeUser.do’,
data : data,
success : function(data, status, xhr) {
commit=true;
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
}
});}
};var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
}
});var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties,rowData) {
if (rowData.status == (‘Inactive’)) {
return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: red;”>’ + value + ‘</span>’;
}
else {
return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: green;”>’ + value + ‘</span>’;
}
}var cellbeginedit = function (row, datafield, columntype, value) {
if (row == editrow)
return true;
else
return false;
}$(“#jqxgrid”).jqxGrid(
{
width: 850,
// theme: ‘energyblue’,
altrows: true,
source: dataAdapter,
sortable: true,
editable: true,
enabletooltips: true,
showToolbar: true,
selectionmode: ‘singlerow’,
editmode: ‘selectedrow’,
columnsresize: true,
renderToolbar: function(toolBar)
{
var toTheme = function (className) {
if (theme == “”) return className;
return className + ” ” + className + “-” + theme;
}var container = $(“<div style=’overflow: hidden; position: relative; height: 100%; width: 100%;’></div>”);
var buttonTemplate = “<div style=’float: left; padding: 3px; margin: 2px;’><div style=’margin: 4px; width: 16px; height: 16px;’></div></div>”;
var addButton = $(buttonTemplate);
var editButton = $(buttonTemplate);
var deleteButton = $(buttonTemplate);
var cancelButton = $(buttonTemplate);
var updateButton = $(buttonTemplate);
container.append(addButton);
container.append(editButton);
container.append(deleteButton);
container.append(cancelButton);
container.append(updateButton);
toolBar.append(container);
addButton.jqxButton({cursor: “pointer”, enableDefault: false, disabled: true, height: 25, width: 25 });
addButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-plus’));
addButton.jqxTooltip({ position: ‘bottom’, content: “Add”});
editButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
editButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-edit’));
editButton.jqxTooltip({ position: ‘bottom’, content: “Edit”});
deleteButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
deleteButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-delete’));
deleteButton.jqxTooltip({ position: ‘bottom’, content: “Delete”});
updateButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
updateButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-save’));
updateButton.jqxTooltip({ position: ‘bottom’, content: “Save Changes”});
cancelButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
cancelButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-cancel’));
cancelButton.jqxTooltip({ position: ‘bottom’, content: “Cancel”});
var updateButtons = function (action) {
switch (action) {
case “Select”:
addButton.jqxButton({ disabled: false });
deleteButton.jqxButton({ disabled: false });
editButton.jqxButton({ disabled: false });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
case “Unselect”:
addButton.jqxButton({ disabled: true });
deleteButton.jqxButton({ disabled: true });
editButton.jqxButton({ disabled: true });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
case “Edit”:
addButton.jqxButton({ disabled: true });
deleteButton.jqxButton({ disabled: true });
editButton.jqxButton({ disabled: true });
cancelButton.jqxButton({ disabled: false });
updateButton.jqxButton({ disabled: false });
break;
case “End Edit”:
addButton.jqxButton({ disabled: false });
deleteButton.jqxButton({ disabled: false });
editButton.jqxButton({ disabled: false });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
}
}
var rowKey = null;
$(“#jqxgrid”).on(‘rowselect’, function (event) {
if (cancelButton.jqxButton(‘disabled’) || updateButton.jqxButton(‘disabled’)) {
var args = event.args;
rowKey = args.rowindex;
var rowData = args.row;
updateButtons(‘Select’);
}
});addButton.click(function (event) {
if (!addButton.jqxButton(‘disabled’)) {
$(“#jqxwindow”).jqxWindow(‘open’);
}
});
cancelButton.click(function (event) {
if (!cancelButton.jqxButton(‘disabled’)) {
$(“#jqxgrid”).jqxGrid(‘endrowedit’, rowKey, true); // if true, the changes are canceled.
editrow=-1;
updateButtons(‘Unselect’);
}
});
updateButton.click(function (event) {//save changes
if (!updateButton.jqxButton(‘disabled’)) {
$(“#jqxgrid”).jqxGrid(‘endrowedit’, rowKey, false);//is false, the changes are saved
var datarow;
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(“#jqxgrid”).jqxGrid(‘getrowid’, selectedrowindex);
var commit = $(“#jqxgrid”).jqxGrid(‘updaterow’, id, datarow);
// $(“#jqxgrid”).jqxGrid(‘ensurerowvisible’, selectedrowindex);
}
editrow=-1;
updateButtons(‘Unselect’);
}
});
editButton.click(function () {
if (!editButton.jqxButton(‘disabled’)) {
$(“#jqxgrid”).jqxGrid(‘beginrowedit’, rowKey);
updateButtons(‘Edit’);
editrow=rowKey;
}
});
deleteButton.click(function () {
if (!deleteButton.jqxButton(‘disabled’)) {
var rows = $(‘#jqxgrid’).jqxGrid(‘getrows’),
selectedRowIndex = $(‘#jqxgrid’).jqxGrid(‘getselectedrowindex’),
selectedRow = rows[selectedRowIndex];
if( confirm(“Are you sure you wish to delete the row with index ‘” + selectedRow.userID + “‘?”)) {
$(‘#jqxgrid’).jqxGrid(‘deleterow’, selectedRow.userID );
}}
});$(“#jqxgrid”).on(‘endrowedit’, function (event) {
updateButtons(‘End Edit’);});
},columns: [
{ text: ‘User ID’, columntype: ‘textbox’, datafield: ‘userID’, width: 120, cellsrenderer: cellsrenderer,cellbeginedit: cellbeginedit,editable:false},
{ text: ‘Name’, datafield: ‘name’, width: 120, cellsrenderer: cellsrenderer,cellbeginedit: cellbeginedit ,
validation: function (cell, value) {
if (value == “”)
return { result: false, message: “Name is required” };return true;
} ,
cellvaluechanging: function (row, datafield, columntype, oldvalue, newvalue) {
if (newvalue.length > 8) {
return oldvalue;
};
}
},
{ text: ‘Email’, datafield: ’email’, width: 170, cellsrenderer: cellsrenderer,cellbeginedit: cellbeginedit},
{ text: ‘Phone’, datafield: ‘phone’, columntype: ‘textbox’, width: 125, cellsrenderer: cellsrenderer ,cellbeginedit: cellbeginedit },
{ text: ‘Status’, datafield: ‘status’, width: 85, cellsrenderer: cellsrenderer,cellbeginedit: cellbeginedit}
]
});
});Hello SJ,
Is this all the code on your page? This error is thrown when you are trying to invoke a grid method before the grid itself has finished loading. Make sure you call such methods in the bindingcomplete event handler. Moreover, you have incorrectly implemented the source callbacks updateRow and deleteRow. The actual callbacks are called updaterow and deleterow.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank you Dimitar. It solved the above error.
I need 1 more help in the above code. Is there any way, jqxgrid does not call updaterow method, when the user select another row during editor automatically instead user will press Save button(call update in database ie. updateButton) or cancel button (revert the changes).Also, I know that i am using the below line, which I needed to make the row editable
selectionmode: ‘singlerow’,
editmode: ‘selectedrow’,Thank you very much for your help.
Hi SJ,
Our suggestion is to use a flag variable which indicates whether the Save button has been clicked (set to true) or the method has been called automatically (set to false). In updaterow check the variable and if it is true, make the Ajax call, then set the flag to false. We hope this solution is helpful to you.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
I have added the flag variable(isUpdateORCancelButtonEnabled), when user press the cancel/save button. Still the “updaterow” function calls. Now its not updating the data because of flag var, but the whole row becomes blank/null in screen(not in the DB) after user moved the cursor to the next row.
Thank you very much for your help.
Thanks,
SJ$(document).ready(function () {
var isUpdateORCancelButtonEnabled;var editrow = -1;
var url = “allLookup?pageType=users”;
var source =
{
dataType : “json”,
url : url,
datafields:
[
{ name: ‘userID’, type: ‘string’ },
{ name: ‘name’, type: ‘string’ },
{ name: ’email’, type: ‘string’ },
{ name: ‘phone’, type: ‘string’ },
{ name: ‘status’, type: ‘string’ },
] ,updaterow : function (rowID) {
alert(“isUpdateORCancelButtonEnabled “+isUpdateORCancelButtonEnabled);
if(isUpdateORCancelButtonEnabled){
var newData = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, rowID);
var data = $.param(newData);
//call ajax
}
}
};var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
}
});var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties,rowData) {
if (rowData.status == (‘Inactive’)) {
return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: red;”>’ + value + ‘</span>’;
}
else {
return ‘<span style=”margin: 4px; float: ‘ + columnproperties.cellsalign + ‘; color: green;”>’ + value + ‘</span>’;
}
}var cellbeginedit = function (row, datafield, columntype, value) {
if (row == editrow)
return true;
else
return false;
}$(“#jqxgrid”).jqxGrid(
{
width: 850,
// theme: ‘energyblue’,
altrows: true,
source: dataAdapter,
sortable: true,
editable: true,
enabletooltips: true,
showToolbar: true,
selectionmode: ‘singlerow’,
editmode: ‘selectedrow’,
columnsresize: true,renderToolbar: function(toolBar)
{
var toTheme = function (className) {
if (theme == “”) return className;
return className + ” ” + className + “-” + theme;
}var container = $(“<div style=’overflow: hidden; position: relative; height: 100%; width: 100%;’></div>”);
var buttonTemplate = “<div style=’float: left; padding: 3px; margin: 2px;’><div style=’margin: 4px; width: 16px; height: 16px;’></div></div>”;
var addButton = $(buttonTemplate);
var editButton = $(buttonTemplate);
var deleteButton = $(buttonTemplate);
var cancelButton = $(buttonTemplate);
var updateButton = $(buttonTemplate);
container.append(addButton);
container.append(editButton);
container.append(deleteButton);
container.append(cancelButton);
container.append(updateButton);
toolBar.append(container);
addButton.jqxButton({cursor: “pointer”, enableDefault: false, disabled: true, height: 25, width: 25 });
addButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-plus’));
addButton.jqxTooltip({ position: ‘bottom’, content: “Add”});
editButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
editButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-edit’));
editButton.jqxTooltip({ position: ‘bottom’, content: “Edit”});
deleteButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
deleteButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-delete’));
deleteButton.jqxTooltip({ position: ‘bottom’, content: “Delete”});
updateButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
updateButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-save’));
updateButton.jqxTooltip({ position: ‘bottom’, content: “Save Changes”});
cancelButton.jqxButton({ cursor: “pointer”, disabled: true, enableDefault: false, height: 25, width: 25 });
cancelButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-cancel’));
cancelButton.jqxTooltip({ position: ‘bottom’, content: “Cancel”});
var updateButtons = function (action) {switch (action) {
case “Select”:
addButton.jqxButton({ disabled: false });
deleteButton.jqxButton({ disabled: false });
editButton.jqxButton({ disabled: false });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
case “Unselect”:
addButton.jqxButton({ disabled: true });
deleteButton.jqxButton({ disabled: true });
editButton.jqxButton({ disabled: true });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
case “Edit”:
addButton.jqxButton({ disabled: true });
deleteButton.jqxButton({ disabled: true });
editButton.jqxButton({ disabled: true });
cancelButton.jqxButton({ disabled: false });
updateButton.jqxButton({ disabled: false });
break;
case “End Edit”:
addButton.jqxButton({ disabled: false });
deleteButton.jqxButton({ disabled: false });
editButton.jqxButton({ disabled: false });
cancelButton.jqxButton({ disabled: true });
updateButton.jqxButton({ disabled: true });
break;
}
}
var rowKey = null;$(“#jqxgrid”).on(‘rowselect’, function (event) {
if (cancelButton.jqxButton(‘disabled’) || updateButton.jqxButton(‘disabled’)) {
var args = event.args;
rowKey = args.rowindex;
var rowData = args.row;
updateButtons(‘Select’);
}
isUpdateORCancelButtonEnabled=false;
});addButton.click(function (event) {
if (!addButton.jqxButton(‘disabled’)) {
$(“#jqxwindow”).jqxWindow(‘open’);
}
isUpdateORCancelButtonEnabled=false;
});
cancelButton.click(function (event) {
if (!cancelButton.jqxButton(‘disabled’)) {
isUpdateORCancelButtonEnabled=true;
$(“#jqxgrid”).jqxGrid(‘endrowedit’, rowKey, true); // if true, the changes are canceled.
editrow=-1;
updateButtons(‘Unselect’);}
});
updateButton.click(function (event) {//save changes
if (!updateButton.jqxButton(‘disabled’)) {
isUpdateORCancelButtonEnabled=true;
$(“#jqxgrid”).jqxGrid(‘endrowedit’, rowKey, false);//is false, the changes are saved
var selectedrowindex = $(“#jqxgrid”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
$(“#jqxgrid”).jqxGrid(‘updaterow’, selectedrowindex);
}
editrow=-1;
updateButtons(‘Unselect’);
}
});
editButton.click(function () {
if (!editButton.jqxButton(‘disabled’)) {
$(“#jqxgrid”).jqxGrid(‘beginrowedit’, rowKey);
updateButtons(‘Edit’);
editrow=rowKey;
}
isUpdateORCancelButtonEnabled=false;
});deleteButton.click(function () {
if (!deleteButton.jqxButton(‘disabled’)) {
var rows = $(‘#jqxgrid’).jqxGrid(‘getrows’),
selectedRowIndex = $(‘#jqxgrid’).jqxGrid(‘getselectedrowindex’),
selectedRow = rows[selectedRowIndex];
if( confirm(“Are you sure you wish to delete the row with index ‘” + selectedRow.userID + “‘?”)) {
$(‘#jqxgrid’).jqxGrid(‘deleterow’, selectedRow.userID );
}}
isUpdateORCancelButtonEnabled=false;
});$(“#jqxgrid”).on(‘endrowedit’, function (event) {
updateButtons(‘End Edit’);});
},Hi SJ,
You cannot prevent updaterow from calling but you can prevent it from calling your code (that is what can be achieved with the flag variable). However, you missed to set isUpdateORCancelButtonEnabled to false in updaterow (after your Ajax call). This will prevent it from calling automatically afterwards. It may also be good to set isUpdateORCancelButtonEnabled to false initially.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
thank you for your patience for helping me to solve this problem.
I have added the isUpdateORCancelButtonEnabled=false in updaterow method and initially set false too. I don’t understand why the row is blank after move the next row.
I dont know how i can attach the screenshots to show you the problem.
I am still struggling to solve this problem
Thank you once again.
SJ
Hi Dimitar,
Just need to add some more detail which I forgot to mention in the above comments
I have added the isUpdateORCancelButtonEnabled=false in updaterow method and initially set false too. I don’t understand why the current/editable row is blank after user moved the cursor/try to select another row in editable grid.
Thank You,
SJHi SJ,
You can upload a screenshot to an image-hosting service and post the link here. And would you be able to create and share a JSFiddle sample which we may run and test to see the reported behaviour in action?
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.