Checkbox in a column shows up as a button

[wlam]

I am trying to add checkboxes to a column in a listgrid with the following code. They show up as button instead.

protected Canvas createRecordComponent(final ListGridRecord record,
Integer colNum) {

String fieldName = this.getFieldName(colNum);

if (fieldName.equals("useCheckbox")) {
Button button = new Button();
button.setActionType(SelectionType.CHECKBOX);
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
SC.say(record.getAttribute("department") + " improved chkbox state: " + ((Button)event.getSource()).getState());
}
});
return button;
} else {
return super.createRecordComponent(record, colNum);
}
}

[Isomorphic]

A button with actionType checkbox does not render as a checkbox (inside or outside of a grid), it just has checkbox-like behavior: stays down when pressed.

To create a field in a listGrid that has checkbox-like behavior, do not use recordComponents, just declare the field as type "boolean" and set canToggle:true. Using recordComponents for this is both more complicated and much slower.

[wlam]

Thanks, I tried that. Now the checkbox shows up properly, but I can't toggle it.

        ListGridField improveAccuracylgField = new ListGridField("improveAccuracy", "Improve Accuracy");
        improveAccuracylgField.setType(ListGridFieldType.BOOLEAN);
        improveAccuracylgField.setCanSort(false);
        improveAccuracylgField.setShowGridSummary(true);
        improveAccuracylgField.setCanToggle(true);

        grid = new ListGrid();
        
        grid.setFields(departmentlgField, accuracylgField, expectedlgField, differencelgField, improveAccuracylgField);
        
        grid.setShowRecordComponents(true);
        grid.setShowRecordComponentsByCell(true);
        grid.setAlternateRecordStyles(Boolean.FALSE);  
        grid.setAutoFitData(Autofit.VERTICAL);
        grid.setDataSource(dataSource);
        grid.setAutoFetchData(true);
        grid.setChartType(ChartType.COLUMN);
        grid.setSelectionType(SelectionStyle.SINGLE);
        grid.setShowGridSummary(true);

[Isomorphic]

Try just that code on it's own - it works. Now look at what you might have added to break it. Rendering a recordComponent in the boolean column would mess up the interaction, as well as adding event handlers that cancel events, etc.

[wlam]

The only event handler is the CellDoubleClickHandler, I even tried without it and still won't toggle. The only doubt I have is the way I set up ListGridFields. The grid use a datasource with various datasourcefields, however I do want to set CellFormatter and SummaryFunction to some of these fields. These functions are only available to ListGridFields (is it true?). So, I separately create ListGridFields also for those. Not sure these messed up the toggling.

Please advise if this is the right approach.
Below is the code that create the grid.

    private ListGrid createGrid() {
        ListGrid grid;
        
        DataSource dataSource = new DataSource();
        dataSource.setDataFormat(DSDataFormat.JSON);
        
        DataSourceTextField primaryKeyField = new DataSourceTextField("primaryKey", criteria.get(level).key);
        DataSourceIntegerField accuracyField = new DataSourceIntegerField("accuracy", "Accuracy");
        DataSourceIntegerField expectedField = new DataSourceIntegerField("expected", "Expected");
        DataSourceIntegerField differenceField = new DataSourceIntegerField("difference", "Difference");
        DataSourceIntegerField improveAccuracyField = new DataSourceIntegerField("improveAccuracy");
        
        dataSource.setFields(primaryKeyField, accuracyField, expectedField, differenceField, improveAccuracyField);  

        String url = getQueryURL(level);
        
        dataSource.setDataURL(url);
        
        ListGridField departmentlgField = new ListGridField("primaryKey", criteria.get(level).key);
        departmentlgField.setShowGridSummary(true);
        departmentlgField.setSummaryFunction(new SummaryFunction() {
            public Object getSummaryValue(Record[] records, ListGridField field) {
                return "TOTAL";
            }
        });
        
        ListGridField accuracylgField = new ListGridField("accuracy", "Accuracy");
        accuracylgField.setShowGridSummary(true);
        accuracylgField.setSummaryFunction(SummaryFunctionType.AVG);
        accuracylgField.setCellFormatter(new CellFormatter() {
            public String format(Object value, ListGridRecord record,
                    int rowNum, int colNum) {
                String val = (value == null ? "" : value.toString() + "%");
                return val;
            }
        });

        ListGridField expectedlgField = new ListGridField("expected", "Expected");
        expectedlgField.setShowGridSummary(true);
        expectedlgField.setSummaryFunction(SummaryFunctionType.SUM);
        expectedlgField.setCellFormatter(new CellFormatter() {
            public String format(Object value, ListGridRecord record,
                    int rowNum, int colNum) {
                if (value == null) return null;  
                try {  
                    NumberFormat nf = NumberFormat.getFormat("#,##0");  
                    return nf.format(((Number) value).longValue());  
                } catch (Exception e) {  
                    return value.toString();  
                }  
            }
        });

        ListGridField differencelgField = new ListGridField("difference", "Difference");
        differencelgField.setShowGridSummary(true);
        differencelgField.setSummaryFunction(SummaryFunctionType.SUM);

        ListGridField improveAccuracylgField = new ListGridField("improveAccuracy", "Improve Accuracy");
        improveAccuracylgField.setType(ListGridFieldType.BOOLEAN);
        improveAccuracylgField.setCanSort(false);
        improveAccuracylgField.setShowGridSummary(true);
        improveAccuracylgField.setCanToggle(true);
        improveAccuracylgField.setSummaryFunction(new SummaryFunction() {
            public Object getSummaryValue(Record[] records,
                    ListGridField field) {
                
                // get all accuracy
                
                return "To be computed";
            }
        });
        
        grid = new ListGrid();
        
        grid.setFields(departmentlgField, accuracylgField, expectedlgField, differencelgField, improveAccuracylgField);
        
        grid.setAlternateRecordStyles(Boolean.FALSE);  
        grid.setAutoFitData(Autofit.VERTICAL);
        grid.setDataSource(dataSource);
        grid.setAutoFetchData(true);
        grid.setChartType(ChartType.COLUMN);
        grid.setSelectionType(SelectionStyle.SINGLE);
        grid.setShowGridSummary(true);
        
        grid.addCellDoubleClickHandler(new CellDoubleClickHandler() {
            public void onCellDoubleClick(CellDoubleClickEvent event) {
                if (level < MAX_LEVEL - 1) {
                    String attrValue = event.getRecord().getAttribute("primaryKey");
                    drilldown(attrValue);
                }
            }
        });
        
        return grid;
    }

More update...
I also did experiment with the following code but it is still not toggling. Wondering it has anything to do with the JSON datasource. Btw, listGridFields array returning from grid.getFields is empty.

        DataSource dataSource = new DataSource();
        dataSource.setDataFormat(DSDataFormat.JSON);
        
        DataSourceTextField primaryKeyField = new DataSourceTextField("primaryKey", criteria.get(level).key);
        DataSourceIntegerField accuracyField = new DataSourceIntegerField("accuracy", "Accuracy");
        DataSourceIntegerField expectedField = new DataSourceIntegerField("expected", "Expected");
        DataSourceIntegerField differenceField = new DataSourceIntegerField("difference", "Difference");
        DataSourceBooleanField improveAccuracyField = new DataSourceBooleanField("improveAccuracy");
        
        dataSource.setFields(primaryKeyField, accuracyField, expectedField, differenceField, improveAccuracyField);  

        String url = getQueryURL(level);
        
        dataSource.setDataURL(url);
        
        grid = new ListGrid();

        grid.setDataSource(dataSource);
        grid.setAutoFetchData(true);
        ListGridField[] listGridFields = grid.getFields();
        
        SC.say("list grid contains " + listGridFields.length + " fields, " + listGridFields);

[Isomorphic]

The problem is that your grid doesn't enable editing at all (be sure to read the Grid Editing overview).

setCanEdit(true), then, if you don't want any other fields to be editable, the simplest thing is to set editEvent to "none".

[wlam]

I stripped down to the minimum code, can you please try that out. I got very strange behavior. Every click caused the grid to add a full set of data.

public class TestGridLayout extends VLayout {
    public TestGridLayout() {
        
        setLayoutMargin(20);
        setHeight100();
        setWidth100();
        setBackgroundColor("#ABBCE1");
        
        addMember(createGrid());
    }
    
    private ListGrid createGrid() {
        ListGrid grid;
        
        DataSource dataSource = new DataSource();
        dataSource.setDataFormat(DSDataFormat.JSON);
        
        DataSourceTextField primaryKeyField = new DataSourceTextField("primaryKey", "Department");
        DataSourceIntegerField accuracyField = new DataSourceIntegerField("accuracy", "Accuracy");
        DataSourceIntegerField expectedField = new DataSourceIntegerField("expected", "Expected");
        DataSourceIntegerField differenceField = new DataSourceIntegerField("difference", "Difference");
        DataSourceBooleanField improveAccuracyField = new DataSourceBooleanField("improveAccuracy");
        
        dataSource.setFields(primaryKeyField, accuracyField, expectedField, differenceField, improveAccuracyField);  

        dataSource.setDataURL("data/dataIntegration/json/cycleCountDeptData.js");

        ListGridField departmentlgField = new ListGridField("primaryKey", "Department");
        ListGridField accuracylgField = new ListGridField("accuracy", "Accuracy");
        ListGridField expectedlgField = new ListGridField("expected", "Expected");
        ListGridField differencelgField = new ListGridField("difference", "Difference");
        ListGridField improveAccuracylgField = new ListGridField("improveAccuracy", "Improve Accuracy");
        improveAccuracylgField.setType(ListGridFieldType.BOOLEAN);
        improveAccuracylgField.setCanToggle(true);
        
        grid = new ListGrid() {
            protected boolean canEditCell(int row, int col) {
                return col == 4;
            }
        };
        
        grid.setFields(departmentlgField, accuracylgField, expectedlgField, differencelgField, improveAccuracylgField);
        
        grid.setCanEdit(true);
        grid.setEditEvent(ListGridEditEvent.CLICK);

        grid.setDataSource(dataSource);
        grid.setAutoFetchData(true);

        return grid;
    }
}

public class TestModule implements EntryPoint {

    public void onModuleLoad() {
        TestGridLayout layout = new TestGridLayout();
        
        layout.draw();
    }

}

Data file.

[
    {
        accuracy:98,
        primaryKey:"Men's",
		difference:-4,
		expected:200,
		improveAccuracy:0
    },
    {
        accuracy:93,
        primaryKey:"Women's",
		difference:-34,
		expected:300,
		improveAccuracy:0
    },
    {
        accuracy:90,
        primaryKey:"Shoe",
		difference:-2,
		expected:250,
		improveAccuracy:0
    },
    {
        accuracy:85,
        primaryKey:"Kid's",
		difference:-5,
		expected:180,
		improveAccuracy:0
    }
]

[Isomorphic]

This means your DataSource is broken. The grid attempts to save the change to the Boolean field using an "update" operation, but your DataSource just responds as though a fetch were being performed.

[wlam]

That's it,

setAutoSaveEdits(false);

fix it. Thanks very much for your help.