Announcement

**SimonF** · 2 Dec 2014, 06:02

Thanks, i've tested the latest nightly of 2 Dec and it seems that the case in the gif is now properly handeld.

But it seems there is some parts missing an update. In the example the second selectbox will always change to the same value as selected in the first selectbox. So if you change the first selectbox the second have to change (this works). after this you can change the second selectbox and the sum at the end is correctly calculated. But if you change the first selectbox again after this, the second selectbox is not properly changed.

See here:

Here is the example, which can be used to reproduce this behaviour:

Code:

function changedSelectOneField(p3){
	theRealEditedRow = theListGrid.getEditRow();
	var i = theRealEditedRow;
	var theEditedRowIndex = i;
	var index = theEditedRowIndex
	var record = theListGrid.data[theEditedRowIndex];
	console.log(index);
	var updatedData = {};
	if(theRealEditedRow == i){
		record.checkBox1Field = true;
		record.checkBox2Field = false;
		record.selectOneField = p3;
		record.backSelect1Field=2;
		record.dayDateColumn="NOW ITS CHANGED";
		record.backSelect2Field=3;
		record.priceField= "-4,80 €";
		record.backSelect3Field=3;
		record.selectTwoField = p3;
		var sum = (record.backSelect1Field + record.backSelect2Field + record.backSelect3Field + record.selectTwoField + record.selectOneField);
		record.priceField = sum+",00 €";
		record.sumField = (parseInt(p3)+parseInt(p3)+ sum)+",00 €";		
		theListGrid.data.dataChanged();
	}
}
function changedSelectTwoField(p3){
	theRealEditedRow = theListGrid.getEditRow();
	var i = theRealEditedRow;
	var theEditedRowIndex = i;
	var index = theEditedRowIndex
	var record = theListGrid.data[theEditedRowIndex];
	console.log(index);
	var updatedData = {};
	if(theRealEditedRow == i){		
		record.selectTwoField = p3;
		var sum = (record.backSelect1Field + record.backSelect2Field + record.backSelect3Field + record.selectTwoField + record.selectOneField);
		record.priceField = sum+",00 €";
		record.sumField = (parseInt(p3)+parseInt(p3)+ sum)+",00 €";		
		theListGrid.data.dataChanged();
	}
}
function change1(){
}
function change2(){
}
function change3(){
}
isc.ListGrid.create(
          {
			autodraw: true,
           "ID":"theListGrid",
           "width":"100%",
           "height":"100%",
           "hideUsingDisplayNone":false,
           "leaveScrollbarGap":true,
           "selectionType":"single",
           "canEdit":true,
           "canEditCell":function (rowNumber, columNumber) {
				if (rowNumber == 0 && (columNumber == 2 ||  columNumber == 8))
					return false;
				return this.Super('canEditCell', arguments);
		   },
           "editEvent":"click",
           "autoSaveEdits":false,
           "alternateRecordStyles":true,
           "modalEditing":true,
           "timeFormatter":"toShort24HourTime",
           "sortField":"nil",
           "sortDirection":"ascending",
           "fixedRecordHeights":false,
           "neverValidate":true,
           "selectionProperty":"isSelected",
           "showRecordComponents":true,
           "showRecordComponentsByCell":true,
           "canGroupBy":false,
           "canPickFields":false,
           "clwGeneratedIndexName":"daysListGridGeneratedIndex",
           "fields":
           [
            {
             "name":"dayDateColumn",
             "title":"Date",
             "type":"text",
             "align":"right",
             "width":200,
             "canEdit":false
            },
            {
             "name":"selectOneField",
             "title":"Select one",
             "canEdit":true,
             "canSort":false,
             "editorType":"SelectItem",
             "showValueIconOnly":false,
             "suppressValueIcon":true,             
             "editorProperties":
             {
              "ID":"selectOneField_Editor",
              "changed":function (p1, p2, p3) {changedSelectOneField(p3)},
              "suppressValueIcon":true,
              "prompt":"",
              "textMatchStyle":"substring"
             },
             "valueMap":
             {
              1:"Burger",
              2:"Pommes",
              3:"Pizza",
              4:"Cola",
              5:"Beer",
              6:"Water",
              7:"Ham",
              8:"Chicken",
              9:"Beacon",
              10:"Peach",
              11:"Banana"              
             }
            },
            {
             "name":"selectTwoField",
             "title":"Select two",
             "formatCellValue":function (value, record, rowNum, colNum ) {
				if( rowNum == 0 ){return null}else{return value;}},
             "canEdit":true,
             "canSort":false,
             "editorType":"SelectItem",
             "emptyCellValue":"n\/a",
             "showValueIconOnly":false,
             "suppressValueIcon":true,             
             "editorProperties":
             {
              "ID":"selectTwoField_Editor",
              "changed":function (p1, p2, p3) {changedSelectTwoField(p3)},
              "suppressValueIcon":true,
              "textMatchStyle":"substring"
             },
             "valueMap":
             {
              1:"Burger",
              2:"Pommes",
              3:"Pizza",
              4:"Cola",
              5:"Beer",
              6:"Water",
              7:"Ham",
              8:"Chicken",
              9:"Beacon",
              10:"Peach",
              11:"Banana",
              12:"n\/a"
             }
            },
            {
             "changed":function (p1, p2, p3) {},
             "name":"backSelect1Field",
             "title":"BackSelect 1",
             "width":80,
             "canEdit":true,
             "canSort":false,
             "editorType":"SelectItem",
             "editorProperties":
             {
              "changed":function (p1, p2, p3) {change1()},
              "prompt":"",
              "textMatchStyle":"substring",
              "ID":"backSelect1Field_Editor"
             },
             "valueMap":
             {
              1:"Yes",
              2:"Maybe",
              3:"No"
             }
            },
            {
             "changed":function (p1, p2, p3) {},
             "name":"backSelect2Field",
             "title":"BackSelect 2",
             "width":78,
             "canEdit":true,
             "canSort":false,
             "editorType":"SelectItem",
             "editorProperties":
             {
              "changed":function (p1, p2, p3) {change2()}              
             },
             "valueMap":
             {
              1:"Yes",
              2:"Maybe",
              3:"No"
             }
            },
            {
             "changed":function (p1, p2, p3) {},
             "name":"backSelect3Field",
             "title":"BackSelect 3",
             "width":78,
             "canEdit":true,
             "canSort":false,
             "editorType":"SelectItem",
             "editorProperties":
             {
              "changed":function (p1, p2, p3) {change3()},
              "textMatchStyle":"substring",
              "ID":"backSelect3Field_Editor"
             },
             "valueMap":
             {
              1:"Yes",
              2:"Maybe",
              3:"No"
             }
            },
            {
             "name":"priceField",
             "title":"Price",
             "type":"text",
             "align":"right",
             "width":55,
             "canEdit":false,
             "canSort":false
            },
            {
             "changed":function (p1, p2, p3) {},
             "name":"checkBox1Field",
             "title":"Tag",
             "type":"boolean",
             "width":45,
             "canEdit":true,
             "canSort":false,
             "canToggle":false,
             "editorProperties":
             {
              "ID":"checkBox1Field_Editor"
             }
            },
            {
             "changed":function (p1, p2, p3) {},
             "name":"checkBox2Field",
             "title":"Nacht",
             "type":"boolean",
             "width":45,
             "canEdit":true,
             "canSort":false,
             "canToggle":false,
             "editorProperties":
             {
              "ID":"checkBox2Field_Editor"
             }
            },
            {
             "name":"sumField",
             "title":"Sum Prize",
             "type":"text",
             "align":"right",
             "width":62,
             "canEdit":false,
             "canSort":false
            }
           ],
           "members":
           [],
           "data":
           [
            {
             "checkBox1Field":true,
             "checkBox2Field":false,
             "selectOneField":2,
             "sumField":"12,00 €",
             "backSelect1Field":1,
             "dayDateColumn":"Mi, 22.10.2014",
             "backSelect2Field":3,
             "priceField":"-4,80 €",
             "backSelect3Field":3,
             "selectTwoField":12
            },
            {
             "checkBox1Field":true,
             "checkBox2Field":true,
             "selectOneField":6,
             "sumField":"122,00 €",
             "backSelect1Field":1,
             "dayDateColumn":"CHANGE THIS and PRESS ENTER --->",
             "backSelect2Field":1,
             "priceField":"-41,00 €",
             "backSelect3Field":1,
             "selectTwoField":6
            }
           ]
          }
          );

