Capturing changed SmartGWT ListGrid records with preloaded checkboxes

Question

I have a ListGrid with state loaded from the database, some or all checkboxes will be checked on loading. I used:

 newListGrid.setSelectionType(SelectionStyle.SIMPLE);
 newListGrid.setSelectionAppearance(SelectionAppearance.CHECKBOX);

Users select or deselect one or more checkboxes and save their changes. I want to collect only the records that have been changed.

I tried SelectionUpdatedHandler, but I don't see a way to access records that have changed - only records that are selected.

I tried a SelectionChangedHandler, it allows me to collect only the records that are changed, but it fires twice on each click(so trying to set an attribute happens twice, resetting it):

 class FilterSelectionChangedHandler implements SelectionChangedHandler {
      onSelectionChanged(SelectionChangedEvent event) { 
           record = event.getRecord();
           record.setAttribute(CHECK_VALUE, event.getState()); // set this field to whatever user did
           editedRecords.add(record); // editedRecords is a set
    }
}

Is there any other way to get the checkbox state? Right now I'm using ListGrid.getSelected, then removing all selected records, whatever's left isn't selected, but there has got to be a better way.

I'm using SmartGWT 3.1 and GWT 2.3

Thanks in advance

Answer 1

Steps to follow:

• Set a another attribute ORIGINAL_CHECK_VALUE in the records having same value as attribute CHECK_VALUE have when records are loaded in the ListGrid
• Add changed handler on check box field and on each change of the value in the check box add the record in a List
• Finally compare the value of ORIGINAL_CHECK_VALUE and CHECK_VALUE to find out the edited records.

Here is the sample code directly form Smart GWT Showcase after some modification.

EntryPoint.java:

import java.util.ArrayList;
import java.util.HashSet;
import java.util.List;
import java.util.Set;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.DSCallback;
import com.smartgwt.client.data.DSRequest;
import com.smartgwt.client.data.DSResponse;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.ExportDisplay;
import com.smartgwt.client.types.ExportImageFormat;
import com.smartgwt.client.types.HeaderControls;
import com.smartgwt.client.types.ListGridEditEvent;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.VerticalAlignment;
import com.smartgwt.client.types.VisibilityMode;
import com.smartgwt.client.util.KeyCallback;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Img;
import com.smartgwt.client.widgets.Label;
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.DynamicForm;
import com.smartgwt.client.widgets.form.fields.IntegerItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.form.validator.IntegerRangeValidator;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.client.widgets.grid.events.ChangedEvent;
import com.smartgwt.client.widgets.grid.events.ChangedHandler;
import com.smartgwt.client.widgets.layout.SectionStack;
import com.smartgwt.client.widgets.layout.SectionStackSection;
import com.smartgwt.client.widgets.layout.VLayout;

public class SmartGWTProject implements EntryPoint {

    public void onModuleLoad() {

        final ListGrid countryGrid = new ListGrid();
        countryGrid.setAlwaysShowEditors(true);
        countryGrid.setWidth(550);
        countryGrid.setHeight(224);
        countryGrid.setShowAllRecords(true);
        countryGrid.setCellHeight(22);
        countryGrid.setDataSource(CountryXmlDS.getInstance());

        ListGridField nameField = new ListGridField("countryName", "Country");
        ListGridField memberG8Field = new ListGridField("member_g8", "Member G8");
        countryGrid.setFields(nameField, memberG8Field);

        countryGrid.fetchData(null, new DSCallback() {

            @Override
            public void execute(DSResponse dsResponse, Object data, DSRequest dsRequest) {
                Record[] records = dsResponse.getData();
                for (Record record : records) {
                    record.setAttribute("original_member_g8",
                            record.getAttributeAsBoolean("member_g8"));
                }
                countryGrid.setData(records);
            }
        });
        countryGrid.setCanEdit(true);
        countryGrid.setEditEvent(ListGridEditEvent.CLICK);

        final List<ListGridRecord> editedRecords = new ArrayList<ListGridRecord>();
        memberG8Field.addChangedHandler(new ChangedHandler() {

            @Override
            public void onChanged(ChangedEvent event) {
                ListGridRecord record = countryGrid.getRecord(event.getRowNum());
                record.setAttribute("member_g8", (Boolean) event.getValue());
                editedRecords.add(record); // editedRecords is a set
            }
        });

        IButton btn = new IButton("Find edited records");
        btn.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                Set<String> uniqueCountryIds = new HashSet<String>();
                for (ListGridRecord record : editedRecords) {
                    if (uniqueCountryIds.add(record.getAttribute("countryCode"))) {
                        // check for unique records only
                        if (!record.getAttributeAsBoolean("original_member_g8").equals(
                                record.getAttributeAsBoolean("member_g8"))) {
                            System.out.println(record.getAttribute("countryName"));
                        }
                    }
                }
            }
        });

        btn.setTop(400);
        btn.setWidth(100);

        Canvas canvas = new Canvas();

        canvas.addChild(countryGrid);
        canvas.addChild(btn);

        canvas.draw();
    }
}

CountryXmlDS.java:

import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.fields.*;

public class CountryXmlDS extends DataSource {

    private static CountryXmlDS instance = null;

    public static CountryXmlDS getInstance() {
        if (instance == null) {
            instance = new CountryXmlDS("countryDS");
        }
        return instance;
    }

    public CountryXmlDS(String id) {

        setID(id);
        setRecordXPath("/List/country");
        DataSourceIntegerField pkField = new DataSourceIntegerField("pk");
        pkField.setHidden(true);
        pkField.setPrimaryKey(true);

        DataSourceTextField countryCodeField = new DataSourceTextField("countryCode", "Code");
        countryCodeField.setRequired(true);

        DataSourceTextField countryNameField = new DataSourceTextField("countryName", "Country");
   countryNameField.setRequired(true);

        DataSourceBooleanField memberG8Field = new DataSourceBooleanField("member_g8", "G8");

        setFields(pkField, countryCodeField, countryNameField, memberG8Field);

        setDataURL("ds/test_data/country.data.xml");
        setClientOnly(true);
    }
}

country.data.xml:

<List>

    <country>
        <countryName>United States</countryName>
        <countryCode>US</countryCode>
        <member_g8>true</member_g8>
    </country>
    <country>
        <countryName>China</countryName>
        <countryCode>CH</countryCode>
        <member_g8>false</member_g8>
    </country>
    <country>
        <countryName>Japan</countryName>
        <countryCode>JA</countryCode>
        <member_g8>true</member_g8>
    </country>
    <country>
        <countryName>India</countryName>
        <countryCode>IN</countryCode>
        <member_g8>false</member_g8>
    </country>
    <country>
        <countryName>Germany</countryName>
        <countryCode>GM</countryCode>
        <member_g8>true</member_g8>
    </country>
    <country>
        <countryName>United Kingdom</countryName>
        <countryCode>UK</countryCode>
        <member_g8>true</member_g8>
    </country>
    <country>
        <countryName>France</countryName>
        <countryCode>FR</countryCode>
        <member_g8>true</member_g8>
    </country>

</List>

Screenshot of the project structure: