Refresh ListGrid Periodically (SmartClient)

Description

ListGrid displays a list of objects in a grid, where each row represents one object and each cell in the row represents one property.

Periodical updating ListGrid is possible in the following ways:

  • Using the invalidateCache method. This approach updates the data and will show a loading message. However, this API will disrupt the existing view.
  • Transparent update by DataSource using the fetchData method. This method updates the data but doesn't show a loading message and won't disrupt the existing view.

A working example is available in the attachment.

Transparent update

For transparent loading of the data the fetchData method should be used.

Update by DataSource
var onRefresh = function() {

    var dataSource = supplyItemListGrid.getDataSource();
    var visibleRows = supplyItemListGrid.getVisibleRows();

    // request one page's worth of data on either side of the current viewport
    var startRow = visibleRows[0] - supplyItemListGrid.data.resultSize,
    	endRow = visibleRows[1] + supplyItemListGrid.data.resultSize;

    if (startRow < 0) {
		startRow = 0;
	}

    var request = {
        startRow: startRow,
        endRow: endRow,
        sortBy: supplyItemListGrid.getSort(),
        showPrompt: false
    };

    var callback = function(dsResponse,data,dsRequest) {

        var result = dsResponse.data,
    	initialData = [];

    	// correctly position the result in the resultset's cache 
        initialData.length = dsResponse.totalRows;

        copyArray(result, initialData, dsResponse.startRow);

        var resultSet = isc.ResultSet.create({
            dataSource: supplyItemListGrid.getDataSource(),
            initialLength: dsResponse.totalRows,
            initialData: initialData, 
            sortSpecifiers: supplyItemListGrid.getSort(),
            criteria: supplyItemListGrid.getCriteria()
        });

        supplyItemListGrid.setData(resultSet);
    };

    dataSource.fetchData(supplyItemListGrid.getCriteria(), callback, request);
}

// copy all elements from the src array to the dest array, beginning at startPos
function copyArray(src, dest, startPos) {
	start = start || 0;
	for (var i=0; i < src.length; i++) {
		dest.set(start + i, src.get(i));
	}
}

Attachments

  File Modified

ZIP Archive RefreshGridPeriodically.zip

Jun 11, 2014 by Bill Bruyn