TileGrid.filterData()

[kccheng]

Hi,

Does TileGrid has filterData() API ?

I use TileGrid.fetchData(dynamicForm.getValuesAsCriteria())
For a RestDataSource which connect to PHP backend.
The PHP did not receive the

$_GET['textMatchStyle']

parameter. How can I force TileGrid to request data
with $_GET['textMatchStyle'] parameter ?


Regards
KC

[kccheng]

Also, when using

TileGrid.fetchData(dynamicForm.getValuesAsCriteria ())

to fetch page from PHP backend with TileGrid.setShowAllRecords(false).
If my PHP backend receive

_startRow = 0
_endRow = 75

and response

_startRow = 0
_endRow = 75
_totalRows = 800

The TileGrid will continue fetching next page _startRow=75,_endRow=150 until
all 800 records been fetched.
This looks like a bug to me.

I replaced TileGrid by ListGrid, and the problem goes away.
The response_startRow =0,_endRow=75,_totalRows=800 cause ListGrid
stay on 1st page until I scroll to next page.

Hopefully, I described the issue clear ...


KC

[Isomorphic]

Can you show your TileGrid definition where you're seeing this problem?

[kccheng]

Hi,

I try to simplify the code, but it's still quite long ... sorry for that.

public class G141Home implements EntryPoint {

    public void onModuleLoad() {

        final Map<String, String[]> cityCountyMap = new HashMap<String, String[]>();
        cityCountyMap.put("基隆市", new String[] {
            "暖暖區", "七堵區", "安樂區", "中山區", "中正區", "信義區", "仁愛區" });
 
        .... some data is skipped here ...

        HLayout mainLayout = new HLayout();
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        VLayout leftLayout = new VLayout();
        leftLayout.setWidth("210px");
        leftLayout.setShowResizeBar(true);


        VLayout rightLayout = new VLayout();
        rightLayout.setShowResizeBar(true);
        rightLayout.setResizeBarTarget("next");
        rightLayout.setWidth100();
        rightLayout.setHeight100();


        SectionStack filterStack = new SectionStack();
        filterStack.setWidth100();
        filterStack.setHeight100();

        SectionStackSection filterSection = new SectionStackSection("Filter");
        filterSection.setID("filterSection");
        filterStack.addSection(filterSection);

        leftLayout.addMember(filterStack);


        final TabSet saleTabSet = new TabSet();

        saleTabSet.setWidth100();
        saleTabSet.setHeight100();
        rightLayout.addMember(saleTabSet);

        Tab listGridTab  = new Tab("ListGrid");
        Tab tileGridTab  = new Tab("TileGrid");

        saleTabSet.addTab(listGridTab);
        saleTabSet.addTab(tileGridTab);

        final ListGrid listGrid = new ListGrid();
        listGrid.setWidth100();
        listGrid.setHeight100();
        listGrid.setShowAllRecords(false);
        listGrid.setAutoFetchData(true);
        listGrid.setDataSource(HouseDS.getInstance());
        listGrid.setAlternateRecordStyles(true);

        ListGridField lgPicture1Field = new ListGridField("picture1",  "Picture1", 100);
        ListGridField lgNameField = new ListGridField("name", "Name", 100);
        ListGridField lgCityField = new ListGridField("city", "City", 100);
        ListGridField lgCountyField = new ListGridField("county", "County", 100);
        ListGridField lgHouseAgeField = new ListGridField("houseAge", "HouseAge", 100);

        listGrid.setFields(lgPicture1Field, lgNameField, lgCityField, lgCountyField);

        final TileGrid tileGrid = new TileGrid();
        tileGrid.setWidth100();
        tileGrid.setHeight100();
        tileGrid.setTileWidth(128);
        tileGrid.setTileHeight(128);
        tileGrid.setShowAllRecords(false);
        tileGrid.setDataSource(HouseDS.getInstance());
        tileGrid.setAutoFetchData(true);
        tileGrid.setAnimateTileChange(true);

        DetailViewerField dvPicture1Field = new DetailViewerField("picture1");
        dvPicture1Field.setImageSize(72);
        DetailViewerField dvNameField = new DetailViewerField("name");
        DetailViewerField dvCityField = new DetailViewerField("city");
        DetailViewerField dvCountyField = new DetailViewerField("county");

        tileGrid.setFields( dvPicture1Field, dvNameField, dvCityField, dvCountyField);

        final DynamicForm filterForm = new DynamicForm();
        filterForm.setWidth100();
        filterForm.setHeight100();
        filterForm.setIsGroup(true);
        filterForm.setGroupTitle("Filter");
        filterForm.setNumCols(2);
        filterForm.setDataSource(HouseDS.getInstance());
        filterForm.setAutoFocus(false);

        SelectItem cityFilterItem = new SelectItem();
        cityFilterItem.setName("city");
        cityFilterItem.setTitle("City");
        cityFilterItem.setValueMap(
            "基隆市", "臺北市", "臺北縣", "桃園縣", "新竹縣", "新竹市",
            "苗栗縣", "臺中縣", "臺中市", "彰化縣", "雲林縣", "嘉義縣",
            "嘉義市", "臺南縣", "臺南市", "高雄市", "高雄縣", "屏東縣",
            "宜蘭縣", "花蓮縣", "臺東縣", "南投縣", "澎湖縣", "金門縣", "連江縣");
        cityFilterItem.setAddUnknownValues(false);

        cityFilterItem.addChangeHandler(new ChangeHandler() {
            public void onChange(ChangeEvent event) {
                String selectedItem = (String) event.getValue();
                filterForm.getField("county").setValueMap(cityCountyMap.get(selectedItem));
            }
        });

        SelectItem countyFilterItem = new SelectItem();
        countyFilterItem.setName("county");
        countyFilterItem.setTitle("County");
        countyFilterItem.setAddUnknownValues(false);

        filterForm.addItemChangedHandler(new ItemChangedHandler() {
            public void onItemChanged(ItemChangedEvent event) {

                if (saleTabSet.getSelectedTab().getTitle().startsWith("ListGrid")) {
                    listGrid.fetchData(filterForm.getValuesAsCriteria());
                } else if (saleTabSet.getSelectedTab().getTitle().startsWith("TileGrid")) {
                    tileGrid.fetchData(filterForm.getValuesAsCriteria());
                }
            }
        });

        filterForm.setFields(cityFilterItem, countyFilterItem);

        filterSection.addItem(filterForm);
        filterSection.setCanCollapse(true);
        filterSection.setExpanded(true);

        filterStack.expandSection("filterSection");

        tileGridTab.setPane(tileGrid);
        listGridTab.setPane(listGrid);

        mainLayout.addMember(leftLayout);
        mainLayout.addMember(rightLayout);
        mainLayout.draw();
    }
}

