Grid: selectively enable row for editing - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: beginrowedit, cancel, confirm, edit, editable, editing, endrowedit, grid, jqxgrid, row, save, selected

This topic contains 4 replies, has 2 voices, and was last updated by SJ 10 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Grid: selectively enable row for editing Posts
October 24, 2014 at 7:02 pm Grid: selectively enable row for editing #61614

SJ
Participant

Please help me, how to make selected row editable instead of whole grid editable on button click event. Also, I want to make sure user save the changed row information or cancel the changes before jump to another row.

Thanks in advance,
Shweta

October 27, 2014 at 8:00 am Grid: selectively enable row for editing #61646

Dimitar
Participant

Hello Shweta,

You can disable or enable the editing of rows conditionally as shown in the demo Disable Editing of Rows. On a button click, you may change the rows in the condition (thus changing which rows are editable or not).

If you wish to programmatically start editing the selected row, then call beginrowedit (with parameter the selected row’s index). To end the editing, call the method endrowedit. If its second parameter is false, the changes are saved, if true, the changes are canceled. Please read more in jqxGrid’s API Documentation.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 28, 2014 at 1:24 am Grid: selectively enable row for editing #61697

SJ
Participant

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>

October 28, 2014 at 2:07 pm Grid: selectively enable row for editing #61740

Dimitar
Participant

Hi Shweta,

You may need to set the grid’s editmode property to “selectedrow”, as in the demo Full Row Edit.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

October 28, 2014 at 11:56 pm Grid: selectively enable row for editing #61770

SJ
Participant

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

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.