[SJParticipant]

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,
SJ

[SJParticipant]

Hi Dimitar,

I have added the adapter.dataBind(); and $(“#teamPermGrid”).jqxGrid(‘updatebounddata’); both in updaterow and deleterow methods.. still not refreshing the child data grid after delete/update.

Thank you for helping me here.

// ***************teamPerm Grid
// prepare the data
var teamPerUrl=”getAll?pageType=teamPerm”;
var dataFields = [
{ name: ‘userID’ , map : ‘teamPermissionPK>userID’ ,type: ‘string’},
{ name: ‘access’ , map : ‘teamPermissionPK>access’,type: ‘string’},
{ name: ‘permission’, datafield: ‘permission’,type: ‘string’}
];
var source =
{
datafields: dataFields ,
dataType : “json”,
url : teamPerUrl

};

var dataAdapter = new $.jqx.dataAdapter(source);
dataAdapter.dataBind();

var detailsInitialized = false;
$(“#teamGrid”).on(‘rowselect’, function (event) {
var userID = event.args.row.userID;
var records = new Array();
var length = dataAdapter.records.length;

selectedUserID=userID;

for (var i = 0; i < length; i++) {
var record = dataAdapter.records[i];
if (record.userID == userID) {
records[records.length] = record;
}
}

var dataFields = [
{ name: ‘userID’ , datafield : ‘userID’ ,type: ‘string’},
{ name: ‘access’ , datafield : ‘access’,type: ‘string’},
{ name: ‘permission’, datafield: ‘permission’,type: ‘string’}
];

var dataSource = {
datafields: dataFields,
localdata: records,
updaterow : function(rowID, rowData, commit) {
var data = $.param(rowData);
$.ajax({
dataType : ‘json’,
url : ‘updateTeamPerm.do’,
data : data,
success : function(data, status, xhr) {
adapter.dataBind();
$(“#teamPermGrid”).jqxGrid(‘updatebounddata’);
commit(true);
},
error : function(jqXHR, textStatus, errorThrown) {
}
});

},
deleterow : function(access,commit) {
var data = “UserId=” + selectedUserID +”&access=”+access;
$.ajax({
dataType : ‘json’,
url : ‘removeTeamPerm.do’,
data : data,
success : function(data, status, xhr) {
adapter.dataBind();
$(“#teamPermGrid”).jqxGrid(‘updatebounddata’);
commit(true);
}
});

}
}
var adapter = new $.jqx.dataAdapter(dataSource);
// update data source.
$(“#teamPermGrid”).jqxGrid({ source: adapter });
});

[SJParticipant]

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

[SJParticipant]

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’);

});
},

[SJParticipant]

Hi Dimitar,

I have been trying to refresh the details grid after update/delete/add.

Thank You,
SJ

[SJParticipant]

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.

[SJParticipant]

Thank you for quick reply but still not working. Even I have added the following lines :

dataAdapter.dataBind();
$(“#teamPermGrid”).jqxGrid(‘updatebounddata’);

Do I need to call the following lines in update/Delete/Insert scenario

for (var i = 0; i < length; i++) {
var record = dataAdapter.records[i];
if (record.userID == userID) {
records[records.length] = record;
}
}
and set the datasource ( var adapter = new $.jqx.dataAdapter(dataSource);).

Not sure.
Please help.

Thank You

[SJParticipant]

Thank you very much Dimitar for quick reply and helping me. It worked.

[SJParticipant]

Thank You Dimitar.
I made progress but stuck with cancelling the changes. Your help is appreciated.

I am trying to do the same functionality in grid like Inline editing TreeGrid

I am able to enable or disable the row based on user selection. Now the problem is in Cancel button functionality, when user press cancel button, only the recent cell changes reverted back and not the whole row changes or multiple cell changes for the enabled/edited row.

Please let me know what I need to change.

Here is my code:

<head>
<script type=”text/javascript”>
$(document).ready(function () {

var editrow = -1;
var getAdapter = function () {
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, newdata, commit) {
var oldData = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, rowid);
alert(oldData.name+” rowid “+rowid +” oldData.userID “+oldData.userID);
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);
return dataAdapter;
}
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,
altrows: true,
source: getAdapter(),
sortable: true,
editable: true,
enabletooltips: true,
showToolbar: 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 },
{ text: ‘Email’, datafield: ’email’, width: 170, cellsrenderer: cellsrenderer,cellbeginedit: cellbeginedit},
{ text: ‘Phone’, datafield: ‘phone’, columntype: ‘textbox’, width: 125, cellsrenderer: cellsrenderer ,cellbeginedit: cellbeginedit/* ,
initeditor: function (row, cellvalue, editor) {
editor.jqxMaskedInput({ width: ‘250px’, height: ’25px’, mask: ‘(###)###-####’ });
} */
},
{ text: ‘Status’, datafield: ‘status’, width: 85, cellsrenderer: cellsrenderer,cellbeginedit: cellbeginedit}
]
});

});

</script>
</head>
<body class=’default’>
<div id=”jqxgrid”>
</div>

</body>
</html>

[Author]

Posts