Cell in grid not updating removing a row.

[yvgamuParticipant]

After adding a row in grid it working fine to update/edit cell but after removing a row i am not able to see new value in cell after editing and when i add another row the cell previously not showing new value automatically show new value.
I have not used updaterow becoz without any update function it working fine after add row than why not after remove row.
I have copied the full code. Please see only jqxgrid. (Grid ID).

$(function () {

Init();

Validator();

Events();

OperationsController();

pData();
});
</script>

</asp:Content>
<asp:Content ID=”Content2″ ContentPlaceHolderID=”ContentPlaceHolder1″ runat=”server”>
<div class=”maindiv”>
<div class=”maindiv” id=”topdiv” style=”overflow:auto;”>
<div style=”width: 60%; float: left;”>
<div class=”maindiv”>
<fieldset>
<legend><%= Resources.rsCaption.FCCALENDAR_DEFINITION %>
</legend>
<div class=”maindiv”>
<div class=”maindiv marginbottom”>
<div class=”childleftdiv mediumleftdiv lblcaption”>
<span id=”lblCalenderName”><%= Resources.rsCaption.SPECIALDAYS_NAME %></span>
</div>
<div class=”childrightdiv mediumrightdiv”>
<input type=”text” id=”txtCalenderName” maxlength=”<%=Secure.SMSO.Smac.Interface.Validation.ValidationFactory.Configuration.CalendarLength.MaxValue %>” />
</div>
<div class=”childleftdiv mediumleftdiv lblcaption”>
<span id=”lblPublicationDate”><%= Resources.rsCaption.PUBLISH_DATE %></span>
</div>
<div class=”childrightdiv mediumrightdiv”>
<div id=’jqxPublicationDate’>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class=”maindiv”>
<fieldset>
<legend><%= Resources.rsCaption.FCCALENDAR_WEEKDAY_DEFINITION %>
</legend>
<div class=”maindiv”>
<div class=”maindiv marginbottom”>
<div class=”childleftdiv mediumleftdiv lblcaption”>
<span id=”lblFriendlyCreditStartTime”><%= Resources.rsCaption.START_TIME %></span>
</div>
<div class=”childrightdiv mediumrightdiv”>
<div id=’jqxddlWeekDayStartTime’>
</div>
</div>
<div class=”childleftdiv mediumleftdiv lblcaption”>
<span id=”lblFriendlyCreditEndTime”><%= Resources.rsCaption.FCCALENDAR_END_TIME %></span>
</div>
<div class=”childrightdiv mediumrightdiv”>
<div id=’jqxddlWeekDayEndTime’>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class=”maindiv”>
<fieldset>
<legend><%= Resources.rsCaption.FCCALENDAR_WEEKEND_DEFINTION %>
</legend>
<div class=”maindiv”>
<div class=”maindiv marginbottom”>
<div class=”childleftdiv mediumleftdiv lblcaption”>
<span id=”lblWeekStartTime”><%= Resources.rsCaption.START_TIME %></span>
</div>
<div class=”childrightdiv mediumrightdiv”>
<div id=’jqxddlWeekEndStartTime’>
</div>
</div>
<div class=”childleftdiv mediumleftdiv lblcaption”>
<span id=”lblWeekEndTime”><%= Resources.rsCaption.FCCALENDAR_END_TIME %></span>
</div>
<div class=”childrightdiv mediumrightdiv”>
<div id=’jqxddlWeekEndEndTime’>
</div>
</div>
</div>
</div>
</fieldset>
</div>
<div class=”maindiv”>
<fieldset>
<legend><%= Resources.rsCaption.WEEKEND_DAYS %>
</legend>
<div class=”maindiv”>
<div class=”maindiv marginbottom”>
<div class=”sevencolumnfloatleft”>
<div id=”jqxChkWeekday0″><%= Resources.rsCaption.MONDAY %></div>
</div>
<div class=”sevencolumnfloatleft”>
<div id=”jqxChkWeekday1″><%= Resources.rsCaption.TUESDAY %></div>
</div>
<div class=”sevencolumnfloatleft”>
<div id=”jqxChkWeekday2″><%= Resources.rsCaption.WEDNESDAY %></div>
</div>
<div class=”sevencolumnfloatleft”>
<div id=”jqxChkWeekday3″><%= Resources.rsCaption.THURSDAY %></div>
</div>
<div class=”sevencolumnfloatleft”>
<div id=”jqxChkWeekday4″><%= Resources.rsCaption.FRIDAY %></div>
</div>
<div class=”sevencolumnfloatleft”>
<div id=”jqxChkWeekday5″><%= Resources.rsCaption.SATURDAY %></div>
</div>
<div class=”sevencolumnfloatleft”>
<div id=”jqxChkWeekday6″><%= Resources.rsCaption.SUNDAY %></div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div style=”width: 40%; float: left;”>
<div class=”maindiv”>
<fieldset>
<legend><%= Resources.rsCaption.FC_DAYS %>
</legend>
<div id=’jqxWidget’ class=”maindiv”>
<div id=”jqxgrid”></div>

