Grid cellvaluechanged

[robfParticipant]

Hello,

I have an editable grid with four columns where one column is a date:

columns: [
{ text: 'Process Date', datafield: 'processDate', columntype: 'datetimeinput',
 width: '35%', align: 'center', cellsalign: 'center',cellsformat: 'MM-dd-yyyy',
validation: function (cell, value) 
	{
	return myDateValidation(value);
	}
},.....

I also include a cellvaluechanged event:

$('#myGrid').on('cellvaluechanged', event => 
			{
		var args = event.args;
		var datafield = args.datafield;
		var rowindex = args.rowindex;
		var newvalue = args.newvalue;
		var oldvalue = args.oldvalue;
		console.log( 'Event Type: cellchanged - 
				Row:  ${(rowindex)}
				Column: ${datafield}
				NewValue: ${newvalue}
				OldValue: ${oldvalue}'
					)
                                // this should be an unnecessary check!
				if (oldvalue != newvalue) 
				{	
					console.log(<code>** CELL VALUE IS DIFFERENT!</code>);
					setIsDirty(true);
				}
				
			})

The problem I am facing is that every time a simply tab through the DATE field, the cellvaluechanged is triggered — even though the values appear the same it is flagging them as different.

Event Type: cellchanged –
Row: 2
Column: processDate
NewValue: Fri Apr 15 2022 00:00:00 GMT-0400 (Eastern Daylight Time)
OldValue: Fri Apr 15 2022 00:00:00 GMT-0400 (Eastern Daylight Time)

**CELL VALUE IS DIFFERENT!

Do you have any idea why this is being flagged as a change simply by tabbing through, or even if I retype the same value?

Any guidance is appreciated.
Thank you
Rob

• This topic was modified 1 year ago by  robf.
• This topic was modified 1 year ago by  robf.

[svetoslav_borislavovParticipant]

Hi,

Sorry, I could not reproduce this bug, can you give me a quick demo showing it?

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

• This reply was modified 1 year ago by  svetoslav_borislavov.

[robfParticipant]

Hi Svetoslav,
I was easily able to reproduce the reported issue with the following fiddle: http://jsfiddle.net/rfossella/gzjykxpm/10/

Please double-click into any cell to enter edit mode and then tab through – no need change value. Notice that if you tab through the first three columns there is no cellvaluechanged event fired. However, once you tab through the OrderDate column the cellvaluechanged is triggered even though the value DID NOT change and the console log shows the values to be the same.

The very common use case here is that I am marking the screen/form/gird as DIRTY to prevent users from canceling work they edited.

Thanks for your help.
Rob

[svetoslav_borislavovParticipant]

Hi,

Thank you so much, I have opened an issue!
If you need further help, do not hesitate to contact us!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[robfParticipant]

Hi Svetoslav,

Thanks for opening the issue. Since this only appears to happen with date fields, the following fiddle is my work-around.

Not sure if this contribution will help you guys, but other users may find it useful.

http://jsfiddle.net/rfossella/gzjykxpm/45/

Rob

[svetoslav_borislavovParticipant]

Hi,

Thank you for the feedback. The bug happens because the Date is an object, the Grid is trying to compare them and since it is comparing two objects it is comparing them by their references and the result is always the same: the objects are different.
We will fix the problem!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[robfParticipant]

Hi,
Yes, and since I was already using moment.js in my project I use date1.isSameAs(date2) to perform a genuine compare.
Thanks.
Rob

[Author]

Posts