Search code examples
javascriptfuelux

How do I refresh data in the Fuel UX Data Grid?


I am using this example to import data into a Fuel UX Data Grid: http://dailyjs.com/2012/10/29/fuel-ux/ (obviously using my own API instead of Flickr)

I see in the example code the data is refreshed on search:

data: function (options, callback) {

    var url = 'http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=d6d798f51bbd5ec0a1f9e9f1e62c43ab&format=json';
    var self = this;

    if (options.search) {

        // Search active.  Add URL parameters for Flickr API.
        url += '&tags=' + options.search;
        url += '&per_page=' + options.pageSize;
        url += '&page=' + (options.pageIndex + 1);

        $.ajax(url, {

            // Set JSONP options for Flickr API
            dataType: 'jsonp',
            jsonpCallback: 'jsonFlickrApi',
            jsonp: false,
            type: 'GET'

        }).done(function (response) {

            // Prepare data to return to Datagrid
            var data = response.photos.photo;
            var count = response.photos.total;
            var startIndex = (response.photos.page - 1) * response.photos.perpage;
            var endIndex = startIndex + response.photos.perpage;
            var end = (endIndex > count) ? count : endIndex;
            var pages = response.photos.pages;
            var page = response.photos.page;
            var start = startIndex + 1;

            // Allow client code to format the data
            if (self._formatter) self._formatter(data);

            // Return data to Datagrid
            callback({ data: data, start: start, end: end, count: count, pages: pages, page: page });

        });

    } else {

        // No search. Return zero results to Datagrid
        callback({ data: [], start: 0, end: 0, count: 0, pages: 0, page: 0 });

    }

However, I would like to use a refresh button of sorts to reload the data. How would I pass in a request like that?


Solution

  • You can cause the datagrid to reload its data (contacting your datasource to do so) at any time as follows:

    $('#MyGrid').datagrid('reload');