Listgrid: valueMap per row (optionDataSource??)

[jj_kbs]

Version: v10.1p_2016-01-12
Browser: Chrome Version 53.0.2785.116 m

Description:
The Smartclient Doc pertaining select/selectItems in ListGrids mostly shows the same Map per Row.
I wanted to know if it is possible to map each row(record?) to a different selectItem valueMap.

The Doc from optionDataSource states such a feat but i have not been able to find out how to make it work.


With the example below the selectfield shows 2 Options "Verbrennungsmotor" and "fliegen" it shows this on every row
My intended result is that the first Row will show the 2 Options from valuemap[0] and the second row will show the 2 Options from valuemap[1]

Sample Code:

Local Data in JSON Format
reflist[xx] contains the records for the listgrid
valuemap[x] contains the valeMap for each record (this is one of the points i am uncertain as i dont know if this is the correct format to do it)

var reflist = [];
reflist[20] = [];
reflist[20][0] = {Stelle: "3", Name: "Physikalische Ausgänge", };
reflist[20][1] = {Stelle: "4", Name: "Andere Bewegungen", };

var valuemap = [];
valuemap[0] = {"id":"1", "opt" : "Elektrischer Motor", "id":"2", "opt" : "Verbrennungsmotor"};
valuemap[1] = {"id":"1", "opt" : "Unterwasser", "id":"2", "opt" : "fliegen"};

// a Buttonpress triggers this code to fill the grid
select_grid.setData(reflist[20]);

Listgrid

isc.ListGrid.create({
    ID: "select_grid",
    width: "100%",
    alternateRecordStyles: true,
    autoFitData: "vertical",
    cellHeight: 50,
    canEdit: true,
    autoDraw: false,

    fields:[
        {name:"Stelle", width:"75", canEdit:false},
        {name:"Name", width:"250", canEdit:false},
        {name:"Options", width:"200", editorType: "SelectItem",
            editorProperties : {                    
                displayField : "opt",
                valueField : "id",
                optionDataSource : isc.DataSource.create({
                    dataFormat : "json",
                    ID : "valueDS",
                    clientOnly : true,
                    testData : valuemap
                }),  
            }
        },
        {name:"Beschreibung", width:"*"}
    ]
});

any help/hints are appriciated

[Isomorphic]

optionDataSource can do this, but the data returned by optionDataSource is not a list of valueMaps. It's a list of Records from which valueMaps are derived. This means that each option that appears in any valueMap needs to be represented by a Record that is available from the optionDataSource. You can use criteria to limit the options to a specific set of Records. Please review samples if this is not immediately clear.

[jj_kbs]

the only sample i could find containing optionDataSource was this one
http://www.smartclient.com/#formatRelatedValue

sadly it did not illuminate my understanding on the matter

i read and reread most of the documentation and forum posts i could find about listgrid valuemaps and optionDataSource but i am no closer in figureing out how exactly the data has to be formatted to generate any kind of useful output for the option described in my opening post
(any information here would be grande in spite of the solution i have come up with in the meantime)


i have found an alternate solution that might be feasible for the small amount of data i will actually need in the grid at any given time .. i dismissed it at the time but desperation breeds ingenuity :)
i will leave it here for other users to find and a small question regarding valuemap formatting

var reflist = [];
reflist[20] = [];
reflist[20][0] = {Stelle: "3", Name: "Physikalische Ausgänge"};
reflist[20][1] = {Stelle: "4", Name: "Andere Bewegungen"};


var valuemap = [];
valuemap[0] = { 1 :"Elektrischer Motor", 2 :"Verbrennungsmotor"};
valuemap[1] = { 1 : "Unterwasser", 2 : "fliegen"};


isc.ListGrid.create({
    ID: "select_grid",
    width: "100%",
    alternateRecordStyles: true,
    autoFitData: "vertical",
    cellHeight: 50,
    canEdit: true,
    autoDraw: false,

    fields:[
        {name:"Stelle", width:"75", canEdit:false},
        {name:"Name", width:"250", canEdit:false},
        {name:"Options", width:"200", editorType: "select",
         displayField:"opt",
         getEditorValueMap : function (values, field, grid) {
             var id = values.Stelle;
             if(id == 3) {return valuemap[0]}
             else if (id == 4) {return valuemap[1]}
             else {return ""}
         }
        },
        {name:"Beschreibung", width:"*"}
    ]
});

there is a curios interaction here that i dont entirely grasp
when i remove the line

displayField:"opt",

from the Listgrid, after editing(choosing) an option in the select element it shows the number associated and not the text in the grid (and also in the record)
(disclaimer displayfield can be any value as long as it is not empty or missing for this to work)

example with displayField:"opt",
select_grid.getRecord(1)
Object {Stelle: "4", Name: "Andere Bewegungen", _selection_2: false, Options: "2", opt: "fliegen"}

example without displayField:"opt",
select_grid.getRecord(1)
Object {Stelle: "4", Name: "Andere Bewegungen", _selection_2: false, Options: "2"}

[Blama]

Hi jj_kbs,

In SmartGWT (Java) you would do such a thing with setEditorCustomizer() / editorCustomizer on a ListGrid. Have a look this code snippet helps you:

                setEditorCustomizer(new ListGridEditorCustomizer() {
                    public FormItem getEditor(ListGridEditorContext context) {
                        if (context.getEditedRecord().getAttributeAsString("SHORTNAME").equals("currencySymbol")) {
                            return new TextItem();
                        } else if (context.getEditedRecord().getAttributeAsString("SHORTNAME").equals("currencyPosition")) {
                            SelectItem backOrFront = new SelectItem();
                            backOrFront.setValueMap(new LinkedHashMap<String, String>() {
                                private static final long serialVersionUID = 608178157811238891L;
                                {
                                    put("back", i18n.currencySymbolBack());
                                    put("front", i18n.currencySymbolFront());
                                }
                            });
                            return backOrFront;
                        } else
                            return new SelectItemYesNo();
                    }
                });

Best regards
Blama