Bug with ListGrid customCellEditor for SelectItem

[Blama]

Hi Isomorphic,

I was able to reproduce using BuiltInDS and v10.1p_2016-03-02.
The problem is with providing custom editor to fields that would have been TextAreaItems normally.

Please change this in animals.ds.xml (see the length="500"):

<field name="status"          title="Endangered Status"  type="text" length="500" />

BuiltInDS.java:

package com.smartgwt.sample.client;

import java.util.LinkedHashMap;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.AdvancedCriteria;
import com.smartgwt.client.data.Criterion;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.SortSpecifier;
import com.smartgwt.client.types.OperatorId;
import com.smartgwt.client.types.SortDirection;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.fields.FormItem;
import com.smartgwt.client.widgets.form.fields.SelectItem;
import com.smartgwt.client.widgets.form.fields.StaticTextItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridEditorContext;
import com.smartgwt.client.widgets.grid.ListGridEditorCustomizer;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS implements EntryPoint {
    private VLayout mainLayout;
    private IButton recreateBtn;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        mainLayout = new VLayout(20);
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        recreateBtn = new IButton("Recreate");
        recreateBtn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                recreate();
            }
        });
        mainLayout.addMember(recreateBtn);
        recreate();
        mainLayout.draw();
    }

    private void recreate() {
        Window w = new Window();
        w.setWidth("95%");
        w.setHeight("95%");
        w.setMembersMargin(0);
        w.setModalMaskOpacity(70);
        w.setTitle("ListGrid-editRow FormItems get ListGrid CSS classes when normal editor is TextAreaItem");
        w.setShowMinimizeButton(false);
        w.setIsModal(true);
        w.setShowModalMask(true);
        w.centerInPage();

        final ListGrid animalsGrid = new ListGrid();

        animalsGrid.setHeight100();
        animalsGrid.setAutoFetchData(false);
        animalsGrid.setCanEdit(true);
        animalsGrid.setDataSource(DataSource.get("animals"));
        animalsGrid.setCanGroupBy(false);
        animalsGrid.setShowRecordComponents(false);
        animalsGrid.setShowRecordComponentsByCell(false);

        ListGridField commonName = new ListGridField("commonName");
        commonName.setCanEdit(false);
        ListGridField scientificName = new ListGridField("scientificName");
        scientificName.setCanEdit(false);
        ListGridField lifeSpan = new ListGridField("lifeSpan");
        ListGridField status = new ListGridField("status");
        ListGridField diet = new ListGridField("diet");
        diet.setCanEdit(false);

        animalsGrid.setEditorCustomizer(new ListGridEditorCustomizer() {
            public FormItem getEditor(ListGridEditorContext context) {
                ListGridField field = context.getEditField();
                String animal = context.getEditedRecord().getAttributeAsString("commonName");
                switch (animal) {

                case "Anteater":
                    switch (field.getName()) {
                    case "lifeSpan":
                        return new StaticTextItem();
                    case "status":
                        return new SelectItem() {
                            {
                                setValueMap(new LinkedHashMap<String, String>() {
                                    private static final long serialVersionUID = 1L;
                                    {
                                        put("Y", "Yes");
                                        put("N", "No");
                                    }
                                });
                            }
                        };
                    default:
                        return context.getDefaultProperties();
                    }
                case "Arabian Camel":
                    switch (field.getName()) {
                    case "lifeSpan":
                        return new StaticTextItem();
                    case "status":
                        return new TextItem();
                    default:
                        return context.getDefaultProperties();
                    }
                default:
                    return context.getDefaultProperties();
                }
            }
        });
        animalsGrid.setFields(commonName, scientificName, lifeSpan, status, diet);
        animalsGrid.setSort(new SortSpecifier[] { new SortSpecifier(commonName.getName(), SortDirection.ASCENDING) });
        animalsGrid.fetchData(new AdvancedCriteria(new Criterion("commonName", OperatorId.STARTS_WITH, "A")));
        w.addItem(animalsGrid);
        w.show();
    }
}

Tested in FF26 Development Mode (Simplicity skin), but it happens in my application in all browsers (Compiled Mode).

Screenshots:


I'm not sure what causes the different display for the TextItem. It starts always white (but with wrong borders) and sometimes switches to yellow when you don't focus the TextItem/move the mouse pointer away.

Best regards
Blama

[jaredm]

Ok, I will try that. Thanks for the suggestion.

No problem, compare it to call stack of the out-of-the-box sample that works and then compare to them to figure out where it goes wrong. It may take a bit of time but its the only way I've found to diagnose such problems in my own code. Good luck!

[Blama]

Ok, I will try that. Thanks for the suggestion.

[jaredm]

If it were me I'd be putting a breakpoint on getTextBoxStyle and looking at the call stack to see how its getting the style you're seeing.

[Blama]

Hi Isomorphic,

thanks for the fast answer. Such a thing is definitely not used, no PopUpTextAreaItem, no getTextBoxStyle-override, no default-textBoxStyle-change.

To me, it looks like a bug. I'll try to create a testcase tomorrow, but I were not sucessfull today. I'll also try a editorProperties block to see if I can mitigate the issue.

Best regards
Blama

[Isomorphic]

The select item DIV in question is styled using the "textBoxStyle" applied to the item. (It is picked up by an internal JS method - formItem.getTextBoxStyle()).
For some reason your SelectItem is picking up the text box style from the base-style of the grid rather than using the standard default for SelectItems.

There is one obscure case where the framework will do this - if you are using the undocumented "PopUpTextAreaItem" class- but it seems like this would be unrelated to your usage (from the auto-generated ID alone this clearly appears to be a SelectItem).

At a guess, the form item is actually picking up the ListGrid's base cell style as its textBoxStyle attribute somehow -- perhaps this property is specified directly on the ListGridField object in application code and is being picked up that way?
A simple fix might be to add an editorProperties block to the field and explicitly set the textBoxStyle to "selectItemText".

If that doesn't explain or fix it, there may be an override to "getTextBoxStyle" in play - but it's hard to see where that would come from. As always, a test case would be the best way for us to get you a definitive answer.

Regards
Isomorphic Software

[Blama]

Hi Isomorphic,

I'm having a problem with custom cell editors like here. Unfortunately it does not reproduce in a testcase, but I can show the reason I assume behind the problem (I'm using v10.0p_2015-10-23 in my application).
The problem is that in the edit-row the background of a SelectItem does not get white. This is because the css class applied is wrong. Please see the screen recording of Chrome 46 F12 tools.


As you can see the class of the div is tallCellSelectedDark(Focused), while in this sample (used other sample for non-multiple SelectItem as in my application) it is selectItemText:


I have no idea where this comes from, but perhaps do you.

Best regards
Blama