jQWidgets Forums
Forum Replies Created
-
Hi Dimitar,
Thanks for ur reply. I have inner command button(Editing Example Mobile Demo) and tooltips having add button.
On click tooltips add button, new empty row at 0 index is added. This record is not yet saved in db so department id in null. At that point if user click on cancel button which is at inner row, row should get deleted.
This point issue occuring:
When click cancel button: Source updateRow function is called(Dont know why this happening), which should not called. May be because of this, row get delete(code for this have written in cancle function.), but row at index 1 become empty.
And, As u said cursor automatically come in full row edit mode. but it is not happening.
<!DOCTYPE html>
<html lang=”en”>
<%@ taglib prefix=”form” uri=”http://www.springframework.org/tags/form”%>
<%@ taglib prefix=”spring” uri=”http://www.springframework.org/tags”%>
<head>
<title>Department Master</title>
<link rel=”stylesheet” href=<spring:url value=”/jqwidgets/styles/jqx.base.css”/> type=”text/css” />
<script type=”text/javascript” src=<spring:url value=”/scripts/jquery-1.11.1.min.js”/> ></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxcore.js”/> ></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxdata.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxbuttons.js”/>></script>
<script type=”text/javascript” src=”<spring:url value=”/jqwidgets/jqxtooltip.js”/>”></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxscrollbar.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxmenu.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxgrid.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxgrid.edit.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxgrid.selection.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxlistbox.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxdropdownlist.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxcheckbox.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxcalendar.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxnumberinput.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/jqxdatetimeinput.js”/>></script>
<script type=”text/javascript” src=<spring:url value=”/jqwidgets/globalization/globalize.js”/>></script>
<script type=”text/javascript” src=”<spring:url value=”/scripts/demos.js”/>”></script>
<script type=”text/javascript”>
var that = this;
$(document).ready(function () {
// prepare the data
var data = ‘${departmentList}’;
var source =
{
localdata: data,
datatype: “json”,
updaterow: function (rowid, rowdata, commit) {
alert(“update”+rowdata.departmentId)
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failder.
// rowdata.departmentId=101;
commit(true);
},
dataFields: [
{ name: ‘departmentId’, type: ‘int’ },
{ name: ‘departmentName’, type: ‘string’ },
{ name: ‘status’, type: ‘bool’ }
]
};
this.editrow = -1;
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function () {
// data is loaded.
}
});
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: ‘50%’,
height: ‘50%’,
source: dataAdapter,
editable: true,
rowsheight: 34,
selectionmode: ‘none’,
editmode: ‘selectedrow’,
altRows: true,
showToolbar: true,
renderToolbar: function(toolBar)
{
var toTheme = function (className) {
if (theme == “”) return className;
return className + ” ” + className + “-” + theme;
}
// appends buttons to the status bar.
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);
container.append(addButton);
toolBar.append(container);
addButton.jqxButton({cursor: “pointer”, enableDefault: false, height: 25, width: 25 });
addButton.find(‘div:first’).addClass(toTheme(‘jqx-icon-plus’));
addButton.jqxTooltip({ position: ‘bottom’, content: “Add”});addButton.click(function (event) {
if (!addButton.jqxButton(‘disabled’)) {
that.editrow = 0;
// add new empty row.
$(“#jqxgrid”).jqxGrid(‘addRow’, null, {}, ‘first’);
// select the first row and clear the selection.
$(“#jqxgrid”).jqxGrid(‘clearSelection’);
$(“#jqxgrid”).jqxGrid(‘selectRow’, 0);
// edit the new row.
$(“#jqxgrid”).jqxGrid(‘beginRowEdit’, 0);
updateButtons(‘add’);}
});
},
pagerButtonsCount: 8,
columns: [
{ text: ‘Department Id’, columntype: ‘textbox’, editable:false, datafield: ‘departmentId’, width: “20%” },
{ text: ‘Department Name’, datafield: ‘departmentName’, columntype: ‘textbox’, width: “20%” },
{ text: ‘Status’, datafield: ‘status’, columntype: ‘checkbox’, width: “20%” },
{
text: ‘Edit’, align: “center”, editable: false, sortable: false, datafield: ”, cellsrenderer: function (row, column, value) {
var eventName = “onclick”;
if (row === that.editrow) {
//return “<div style=’text-align: center; width: 100%; top: 7px; position: relative;’>Update<span style=”>/</span>” + “Cancel</div>”;
return “<button ” + eventName + “=’Update(” + row + “, event)’ style=’color: inherit; margin-left: 40%; left: -15px; top: 7px; position: relative;’ data-row='” + row + “‘>Update</button><button ” + eventName + “=’Cancel(” + row + “, event)’ style=’margin-left: 5px; left: -15px; top: 7px; position: relative;’ data-row='” + row + “‘>Cancel</button>”;
}
//return “Edit“;
return “<button “+ eventName + “=’Edit(” + row + “, event)’ style=’color: inherit; margin-left: 50%; left: -15px; top: 7px; position: relative;’ data-row='” + row + “‘ class=’editButtons’>Edit</button>”;
}
}
]
});});
</script>
<script type=”text/javascript”>
function Edit(row, event) {
that.editrow = row;
$(“#jqxgrid”).jqxGrid(‘beginrowedit’, row);
if (event) {
if (event.preventDefault) {
event.preventDefault();
}
}
return false;
}
function Update(row, event) {
that.editrow = -1;
$(“#jqxgrid”).jqxGrid(‘endrowedit’, row);
if (event) {
if (event.preventDefault) {
event.preventDefault();
}
}
return false;
}
function Cancel(row, event) {
that.editrow = -1;
$(“#jqxgrid”).jqxGrid(‘endrowedit’, row, true);
var value = $(“#jqxgrid”).jqxGrid(‘getCellValue’, row, ‘departmentId’);
if(value==null){
$(“#jqxgrid”).jqxGrid(‘deleteRow’, row);}
if (event) {
if (event.preventDefault) {
event.preventDefault();
}
}return false;
}
</script>
</head>
<body class=’default’>
<div id=”jqxgrid”></div></body>
</html>