Regards Simon

**SimonF** · 4 Dec 2014, 06:14

We have testet this issue also with the latest nightly SmartClient_v100p_2014-12-04_Pro. Is this issue still under revision?

**SimonF** · 10 Dec 2014, 01:43

I have tested it again with SmartClient_v100p_2014-12-10_Pro. It Does occur even in this version. Is there any progress on this issue?

**Isomorphic** · 10 Dec 2014, 09:58

Hi Simon
It's under investigation. We will follow up when we have something for you

Regards
Isomorphic Software

**Isomorphic** · 10 Dec 2014, 15:05

...and a fix is in.
Please try the next build (Dec 11 or above)

Regards
Isomorphic Software

**SimonF** · 12 Dec 2014, 07:27

Hi,
In the latest edition the bug shown in gif is fixed.

I'm very sorry, but there seems to be an additional bug, if you want to change the current selection.
In the example you can choose value "n/a" in the second select (see gif). If you do that, the code check if "n/a" was selected and changes the selection to the first value of the select box. If you hit enter the value is correctly colored in blue, because in the underlaying data the value is correctly set, but the current opened editor should also be updated.

Code:

if(theSelectedIndex == "12"){
			console.log("select changed to n/a -> select 1");
			theSelectedIndex = "1";
		}

Here you can see this behaviour:

