Multi-Select Item and DataSource Values

[acole]

Hello,

I am using Smart GWT Pro release 2.3 and would like to include multi-select field item within my dynamic form. I am working from the show case example:
http://www.smartclient.com/smartgwt/showcase/#multi_select_new_category

The relevant code fragment is below.

DataSource sdrMortalityDS = new DataSource();
sdrMortalityDS.setDataFormat(DSDataFormat.XML);
sdrMortalityDS.setRecordXPath("//data/record");
sdrMortalityDS.setDataURL(constructWebServiceURL("sdrother", "field=mortality"));
DataSourceTextField sdrMortalityDSField = new DataSourceTextField("item", "Mortality");
sdrMortalityDSField.setValueXPath("item");
sdrMortalityDS.setFields(sdrMortalityDSField);

final SelectItem uiMortalityField = new SelectItem("mortality", "Mortality");
uiMortalityField.setMultiple(true);
uiMortalityField.setMultipleAppearance(MultipleAppearance.PICKLIST);
uiMortalityField.setOptionDataSource(sdrMortalityDS);
uiMortalityField.setAutoFetchData(true);

The form field successfully auto fetches the option list and displays.

The issue I am having is that comma seperated options in the field are not being recognized by the UI control as being already selected (see attached image).

How do I get the UI control to recognize the "1st Decade" and "2nd Decade" values and check the appropriate items in the list.

Thank you

[Isomorphic]

Where's your setValue() call or other means of populating the control with data? That's the key piece.

[acole]

It is initially getting assigned during the auto fetch data load process. I have a restful web service delivering the form data to my client. All of the data successfully loads is visible in my form. The issue is that the multi-select field does not appear to recognize the comma seperated values in the field after the fetch operation completes.

[Isomorphic]

Yes, we understand the issue - the problem is, you still haven't shown us the data being populated into the item.

Try using SC.logEcho() and logEchoAll() on the JavaScriptObject available from whatever Record you are supplying to the form - this will most likely reveal the problem.

[acole]

If you look at the image attachment of my initial post, you will see the data is assigned to the field after the fetch. Also, I will update my code to get you the log information you requested.

[Isomorphic]

? you have an image that shows a value in a field. We have no idea what that value is - a String (wrong) or an Array (right) or something else. That's why we've been requesting more information.

[acole]

OK - I think I understand where my logic error is. The data source value behind the SelectItem is a String (which is wrong based on your previous reply).

Thank you for pointing this out.

I would like to keep the data source field a String type to keep things consistent with the current web service. Would it make sense to write an event handler for the SelectItem that parses the text field and assigns the values of the SelectItem? If yes, then would the "addDataArrivedHandler()" be the appropriate method to handle this?

[Isomorphic]

You probably want to do this at the DataSource level instead, using transformRequest and transformResponse to go between the String representation you want, and the expected Array representation that the UI control expects. That way, it's an Array through the client system, which is also the right thing for validation and other subsystems.

[acole]

OK - So, if I go back to the original show case example:

http://www.smartclient.com/smartgwt/showcase/#multi_select_new_category

final SelectItem selectItemMultipleGrid = new SelectItem();
selectItemMultipleGrid.setTitle("Select Multiple (Grid)");  
selectItemMultipleGrid.setMultiple(true);  
selectItemMultipleGrid.setMultipleAppearance(MultipleAppearance.GRID);  
selectItemMultipleGrid.setValueMap("Cat", "Dog", "Giraffe", "Goat", "Marmoset", "Mouse");

It is not clear to me how I would mark: "Cat" and "Dog" as the previously selected values.

The setValueMap() assigns the complete list. How do I mark only "Cat" and "Dog" as selected?

Thank you

[Isomorphic]

This is a known inconvenience that we plan to address - you can use the setValue() on DynamicForm that takes a JavaScript object, providing an JavaScriptArray of the values.

[acole]

Would it be possible to share a code fragment that illustrates what you are proposing? It is not clear to me how I would "construct a JavaScriptArray of values" within my GWT code base. Is there a way to get a handle to an existing JavaScriptArray associated with the SelectItem?

Thanks.

[acole]

OK - I got it.

By using the DSCallback() feature of the DynamicForm.fetchData() method, I was able to isolate a point in time when the form was populated, but not yet rendered in the web page.

Next, I got a handle to each field in the form that required fixing and explicitly assigned the values. A sample code fragment is below.

    public String[] extractValues(String aTextValue)
    {
        String[] multiValues;

        if (GWTStrUtl.isEmpty(aTextValue))
            return null;
        int offset = aTextValue.indexOf(',');
        if (offset == -1)
        {
            multiValues = new String[1];
            multiValues[0] = aTextValue;

            return multiValues;
        }
        else
            return aTextValue.split(",");
    }

    public void fixMultiSelectItems()
    {
        FormItem formItem = getItem("mortality");
        if (formItem != null)
        {
            String textValue = getValueAsString("mortality");
            String multiValues[] = extractValues(textValue);
            if (multiValues != null)
            {
                SelectItem selectItem = (SelectItem) formItem;
                selectItem.setValues(multiValues);
            }
        }
    }

The SelectItem component is working properly now.

Thanks.