You can see the result at http://www.141home.com/G141Home.html
There are some Chinese char. there ...

If you check my code,
Both ListGrid and TileGrid are almost identical. They both reference to
a RestDataSource, "houseDS" which talk to the same PHP.
The ListGrid works OK, but TileGrid doesn't do the paging correctly.

To see the problem, visit http://www.141home.com/G141Home.html
and first choose "TileGrid" tab and
choose a "City" ( the city value is Chinese char.) ... just choose one.
There are 36000 test records in MySQL. When you choose a
"City", it should be only one Ajax request been issued ...it works
for "ListGrid", but not "TileGrid".

The TileGrid.fetchData() will continue issue Ajax request until
the $_GET['totalRows'] records had been fetcted.

Any suggestion ? Thanks a lot.

Regards
KC

[kccheng]

BTW,
I forgot to mention ... TileGrid paging works OK if I only use scrollbar to
trigger TileGrid.fetchData() automatically.
In my case, the problem happen when I use
TileGrid.fetchData(filterForm.getValuesAsCriteria()).

My criteria is "city = ChineseCharInUTF8" ... will Chinese char
cause problem ?

Happy Chinese New Year
KC

[aloysius_tan]

I face the same problem too. Have you managed to fix this problem (where all records of the TileGrid when a filter is done)?

[kccheng]

I face the same problem too. Have you managed to fix this problem (where all records of the TileGrid when a filter is done)?

No. I use other approach instead of TileGrid. But I did not upgrade
my SmartGWT for a while ... maybe the issue had been fixed in new release, I do
not check that by myself yet.


KC