I think this behaviour should also be implemented.

With the code below you can reproduce this behaviour:

Code:

function changedSelectOneField(p3){
	theRealEditedRow = theListGrid.getEditRow();
	var i = theRealEditedRow;
	var theEditedRowIndex = i;
	var index = theEditedRowIndex
	var record = theListGrid.data[theEditedRowIndex];
	console.log(index);
	var updatedData = {};
	if(theRealEditedRow == i){
		record.checkBox1Field = true;
		record.checkBox2Field = false;
		record.selectOneField = p3;
		record.backSelect1Field=2;
		record.dayDateColumn="NOW ITS CHANGED";
		record.backSelect2Field=3;
		record.priceField= "-4,80 €";
		record.backSelect3Field=3;
		record.selectTwoField = p3;
		var sum = (record.backSelect1Field + record.backSelect2Field + record.backSelect3Field + record.selectTwoField + record.selectOneField);
		record.priceField = sum+",00 €";
		record.sumField = (parseInt(p3)+parseInt(p3)+ sum)+",00 €";		
		theListGrid.data.dataChanged();
	}
}
function changedSelectTwoField(p3){
	theRealEditedRow = theListGrid.getEditRow();
	var i = theRealEditedRow;
	var theEditedRowIndex = i;
	var index = theEditedRowIndex
	var record = theListGrid.data[theEditedRowIndex];
	console.log(index);
	var updatedData = {};
	if(theRealEditedRow == i){
		if(p3 == "12"){
			console.log("select changed to n/a -> select 1");
			p3 = "1";
		}
		record.selectTwoField = p3;
		var sum = (record.backSelect1Field + record.backSelect2Field + record.backSelect3Field + record.selectTwoField + record.selectOneField);
		record.priceField = sum+",00 €";
		record.sumField = (parseInt(p3)+parseInt(p3)+ sum)+",00 €";		
		theListGrid.data.dataChanged();
	}
}
function change1(){
}
function change2(){
}
function change3(){
}
isc.ListGrid.create(
          {
			autodraw: true,
           "ID":"theListGrid",
           "width":"100%",
           "height":"100%",
           "hideUsingDisplayNone":false,
           "leaveScrollbarGap":true,
           "selectionType":"single",
           "canEdit":true,
           "canEditCell":function (rowNumber, columNumber) {
				if (rowNumber == 0 && (columNumber == 2 ||  columNumber == 8))
					return false;
				return this.Super('canEditCell', arguments);
		   },
           "editEvent":"click",
           "autoSaveEdits":false,
           "alternateRecordStyles":true,
           "modalEditing":true,
           "timeFormatter":"toShort24HourTime",
           "sortField":"nil",
           "sortDirection":"ascending",
           "fixedRecordHeights":false,
           "neverValidate":true,
           "selectionProperty":"isSelected",
           "showRecordComponents":true,
           "showRecordComponentsByCell":true,
           "canGroupBy":false,
           "canPickFields":false,
           "clwGeneratedIndexName":"daysListGridGeneratedIndex",
           "fields":
           [
            {
             "name":"dayDateColumn",
             "title":"Date",
             "type":"text",
             "align":"right",
             "width":200,
             "canEdit":false
            },
            {
             "name":"selectOneField",
             "title":"Select one",
             "canEdit":true,
             "canSort":false,
             "editorType":"SelectItem",
             "showValueIconOnly":false,
             "suppressValueIcon":true,             
             "editorProperties":
             {
              "ID":"selectOneField_Editor",
              "changed":function (p1, p2, p3) {changedSelectOneField(p3)},
              "suppressValueIcon":true,
              "prompt":"",
              "textMatchStyle":"substring"
             },
             "valueMap":
             {
              1:"Burger",
              2:"Pommes",
              3:"Pizza",
              4:"Cola",
              5:"Beer",
              6:"Water",
              7:"Ham",
              8:"Chicken",
              9:"Beacon",
              10:"Peach",
              11:"Banana"              
             }
            },
            {
             "name":"selectTwoField",
             "title":"Select two",
             "formatCellValue":function (value, record, rowNum, colNum ) {
				if( rowNum == 0 ){return null}else{return value;}},
             "canEdit":true,
             "canSort":false,
             "editorType":"SelectItem",
             "emptyCellValue":"n\/a",
             "showValueIconOnly":false,
             "suppressValueIcon":true,             
             "editorProperties":
             {
              "ID":"selectTwoField_Editor",
              "changed":function (p1, p2, p3) {changedSelectTwoField(p3)},
              "suppressValueIcon":true,
              "textMatchStyle":"substring"
             },
             "valueMap":
             {
              1:"Burger",
              2:"Pommes",
              3:"Pizza",
              4:"Cola",
              5:"Beer",
              6:"Water",
              7:"Ham",
              8:"Chicken",
              9:"Beacon",
              10:"Peach",
              11:"Banana",
              12:"n\/a"
             }
            },
            {
             "changed":function (p1, p2, p3) {},
             "name":"backSelect1Field",
             "title":"BackSelect 1",
             "width":80,
             "canEdit":true,
             "canSort":false,
             "editorType":"SelectItem",
             "editorProperties":
             {
              "changed":function (p1, p2, p3) {change1()},
              "prompt":"",
              "textMatchStyle":"substring",
              "ID":"backSelect1Field_Editor"
             },
             "valueMap":
             {
              1:"Yes",
              2:"Maybe",
              3:"No"
             }
            },
            {
             "changed":function (p1, p2, p3) {},
             "name":"backSelect2Field",
             "title":"BackSelect 2",
             "width":78,
             "canEdit":true,
             "canSort":false,
             "editorType":"SelectItem",
             "editorProperties":
             {
              "changed":function (p1, p2, p3) {change2()}              
             },
             "valueMap":
             {
              1:"Yes",
              2:"Maybe",
              3:"No"
             }
            },
            {
             "changed":function (p1, p2, p3) {},
             "name":"backSelect3Field",
             "title":"BackSelect 3",
             "width":78,
             "canEdit":true,
             "canSort":false,
             "editorType":"SelectItem",
             "editorProperties":
             {
              "changed":function (p1, p2, p3) {change3()},
              "textMatchStyle":"substring",
              "ID":"backSelect3Field_Editor"
             },
             "valueMap":
             {
              1:"Yes",
              2:"Maybe",
              3:"No"
             }
            },
            {
             "name":"priceField",
             "title":"Price",
             "type":"text",
             "align":"right",
             "width":55,
             "canEdit":false,
             "canSort":false
            },
            {
             "changed":function (p1, p2, p3) {},
             "name":"checkBox1Field",
             "title":"Tag",
             "type":"boolean",
             "width":45,
             "canEdit":true,
             "canSort":false,
             "canToggle":false,
             "editorProperties":
             {
              "ID":"checkBox1Field_Editor"
             }
            },
            {
             "changed":function (p1, p2, p3) {},
             "name":"checkBox2Field",
             "title":"Nacht",
             "type":"boolean",
             "width":45,
             "canEdit":true,
             "canSort":false,
             "canToggle":false,
             "editorProperties":
             {
              "ID":"checkBox2Field_Editor"
             }
            },
            {
             "name":"sumField",
             "title":"Sum Prize",
             "type":"text",
             "align":"right",
             "width":62,
             "canEdit":false,
             "canSort":false
            }
           ],
           "members":
           [],
           "data":
           [
            {
             "checkBox1Field":true,
             "checkBox2Field":false,
             "selectOneField":2,
             "sumField":"12,00 €",
             "backSelect1Field":1,
             "dayDateColumn":"Mi, 22.10.2014",
             "backSelect2Field":3,
             "priceField":"-4,80 €",
             "backSelect3Field":3,
             "selectTwoField":12
            },
            {
             "checkBox1Field":true,
             "checkBox2Field":true,
             "selectOneField":6,
             "sumField":"122,00 €",
             "backSelect1Field":1,
             "dayDateColumn":"CHANGE THIS and PRESS ENTER --->",
             "backSelect2Field":1,
             "priceField":"-41,00 €",
             "backSelect3Field":1,
             "selectTwoField":6
            }
           ]
          }
          )