</div>
</fieldset>
</div>
</div>
</div>
<div class=”maindiv”>

<fieldset>
<legend><%= Resources.rsCaption.FCCALENDAR_EXISTING_DEFINITION %>
</legend>
<div style=”padding: 10px 10px 10px 10px; width: 100%; float: left;”>
<div id=’jqxWidget1′ class=”maindiv”>
<div id=”jqxFCCalenderInfoGrid”></div>
</div>
</div>
</fieldset>
</div>

<div>
<asp:HiddenField ID=”hdnTools” runat=”server” Value=”” />
<asp:HiddenField ID=”hdnOP_Code” runat=”server” Value=”” />
<input type=”text” id=”txtTCN” />
</div>
</div>
<script type=”text/javascript”>
function Validator() {
var msgRequiredField = ‘<%= Resources.rsMessage.REQUIRED_FIELD %>’;
var calenderNameMinLength = ‘<%=Secure.SMSO.Smac.Interface.Validation.ValidationFactory.Configuration.CalendarLength.MinValue %>’;
$(‘#form1’).jqxValidator({
hintType: ‘label’,
rules: [
{
input: ‘#txtCalenderName’,
message: msgRequiredField,
action: ‘blur, focusout, keydown’,
rule: function () {
var calenderName = $.trim($(‘#txtCalenderName’).val());
return calenderName.length >= calenderNameMinLength;
}
}
]
});
}
function GridValidation() {
var descriptionMaxLength = ‘<%=Secure.SMSO.Smac.Interface.Validation.ValidationFactory.Configuration.SPDayDescLength.MaxValue%>’;
var descriptionMinLength = ‘<%=Secure.SMSO.Smac.Interface.Validation.ValidationFactory.Configuration.SPDayDescLength.MinValue%>’;
var datesArray = [];
var descriptions = [];
var rowscount = $(“#jqxgrid”).jqxGrid(‘getdatainformation’).rowscount;
if (rowscount > 0) {
for (var i = 0; i < rowscount; i++) {
var spDayDate = $(‘#jqxgrid’).jqxGrid(‘getcell’, i, ‘FCDayDate’);
datesArray.push(spDayDate.value);
var description = $(‘#jqxgrid’).jqxGrid(‘getcell’, i, ‘FCDayName’);
description.value = description.value.trim();
descriptions.push(description);
var dNow = new Date();
var tomorrowDate = new Date((dNow.getTime() + (24 * 60 * 60 * 1000)));
var newDate = new Date(tomorrowDate.setHours(0, 0, 0, 0));
if (spDayDate.value < newDate) {
var msgSpecialDaysDate = ‘<%= Resources.rsMessage.SPECIALDAYS_DATE_VALIDATION %>’;
var msgSpecialDaysDate = msgSpecialDaysDate.replace(“{0}”, (i + 1).toString());
displayUserMessage(msgSpecialDaysDate, true);
return false;
break;
}

for (var j = 0; j < datesArray.length – 1; j++) {
if (datesArray.length > 1) {
if (datesArray[j].getTime() === spDayDate.value.getTime()) {
var sameDateNotAllowed = ‘<%= Resources.rsMessage.SPECIALDAYS_SAMEDATE_NOTALLOWED %>’;
var sameDateNotAllowed = sameDateNotAllowed.replace(“{0}”, (j + 1).toString());
var sameDateNotAllowed = sameDateNotAllowed.replace(“{1}”, (i + 1).toString());
displayUserMessage(sameDateNotAllowed, true);
return false;
break;
}
}
}
// for (var k = 0; k < descriptions.length – 1; k++) {
// if (descriptions.length > 1) {
// if (descriptions[k].value === description.value) {
// var sameDescriptionNotAllowed = <%–‘<%= Resources.rsMessage.DUPLICATE_DESCRIPTION_NOTALLOWED %>’;–%>
// var sameDescriptionNotAllowed = sameDescriptionNotAllowed.replace(“{0}”, (k + 1).toString());
// var sameDescriptionNotAllowed = sameDescriptionNotAllowed.replace(“{1}”, (i + 1).toString());
// displayUserMessage(sameDescriptionNotAllowed, true);
// return false;
// break;
// }
// }
// }
if (description.value.length < descriptionMinLength || description.value.length > descriptionMaxLength) {
var descriptionRequired = ‘<%= Resources.rsMessage.SPECIALDAYS_DESCRIPTION_LENGTH%>’;
var descriptionRequired = descriptionRequired.replace(“{0}”, (i + 1).toString());
var descriptionRequired = descriptionRequired.replace(“{1}”, descriptionMaxLength.toString());
displayUserMessage(descriptionRequired, true);
return false;
break;
}
}
}
else {
var msgSpecialDaysNotDefined = ‘<%= Resources.rsMessage.SPECIALDAYS_NOT_DEFINED %>’;
displayUserMessage(msgSpecialDaysNotDefined, true);
return false;
}
return true;
}

function IsCalendarPublished() {
GetServerDateTime();
if ($(‘[id$=hdnOP_Code]’).val() == ‘EDIT’) {
var publishDate = $(‘#jqxPublicationDate’).jqxDateTimeInput(‘getDate’);
if (publishDate < ServerDateTime) {
var fcCalendarEditDenied = ‘<%= Resources.rsMessage.ALREADY_PUBLISHED %>’;
displayUserMessage(fcCalendarEditDenied, true);
return false;
}
}
else if ($(‘[id$=hdnOP_Code]’).val() == ‘DEL’) {
var publishDate = $(‘#jqxPublicationDate’).jqxDateTimeInput(‘getDate’);
if (publishDate < ServerDateTime) {
var fcCalendarDeleteDenied = ‘<%= Resources.rsMessage.ALREADY_PUBLISHED %>’;
displayUserMessage(fcCalendarDeleteDenied, true);
return false;
}
}
else {
var rowscount = $(“#jqxFCCalenderInfoGrid”).jqxGrid(‘getdatainformation’).rowscount;
if (rowscount > 0) {
for (var i = 0; i < rowscount; i++) {
var rows = $(“#jqxFCCalenderInfoGrid”).jqxGrid(‘getrows’);
var publishDate = new Date(rows[i].PublishDate.setHours(0, 0, 0, 0));
var serverDate = new Date(ServerDateTime.setHours(0, 0, 0, 0));
if (serverDate < publishDate) {
var calendarCreationDenied = ‘<%= Resources.rsMessage.NOT_ACTIVE %>’;
displayUserMessage(calendarCreationDenied, true);
return false;
break;
}
}
}
}
return true;
}

function IsValidWeekEndDefinition() {
var isChkMondayChecked = $(‘#jqxChkWeekday0’).jqxCheckBox(‘val’);
var isChkTuesdayChecked = $(‘#jqxChkWeekday1’).jqxCheckBox(‘val’);
var isChkWednesdayChecked = $(‘#jqxChkWeekday2’).jqxCheckBox(‘val’);
var isChkThursdayChecked = $(‘#jqxChkWeekday3’).jqxCheckBox(‘val’);
var isChkFridayChecked = $(‘#jqxChkWeekday4’).jqxCheckBox(‘val’);
var isChkSaturdayChecked = $(‘#jqxChkWeekday5’).jqxCheckBox(‘val’);
var isChkSundayChecked = $(‘#jqxChkWeekday6’).jqxCheckBox(‘val’);
if (isChkMondayChecked && isChkTuesdayChecked && isChkWednesdayChecked && isChkThursdayChecked
&& isChkFridayChecked && isChkSaturdayChecked && isChkSundayChecked) {
var allWeekdaysNotAllowed = ‘<%= Resources.rsMessage.WEEKEND_DEFINITION_VALIDATION %>’;
displayUserMessage(allWeekdaysNotAllowed, true);
return false;
}
else
return true

}

function Init() {
$(“#txtCalenderName”).jqxInput({ width: SecureTheme.ControlWidth, height: SecureTheme.ControlHeight, theme: currentSecureTheme });

$(‘#jqxChkWeekday0’).jqxCheckBox({ width: SecureTheme.CheckBoxWithToolTipWidth, theme: currentSecureTheme });
$(‘#jqxChkWeekday1’).jqxCheckBox({ width: SecureTheme.CheckBoxWithToolTipWidth, theme: currentSecureTheme });
$(‘#jqxChkWeekday2’).jqxCheckBox({ width: SecureTheme.CheckBoxWithToolTipWidth, theme: currentSecureTheme });
$(‘#jqxChkWeekday3’).jqxCheckBox({ width: SecureTheme.CheckBoxWithToolTipWidth, theme: currentSecureTheme });
$(‘#jqxChkWeekday4’).jqxCheckBox({ width: SecureTheme.CheckBoxWithToolTipWidth, theme: currentSecureTheme });
$(‘#jqxChkWeekday5’).jqxCheckBox({ width: SecureTheme.CheckBoxWithToolTipWidth, theme: currentSecureTheme });
$(‘#jqxChkWeekday6’).jqxCheckBox({ width: SecureTheme.CheckBoxWithToolTipWidth, theme: currentSecureTheme });
$(‘[id$=hdnOP_Code]’).val(‘GET’);
var time = TimeInterval();
$(“#jqxddlWeekDayStartTime”).jqxDropDownList({ source: time, displayMember: ‘text’, valueMember: ‘value’, selectedIndex: 0, width: SecureTheme.ControlWidthEx, height: SecureTheme.ControlHeight, theme: currentSecureTheme });
$(“#jqxddlWeekDayEndTime”).jqxDropDownList({ source: time, displayMember: ‘text’, valueMember: ‘value’, selectedIndex: 0, width: SecureTheme.ControlWidthEx, height: SecureTheme.ControlHeight, theme: currentSecureTheme });
$(“#jqxddlWeekEndStartTime”).jqxDropDownList({ source: time, displayMember: ‘text’, valueMember: ‘value’, selectedIndex: 0, width: SecureTheme.ControlWidthEx, height: SecureTheme.ControlHeight, theme: currentSecureTheme });
$(“#jqxddlWeekEndEndTime”).jqxDropDownList({ source: time, displayMember: ‘text’, valueMember: ‘value’, selectedIndex: 0, width: SecureTheme.ControlWidthEx, height: SecureTheme.ControlHeight, theme: currentSecureTheme });
GetServerDateTime();
var tomorrowDate = new Date((ServerDateTime.getTime() + (24 * 60 * 60 * 1000)));
var endDate = new Date((ServerDateTime.getTime() + (365 * 24 * 60 * 60 * 1000)));

$(“#jqxPublicationDate”).jqxDateTimeInput({ width: SecureTheme.ControlWidthEx, height: SecureTheme.ControlHeight, theme: currentSecureTheme, formatString: applicationConstants.DateFormat });

existingFCCalendarDataSource =
{
datatype: ‘json’,
datafields: [
{ name: ‘FCCalendarId’, type: ‘int’ },
{ name: ‘FCCalendarName’, type: ‘string’ },
{ name: ‘FCCalendarDaysCount’, type: ‘int’ },
{ name: ‘CreationDate’, type: ‘date’ },
{ name: ‘LastModifiedBy’, type: ‘string’ },
{ name: ‘LastModifiedDate’, type: ‘date’ },
{ name: ‘TCN’, type: ‘int’ },
{ name: ‘FCCalendarDaysList’, type: ‘Object’ },
{ name: ‘WeekDayStartTime’, type: ‘int’ },
{ name: ‘WeekDayEndTime’, type: ‘int’ },
{ name: ‘WeekEndStartTime’, type: ‘int’ },
{ name: ‘WeekEndEndTime’, type: ‘int’ },
{ name: ‘WeekEndIdentifier’, type: ‘int’ },
{ name: ‘PublishDate’, type: ‘date’ }
]
};
var hdr;
hdr = 320;

if (screen.width <= 1152) {
document.getElementById(“topdiv”).style.height = 200 + “px”;
hdr = 300;
}
if (screen.width <= 1024) {
hdr = 220;
document.getElementById(“topdiv”).style.height = 185 + “px”;
}
$(“#jqxFCCalenderInfoGrid”).jqxGrid(
{
width: ‘100%’,
// height: 320,
height: hdr,
pageable: true,
showfilterrow: true,
filterable: true,
altrows: true,
sortable: true,
autoshowfiltericon: true,
theme: currentSecureTheme,
showstatusbar: true,
selectionmode: ‘singlerow’,
renderstatusbar: function (statusbar) {
StatusBarWithClearAndExport(statusbar, ‘#jqxFCCalenderInfoGrid’, ‘<%= Resources.rsCaption.CLEAR_FILTER %>’, ‘<%= Resources.rsCaption.EXPORT_DATA %>’, ‘<%= Resources.rsCaption.FCCALENDAR_EXISTING_DEFINITION %>’);
},
columns: [
{ text: ‘<%= Resources.rsCaption.SPECIALDAYS_ID %>’, datafield: ‘FCCalendarId’, width: ‘10%’ },
{ text: ‘<%= Resources.rsCaption.SPECIALDAYS_NAME %>’, datafield: ‘FCCalendarName’, width: ‘20%’ },
{ text: ‘<%= Resources.rsCaption.SPECIALDAYS_COUNT %>’, datafield: ‘FCCalendarDaysCount’, width: ‘10%’ },
{ text: ‘<%= Resources.rsCaption.PUBLISH_DATE %>’, datafield: ‘PublishDate’, columntype: ‘datetimeinput’, filtertype: ‘range’, cellsformat: applicationConstants.DateFormat, width: ‘20%’ },
{ text: ‘<%= Resources.rsCaption.LAST_MODIFIED_BY %>’, datafield: ‘LastModifiedBy’, width: ‘20%’ },
{ text: ‘<%= Resources.rsCaption.LAST_MODIFIED_DATE %>’, datafield: ‘LastModifiedDate’, columntype: ‘datetimeinput’, filtertype: ‘range’, cellsformat: applicationConstants.DateTimeFormat, width: ‘20%’ },

]
});
defineFCCalendarDataSource =
{
datatype: “local”,
datafields:
[
{ name: ‘DayNo’, type: ‘string’ },
{ name: ‘FCDayDate’, type: ‘date’ },
{ name: ‘FCDayName’, type: ‘string’ }

],
updaterow: function (rowid, rowdata, commit) {
// 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.
commit(true);
},
addrow: function (rowid, rowdata, position, commit) {
try {
commit(true);
var rowsCount = $(‘#jqxgrid’).jqxGrid(‘getdisplayrows’).length;
$(“#lblSpecialDaysCount”).text(rowsCount.toString());
}
catch (ex) {
var rows = $(‘#jqxgrid’).jqxGrid(‘getdisplayrows’).length;
$(‘#lblSpecialDaysCount’).text(rows.toString());
LogJSError(ex);
}
},
deleterow: function (rowid, commit) {
try {
commit(true);
var rowsCount = $(‘#jqxgrid’).jqxGrid(‘getdisplayrows’).length;
$(‘#lblSpecialDaysCount’).text(rowsCount.toString());
} catch (ex) {
var rows = $(‘#jqxgrid’).jqxGrid(‘getdisplayrows’).length;
$(‘#lblSpecialDaysCount’).text(rows.toString());
LogJSError(ex);
}
}
};

$(“#jqxgrid”).jqxGrid(
{
width: ‘100%’,
height: 258,
editable: true,
enabletooltips: true,
theme: currentSecureTheme,
showtoolbar: true,
selectionmode: ‘singlerow’,
rendertoolbar: function (toolbar) {
StatusBarWithAddAndRemoveLast(toolbar, ‘<%= Resources.rsCaption.ADD_NEW %>’, ‘<%= Resources.rsCaption.REMOVE_LAST_ITEM%>’);
// create new row.
$(“#addrowbutton”).on(‘click’, function () {
try {
var maxSPDays = ‘<%=Secure.SMSO.Smac.Interface.Validation.ValidationFactory.Configuration.MaxSPDaysCount%>’;
var datainformationBeforeAddRow = $(“#jqxgrid”).jqxGrid(‘getdatainformation’);
var rowsCount = datainformationBeforeAddRow.rowscount;
var datarow = generaterow(rowsCount + 1);
if ((rowsCount + 1) <= maxSPDays) {
var commit = $(“#jqxgrid”).jqxGrid(‘addrow’, null, datarow);
}
}
catch (ex) {
LogJSError(ex);
}
});

// delete row.
$(“#removelastrowbutton”).on(‘click’, function () {
try {
var rows = $(“#jqxgrid”).jqxGrid(‘getboundrows’);
var rowCount = rows.length;
if (rows.length > 1) {
var commit = $(‘#jqxgrid’).jqxGrid(‘deleterow’, rows[(rowCount – 1)].uid);
}
}
catch (ex) {
LogJSError(ex);
}
});

// events
$(“#jqxgrid”).on(‘cellbeginedit’, function (event) {
ButtonClickFlag = true;
});

$(“#jqxgrid”).on(‘cellendedit’, function (event) {
//var args=event.args;
//if (ButtonClickFlag == true && args.oldvalue!=args.value) {
// ButtonClickFlag = false;
// $(“#addrowbutton”).click();
// $(“#removelastrowbutton”).click();
//}

});

},
columns: [
{
text: ‘<%= Resources.rsCaption.SPECIALDAYS_DAYNO %>’, datafield: ‘DayNo’, editable: false, width: ‘15%’,
cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
return row + 1;
}
},

{
text: ‘<%= Resources.rsCaption.SPECIALDAYS_DATE %>’, datafield: ‘FCDayDate’, columntype: ‘datetimeinput’, cellsformat: applicationConstants.DateFormat, width: ‘20%’
},
{
text: ‘<%= Resources.rsCaption.DESCRIPTION %>’, datafield: ‘FCDayName’, columntype: ‘textbox’, width: ‘65%’, initeditor: function (row, column, editor) {
editor.attr(‘maxlength’, ‘<%=Secure.SMSO.Smac.Interface.Validation.ValidationFactory.Configuration.SPDayDescLength.MaxValue%>’);
}
}
]
});

}
</script>
</asp:Content>

[DimitarParticipant]

Hello yvgamu,

Your code is not properly formatted and is too extensive for us to test. Please create a simple JSFiddle example demonstrating the issue and share it with us so that we can test it directly and find out what causes the issue.

Best Regards,
Dimitar

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

[Author]

Posts