How to align the picker icon for a CanvasItem.

[asingla]

I have a dynamic form with one field as a Canvas Item.

Canvas Item contains a list gird and a picker icon. Please see the below code.
Now the icon is coming in the center (along with the grid). I want to align the icon to the top (so it will appear next to grid header). I tried all properties but not able to do so. Please help.

isc.DynamicForm.create({ ID:"DistSetForm", width:"100%", height:"400px", cellPadding:5, requiredTitlePrefix: "* ", autoDraw: false,
fields: [{name: "AssosViews", title: "Associated Views", type: "CanvasItem", titleVAlign: "top", align: "top", showPickerIcon: true, pickerIconSrc:"[SKIN]/actions/plus.png", pickerIconHeight:15, pickerIconWidth:15}]});
isc.ListGrid.create({ ID:"AssosViewsGrid", autoDraw: false, alternateRecordStyles: true, canRemoveRecords: true,
fields:[{ name:"viewId", showIf:"false"}, 
       	{ name:"name", title:"View Name"}],
data:[{ viewId: "-1", name:"All"}]});
DistSetForm.getField("AssosViews").setCanvas(AssosViewsGrid);

[asingla]

Please advice me on this. Thanks.

[damend]

I have the same issue for the RelativeDateItem where
I want to use an additional custom icon and
setShowCalculatedDateField(false);

Both icons, the custom one and the datepicker should be aligned to the right.

I can see many people addressing this issue in topics,
so here are more information, please see attached screenshot.

The code is the following:

1. Possible solution: configuring the RelativeDateItem
RelativeDateItem item = new RelativeDateItem();
item.setShowCalculatedDateField(false);

FormItemIcon icon = new FormItemIcon("path.png");
item.setIcons(icon);

2. Possible solution: CanvasItem

DynamicForm innerForm = new DynamicForm();
innerForm.setItemLayout(FormLayoutType.TABLE);
innerForm.setNumCols(2);
innerForm.setCellPadding(0);
innerForm.setPadding(0);
// innerForm.setMinColWidth(100);
innerForm.setColWidths(230,0);
// innerForm.setCellPadding(50);

RelativeDateItem dateItem = new RelativeDateItem();
dateItem.setShowCalculatedDateField(false);
dateItem.setShowTitle(false);
dateItem.setCellStyle("relativeWirecardFormCell");
FormItemIcon icon = new HelpIcon("BLABLA");

SC.logWarn(icon.getAttributes().toString());
icon.setAttribute("style", "padding-left:50px; background-color:yellow;");

dateItem.setAttribute("iconOrientation", "right");
dateItem.setIcons(icon);

innerForm.setFields(dateItem);

setCanvas(innerForm);

I tried to set CSS on the RelativeDateItem, but the Icon itself has style padding, so it cannot be set.
How can I set the style for FormItemIcon ?

3. Solution: SmartGWT guys offer a solution

As I realized, many people are asking for this feature, so I think it's an expected feature to vAlign all formItems to the same.

[Isomorphic]

We don't currently support specifying explicit vertical alignment of pickerIcons.
This is something we will take under consideration but it's not on our immediate roadmap as a frequently requested feature.

We do support specifying vertical alignment of other icons - you can use FormItem.setIconVAlign() [or just the formItem.iconVAlign attribute if you're running SmartClient / JavaScript].

On the second request (with the screenshot) - we don't currently support injecting a custom icon in front of the date chooser icon.
If you're wedded to having the icons in this order, you may be able to achieve it by setting showChooserIcon to false, and then supplying two custom icons, one of which essentially duplicates the date-chooser (has the same media and shows a date picker which is then used to populate the item on date selection)

Regards
Isomorphic Software

[damend]

Hi,

thanks for your response.
We're looking forward to it.

For now, we want to achieve a temporary version, where datechooser will jump, but not help icon. ( see attachment)

Date-chooser is a CanvasItem, so how to use it as a formItemicon? Add it to the innerForm of the Canvas.

By using a RelativeDateItem in a innerForm in a CanvasItem,
I was not able to share the values/criteria.

The code is from below and :
dateItem.addChangedHandler(new ChangedHandler() {

@Override
public void onChanged(ChangedEvent event) {
storeValue(event.getValue());
}
});

setShouldSaveValue(true);

setEditCriteriaInInnerForm(true);
=> is it expected to pass the criteria of the relativeDateitem to the canvas item? - doesn't work
setValue(RelativeDate.TODAY.getValue());

storeValue(RelativeDate.TODAY.getValue())
=> throws self.storeValue is not a function

still validator fails on pressing submit button, saying, that value is no date

[Isomorphic]

We're not understanding exactly what you're doing / how you'd like it to behave from your description.
The best way to proceed would be to build a small test case we can run on our end to see what you're trying to do. This would be basically an EntryPoint class which defines your custom form item type, and a dynamicForm to put it on, and draws the form.

Then we have a way to see exactly what you're actually doing, and you can describe exactly how you'd like it to behave (and we'll help you get there!)

Thanks