Best regards

**Isomorphic** · 12 Dec 2014, 17:31

We wouldn't expect this to work.

Fundamentally you're using the system in a way it's not really designed for.

What we have been doing in this thread is fleshing out support for having an underlying data value for a row be changed while the user is editing that row, and having the new record value show up in the edit form. A standard use case for this would be something like a grid reflecting "live" data which is actively changing independently of the user's interactions -- (something like our example with stock quotes being populated by server push)

However if
- the user is currently editing the cell
or
- the user has edited the cell but not yet saved those changes

we don't want these unrelated changes to show up. It would be a confusing user experience -- their edits would seem to vanish arbitrarily to reflect a change to the underlying record - essentially fighting what the user is trying to do.

In contrast to the normal "background data changes" paradigm, your usage is actually having the user *drive* the changes to the grid data.
It's not unusual to have user action driving changes - what is unusual is that you're bypassing the normal save flow entirely -- you're reacting to the user changing the edit values by directly writing to the grid data, so we're reacting as if there were an unrelated change to the data from some other part of the app.

(It seems like you're well down this path, so we're trying to help you make things work as best we can!)

In this particular case, what doesn't make sense is for us to support having a change to the record overwrite the currently focused, and edited edit value automatically. The user is interacting with the field so in the "normal" usage where this is just a background update, it would be very confusing.

Probably the best way to get what you want in this case is to call "setEditValue()" to directly modify the edit value, clobbering whatever the user entered (in this case "n/a"). You can also update the underlying record at the same time if that makes more sense in your app than going through the normal "save" flow

Regards
Isomorphic Software

Announcement

Comment

Comment

Comment

Comment

Comment

Comment

Comment