RadioGroup enum wrapping

[acarur01]

Is there a way to force the radio button to wrap the value maps to two lines if it does not fit the column?

isc.DynamicForm.create({
    width: 500,
    numCols: 4,
    fields : [{
        name: "bugStatus", title: "Bug Status", 
        editorType: "radioGroup",vertical:false,
        valueMap : {
            "new" : "New",
            "active" : "Active",
            "revisit" : "Revisit",
            "fixed" : "Fixed",
            "delivered" : "Delivered",
            "resolved" : "Resolved",
            "reopened" : "Reopened"
        }
    },{
        name: "itemName", title: "Item Name", editorType: "comboBox", 
        optionDataSource: "supplyItem", pickListWidth: 250
    }]
});

[Isomorphic]

Sorry - we don't support a 'tiling' type layout for RadioGroupItems to automatically split into N columns - we support just horizontal or vertical layout.

You could get the effect you describe by having 2 separate, vertical RadioGroupItems in the form. The changed handler for each could clear the other item's value as well as update the value for the field you actually want to save. Here's a sample demonstrating this approach:

isc.DynamicForm.create({
    width: 500,
    numCols: 5,
    fields : [{
        name: "bugStatus1", title: "Bug Status", 
        shouldSaveValue:false,
        editorType: "radioGroup",
        valueMap : {
            "new" : "New",
            "active" : "Active",
            "revisit" : "Revisit",
            "fixed" : "Fixed"
        },
        changed:function (form,item,value) {
            form.getItem("bugStatus2").clearValue();
            form.setValue("bugStatus", value);
        }
    },{
        name:"bugStatus2", showTitle:false,
        shouldSaveValue:false,
        editorType:"radioGroup", 
        valueMap : {
            "delivered" : "Delivered",
            "resolved" : "Resolved",
            "reopened" : "Reopened"
        },
        changed:function (form,item,value) {
            form.getItem("bugStatus1").clearValue();
            form.setValue("bugStatus", value);
        }

    },{
        name: "itemName", title: "Item Name", editorType: "comboBox", 
        optionDataSource: "supplyItem", pickListWidth: 250
    },
    {type:"ButtonItem", title:"Show Values", click:"isc.warn(isc.Log.echo(this.form.getValues()))"}
    ]
});

Note - there are other ways to achieve this effect as well. One option would be to create a CanvasItem subclass which itself contained a DynamicForm with radioGroupItems embedded in it.

[acarur01]

Is there a reason for not supporting these? For dynamic value maps that may have 0-10 options, the dynamic form that it is in would break the UI depending on the outcome of the value maps.

In most cases, we do not know the size of the value map used for the radio group until the form has already been drawn.

[Isomorphic]

It's just not a feature request that has come up enough to justify us working on it (obviously at the expense of other features)!

Given your use case (requirement for handling for variable numbers of items with this format), I'd recommend you go with a CanvasItem based approach.
I started putting together a description of how to write this class and realized it'd be easiest for you if I just show you a starter sample.
So here's some starter code that defines a CanvasItem subclass which will show radio items split into columns.
showValue() has been implemented to display the value when 'setValue' is called on the form.
On change it calls "storeValue()" so forms that use this special item type will be notified of changes via the normal change/changed handlers as the user interacts with the item.

The radio group items are set up dynamically when the item is instantiated - in this case with a fixed number of columns but you could of course tweak the code to do a fixed number of rows instead. You could also add enhancements like supporting a call to 'setValueMap()' on the item at runtime, etc, if required.

Note: this is intended as a starter sample / demonstration of concepts. We're not guaranteeing this will work for your use case as written - it's just intended to show you how to write a custom component to do what you need.

Regards
Isomorphic Software

isc.defineClass("TilingRadioGroupItem", "CanvasItem");
isc.TilingRadioGroupItem.addProperties({
    numCols:2,
    // create a form as our canvas, containing radiogroupitems for our valueMap (split into cols)
    createCanvas : function () {
        return isc.DynamicForm.create({
            titleWidth:"*",
            numCols:this.numCols,
            items:this.getRadioGroupItems()
        });
    },
    getRadioGroupItems:function () {
        var items = [],
            valueMap = this.getValueMap();
        if (valueMap == null) return items;
        
        var keys = isc.isAn.Array(valueMap) ? valueMap : isc.getKeys(valueMap),
            values = isc.isAn.Array(valueMap) ? valueMap : isc.getValues(valueMap);
            
        var itemsInGroup = Math.ceil(keys.length / this.numCols);
        for (var i = 0; i < keys.length; i+= itemsInGroup) {
            var innerMap = {};
            for (var ii = i; ii < (i+itemsInGroup); ii++) {
                if (ii >= keys.length) break;
                innerMap[keys[ii]] = values[ii];
            }
            items.add({
                shouldSaveValue:false,
                type:"RadioGroupItem",
                valueMap:innerMap,
                showTitle:false,
                vertical:true,
                sourceItem:this,
                changed:function (form,item,value) {
                    this.sourceItem.valueSelected(this, value);
                }
            });
        }
        return items;
    },
    
    
    // valueSelected fired when the user selects a value from a radio item
    valueSelected : function (fromItem, value) {
        // clear any other selected values within our inner form
        var form = this.canvas,
            items = form.getItems();
        for (var i = 0; i <  items.length; i++) {
            if (items[i] == fromItem) continue;
            items[i].clearValue();
        }
        // store the value out (will fire change handlers etc)
        this.storeValue(value);
    },
    
    // helper to find an item within our form whose valueMap contains a particular entry.
    getItemForValue : function (value) {
        var form = this.canvas,
            items = form.getItems();
        for (var i = 0; i < items.length; i++) {
            var dataVals = isc.getKeys(items[i].valueMap);
            if (dataVals.contains(value)) return items[i];
        }
    },

    
    // showValue - called when "setValue()" is called on this item. 
    // Use this to update the values displayed in our embedded form
    showValue:function (displayValue, dataValue, form, item) {
        var form = this.canvas;
        if (form == null) return;
        form.clearValues();
        var item = this.getItemForValue(dataValue);
        if (item) item.setValue(dataValue);
    }
});

// Demonstration within a form:
isc.DynamicForm.create({
    width: 500,
    numCols: 5,
    fields : [{
        name:"bugStatus",
        type:"TilingRadioGroupItem",
        valueMap:{
            "new" : "New",
            "active" : "Active",
            "revisit" : "Revisit",
            "fixed" : "Fixed",
            "delivered" : "Delivered",
            "resolved" : "Resolved",
            "reopened" : "Reopened"
        },
        // note that standard behaviors will just work -- defaultValue, changed handler etc
        defaultValue:"active",
        changed:"isc.say('Value changed to:' + value)"
    }]
});

[acarur01]

Thanks. I will take a look but just a quick glance at the code, the createCanvas() would have to be called AFTER the valueMap has been set, which isn't always the case for us.

[Isomorphic]

It'd be easy to override "setValueMap()" to call "setItems" on the live canvas to solve that particular issue.