Announcement

**hmmmmm** · 7 Sep 2010, 05:11

I should probably mention, the closest we've gotten is :

editEvent:"click" on the main Grid (which is a pain, as it applies to all the regular text fields as well), with changed:function(...){...} on the relevant fields.

The problem with this is e.g.

A boolean field is selected (true). You click on it - and you are immediately both in edit mode and the field has become unselected (false) but the change callback handler for the field is NOT called. The callback handler is ONLY called on subsequent clicks while you're still in edit mode!

**hmmmmm** · 7 Sep 2010, 05:14

Another follow up for anybody with similar issues :

If you then also remove canToggle:true on a ListGridField, but still have editEvent:"click" on the Grid, the first click will set it into edit mode, so with a second click you can then change the boolean value, causing the ListGridField's "changed" callback to fire, so you can update associated fields as required.

It still doesn't solve the basic requirement which is for boolean ListGridFields to change their state with a single click, and for us to know this has happened so that we can execute further code to update the state of other values/columns/fields.

**Isomorphic** · 7 Sep 2010, 08:59

Please show sample code that reproduces the problem if added to a specific sample from the Showcase.

**hmmmmm** · 7 Sep 2010, 11:07

Here's some test code. Please put a "tick.png"/"cross.png" into your images folder.

Note :
1) Single clicking on the "Sel" boolean fields changes the state of the field BUT the "changed" callback does not fire.

2) Double clicking to edit the field, causes the original style checkbox to reappear (I have tried setting the keys in editorValueIcons to "selected/checked" etc.) and then not disappear again - but then the "changed" callback IS fired.

What I really need - and would expect - is for the edit mode to be deactivated (e.g. with editEvent="none") BUT for the changed/change callback to fire when the state is toggled... so that I can respond and do useful things with that knowledge.

Thanks.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <SCRIPT>
            var isomorphicDir = "./lib/isomorphic/";
        </SCRIPT>
        <script src="./lib/isomorphic/system/modules/ISC_Core.js">
        </script>
        <SCRIPT SRC=./lib/isomorphic/system/modules/ISC_Foundation.js>
        </SCRIPT>
        <SCRIPT SRC=./lib/isomorphic/system/modules/ISC_Containers.js>
        </SCRIPT>
        <SCRIPT SRC=./lib/isomorphic/system/modules/ISC_Grids.js>
        </SCRIPT>
        <SCRIPT SRC=./lib/isomorphic/system/modules/ISC_Forms.js>
        </SCRIPT>
        <SCRIPT SRC=./lib/isomorphic/system/modules/ISC_DataBinding.js>
        </SCRIPT>
        <SCRIPT SRC=./lib/isomorphic/skins/SmartClient/load_skin.js>
        </SCRIPT>	
    </head>
    <body>
        <script language="javascript">
        	var testData = [{"Foo":"FooEntry1","Sel":true},{"Foo":"FooEntry2","Sel":true},{"Foo":"FooEntry3","Sel":true}];

			
        	isc.ListGrid.create({
                ID: "Grid_1",
                title: "Test",
                width: 500,
                height: 250,
                selectionType: "single",
				showAllRows:false,
				dataPageSize:20,
				dataFetchMode: "paged",
				autoSaveEdits : false,
				autoFetchData: true,
				fields : [
					{name:"Foo",title:"Fooo",type:"text",},
					{
						name:"Sel",
						title:"Selection",
						type:"boolean",
						canEdit:true,
						canToggle:true,
						valueIcons : {
							"true" : "tick.png",
							"false" : "cross.png"						
						},
						editorValueIcons : {
							"true" : "tick.png",
							"false" : "cross.png"						
						},
						changed:function(){alert('I have changed')},
						showValueIconOnly:true,
					}],
                data:testData
            });
        </script>
	</body>
</html>

**Isomorphic** · 17 Sep 2010, 11:36

The reason the change / changed handlers were not firing is that these are passed onto the edit items that are auto created for the row -- but in the 'canToggle:true' case, there are no edit items created so these methods never fired.
We've now made a change to directly fire listGridField.change and listGridField.changed if canToggle is true for a field and the user toggles the value which should give you the behavior you need. Note that the "form" and "item" parameters will be null in this case (as no edit item will have been created for the field being toggled).

You should see this change show up in our next nightly build.

If you need an immediate workaround, another option would be to override setEditValue() for your grid -- this method is fired by the canToggle behavior so you can catch the case where the user toggles a field value.

**hmmmmm** · 19 Sep 2010, 04:49

That is brilliant. I am just becoming more and more deeply impressed with SmartClient every day. After our evaluation the client has moved the UI team over to SC and so far it has delivered a huge boost (as much because we create a custom JS class per view page, meaning that server side MVC developers only need to know the class name, the contents of the configuration object, and from that point on both teams can work entirely independently).

Incidently, we found a way around the problem which looked something like this early version :

Code:

formatCellValue:function (value,record,rowNum,colNum,grid)
						{	
							var recordID = grid.getRecordIndex(record);
							if (value==true){								
							 return '<div onclick="'+grid.ID+'.setEditValue('+rowNum+','+colNum+',false);'+grid.ID+'.setEditValue('+rowNum+','+(colNum - 1)+',true);"><input type="radio" checked="checked"/></div>';
							} else {
							 return '<div onclick="'+grid.ID+'.setEditValue('+rowNum+','+colNum+',true);'+grid.ID+'.setEditValue('+rowNum+','+(colNum - 1)+',false);"><input type="radio"/></div>';
							}
						},

Announcement

Executing code on ListGrid boolean toggle - WITHOUT edit

Comment

Comment

Comment

Comment

Comment

Comment