auto expand text field

[acarur01]

In cases where I have a dynamic form with column widths that are too short for one field, is there any way to force the other textfields to take up the same amount of width that its column is taking up? If you look at the sample below, the radiobutton is stretching that first column, but the fields remain the same width.

I am aware that setting a large column width fixes this problem but value maps can be dynamic and have no way of predicting how much space it would need.

isc.HLayout.create({
ID:"GridLayout_hLayoutWrap",
members:[
	isc.DynamicForm.create({
		ID:"GridLayout",
		numCols:8,
		colWidths:["124","124","124","124","124","124","124","124"],
		titleOrientation:"top",
		cellPadding:2,
		fields:[{
			valueMap:{"W":"Work","H":"Home","M":"Mobile","O":"Other"},defaultValue:true,isBoolean:"false",wrap:false,type:"radioGroup",title:"<nobr>phoneType&nbsp;<\/nobr>",width:"*",colSpan:"1",ID:"phoneType",vertical:false,_constructor:"RadioGroupItem"},
			{title:"<nobr>Home&nbsp;<\/nobr>",width:"*",colSpan:1,startRow:true,ID:"TextField",_constructor:"TextItem"},
			{title:"<nobr>Ext&nbsp;<\/nobr>",width:"*",colSpan:1,ID:"TextField1",_constructor:"TextItem"}
			]
		})
	]
});

[Isomorphic]

The only way to do this would be to measure the radio button label text offscreen and provide colWidths that split space according to the strategy you want.

[acarur01]

Not sure I understand - in our system, the form gets rendered and the value map update arrives after everything is drawn. I cannot just change the "colWidths" property dynamically can I? It would be great if you could provide a sample.

[Isomorphic]

You can change colWidths dynamically (note IRW flags in docs), however, if you're unhappy with what happens when your radioGroup overflows, you'll need to do offscreen measurement of the labels (whenever they arrive, before or after draw) in order to compute desired colWidths.

But note you're going to get good overflow behavior (other columns shrink as necessary to accommodate the large radioGroup) if you simply leave flexible sizes (eg 20%) on other columns.

[acarur01]

Ok. Just to do a quick test on this dynamically changing colWidths. I added the code below to my previous sample and it is not changing (And thanks for the pointer on IRW - didn't notice it before):


Perhaps I am misunderstanding?

isc.HLayout.create({
ID:"GridLayout_hLayoutWrap",
members:[
	isc.DynamicForm.create({
		ID:"testGrid",
		numCols:8,
		colWidths:["124","124","124","124","124","124","124","124"],
		titleOrientation:"top",
		cellPadding:2,
		fields:[{
			valueMap:{"W":"Work","H":"Home","M":"Mobile","O":"Other"},defaultValue:true,isBoolean:"false",wrap:false,type:"radioGroup",title:"<nobr>phoneType&nbsp;<\/nobr>",width:"*",colSpan:"1",ID:"phoneType",vertical:false,_constructor:"RadioGroupItem"},
			{title:"<nobr>Home&nbsp;<\/nobr>",width:"*",colSpan:1,startRow:true,ID:"testText",_constructor:"TextItem"},
			{title:"<nobr>Ext&nbsp;<\/nobr>",width:"*",colSpan:1,ID:"testText2",_constructor:"TextItem"}
			]
		})
	]
});

isc.Button.create({top:200,
ID:"test", click: function(){testGrid.setProperty("colWidths", ["200","124","124","124","124","124","124","124"]);testGrid.markForRedraw();}

});

[Isomorphic]

What result are you hoping for here? You have a form with it's default width of 250, and you're setting colWidths that sum to far more than that.

[acarur01]

Whoops - setting proper colwidths and width on grid fixes it. Thakns.