PickTreeItem vs SelectItem displaying id during editing a grid

[michalg]

1. SmartClient Version: SNAPSHOT_v9.1d_2013-10-14/LGPL Development Only (built 2013-10-14)

2. Firefox 3.6.17

3.

4.

5.

6. sample code

Hello,
I have got a problem using PickTreeItem while editing a grid. Grid has autoSaveEdits(false).
When I use SelectItem intead of PickTreeItem everything works fine.
With PickTreeItem as inline editor I see a strange behavior such as displaying value (id) of the field instead of displayField.
This is happening after finishing editing of the row (before save).
Please, take a look at the attached screen shots: first one using SelectItem, the second one using PickTreeItem.
No other changes has been made to sample code - only switch of items.
employer_code field is normally hidden (used as display field source) - it is shown here just for debugging.

package pl.com.tech4.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.DOM;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.DataSourceField;
import com.smartgwt.client.data.OperationBinding;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.data.fields.DataSourceTextField;
import com.smartgwt.client.types.DSDataFormat;
import com.smartgwt.client.types.DSOperationType;
import com.smartgwt.client.types.DSProtocol;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.form.fields.PickTreeItem;
import com.smartgwt.client.widgets.form.fields.SelectItem;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;

public class MainEntryPoint implements EntryPoint {
   
    public void onModuleLoad() {

        DOM.getElementById("loadingPicture").removeFromParent();
        layout();
        SC.showConsole();
    }
   
    private void layout() {

        DataSource employmentDS = new DataSource();
        employmentDS.setID("Employment");
        OperationBinding fetchBinding = new OperationBinding();
        fetchBinding.setOperationType(DSOperationType.FETCH);
        fetchBinding.setDataFormat(DSDataFormat.XML);
        fetchBinding.setDataProtocol(DSProtocol.POSTXML);
        employmentDS.setOperationBindings(fetchBinding);
        employmentDS.setDataURL("Employment.xml");
       
        DataSourceField idField = new DataSourceField();
        idField.setName("id");
        idField.setPrimaryKey(true);
        idField.setHidden(true);
        DataSourceField employerField = new DataSourceField();
        employerField.setName("employer");
        employerField.setForeignKey("Department.id");
        employerField.setValueXPath("employer/id");
        DataSourceTextField employer_codeField = new DataSourceTextField();
        employer_codeField.setName("employer_code");
        employer_codeField.setValueXPath("employer/code");
        employmentDS.setFields(idField, employerField, employer_codeField);
        employmentDS.setClientOnly(true);

        DataSource departmentDS = new DataSource();
        departmentDS.setID("Department");
        departmentDS.setOperationBindings(fetchBinding);
        departmentDS.setDataURL("Department.xml");
       
        DataSourceField idDepField = new DataSourceField();
        idDepField.setName("id");
        idDepField.setPrimaryKey(true);
        idDepField.setHidden(true);
        DataSourceTextField codeField = new DataSourceTextField();
        codeField.setName("code");
        DataSourceField parentIdField = new DataSourceField();
        parentIdField.setName("parentId");
        parentIdField.setForeignKey("Department.id");
        parentIdField.setValueXPath("parentId/id");
        departmentDS.setFields(idDepField, codeField, parentIdField);
       
//        SelectItem foreignItem = new SelectItem("employer");
        PickTreeItem foreignItem = new PickTreeItem("employer");
        foreignItem.setCanSelectParentItems(true);
        foreignItem.setOptionDataSource(departmentDS);
        foreignItem.setValueField("id");
        foreignItem.setDisplayField("code");
       
        ListGrid lg = new ListGrid();
        lg.setWidth(300);
        lg.setCanEdit(true);
        lg.setAutoSaveEdits(false);
        ListGridField lgf = new ListGridField("employer");
        lgf.setEditorType(foreignItem);
        lgf.setDisplayField("employer_code");
        lg.setFields(lgf);
       
        lg.setDataSource(employmentDS);
        lg.setUseAllDataSourceFields(true);
        lg.fetchData();
       
        lg.draw();
    }
   
}

Employment.xml

<response>
    <status>STATUS_SUCCESS</status>
    <startRow>0</startRow>
    <endRow>1</endRow>
    <totalRows>2</totalRows>
    <data>
        <Employment>
            <id>20</id>
            <employer>
                <id>3</id>
                <code>Microsoft</code>
            </employer>
        </Employment>
        <Employment>
            <id>21</id>
            <employer>
                <id>4</id>
                <code>Apple</code>
            </employer>
        </Employment>
    </data>
</response>

Department.xml

<response>
    <status>STATUS_SUCCESS</status>
    <startRow>0</startRow>
    <endRow>4</endRow>
    <totalRows>5</totalRows>
    <data>
        <Department>
            <id>1</id>
            <code>Oracle</code>
        </Department>
        <Department>
            <id>2</id>
            <code>Sun</code>
            <parentId>
                <id>1</id>
                <code>Oracle</code>
            </parentId>
        </Department>
        <Department>
            <id>3</id>
            <code>Microsoft</code>
            <parentId>
                <id>4</id>
                <code>Apple</code>
            </parentId>
        </Department>
        <Department>
            <id>4</id>
            <code>Apple</code>
            <parentId>
                <id>2</id>
                <code>Sun</code>
            </parentId>
        </Department>
    </data>
</response>

MichalG

[Isomorphic]

Only one of your two DataSources has been set clientOnly, so the problem is most likely that the non clientOnly DataSource is trying to do a fetch to get the display value (see FormItem.fetchMissingValues), which fails.

[michalg]

Right, setting the option DataSource to clientOnly helps in the sample.
Although, I can't do this (clientOnly) in my app where the problem occurs.
Trying to catch it I ended with this sample and, what still bothers me, is the fact that using same data sample with SelectItem works as expected no matter if DataSources are clientOnly or not.
Additionally, I do not see any requests taking place when the user finishes editing the current row. This is understandable as all data is in the cache already.

Have you an idea why PickTreeItem behaves differently in the very same situation? That could help me to trap a real problem in my app.
Thanks,
MichalG

[Isomorphic]

We just covered this:

... the problem is most likely that the non clientOnly DataSource is trying to do a fetch to get the display value (see FormItem.fetchMissingValues), which fails.

So if you're seeing a similar problem in your real application, you probably have a DataSource that is not fulfilling this fetch properly.