How would I refresh a Backgrid table with new data?

Question

I have a Backgrid view on my page with a collection of data. Above the Backgrid view is another view called "filters" that allows the user to change the date range for the data so they can see results between two dates.

I'm not sure what the cleanest way is to refresh the contents of the Backgrid view. Here is my code as it stands:

// Fetch data
var fetchingOrders = CRM.request("orders:entities");

// Create layout
var ordersLayout = new List.OrdersLayout();

$.when(fetchingOrders).done(function (orders) {

    var ClickableRow = Backgrid.Row.extend({
        events: {
            "click" : "rowClicked"
        },
        rowClicked: function () {
            CRM.trigger("order:show", this.model.get("RecordID"));
        }
    });
    var customersListView = new Backgrid.Grid({
        row: ClickableRow,
        columns: CRM.settings.columns.orders,
        collection: orders,
        className: "simple-table backgrid"
    });

    var filters = new List.Filters({});
    filters.on("orders:filter", function (startdate, enddate) {

    });


    ordersLayout.on("show", function () {
        ordersLayout.filters.show(filters);
        ordersLayout.backgrid.show(customersListView);
    });

    CRM.mainRegion.show(ordersLayout);
});

The CRM.request("orders:entities") line uses this function:

getOrders: function (startdate, enddate) {
    var orders = new Entities.Orders();

    var defer = $.Deferred();
    orders.fetch({
        data: {
            action: "search",
            dateRangeColumn: "RecordDate",
            startDate: startdate || "2013-11-06",
            endDate: enddate || "2013-11-06",
            // startDate: startdate || Utilities.currentDate,
            // endDate: enddate || Utilities.currentDate
        },
        success: function (data) {
            defer.resolve(data);
        },
        error: function (collection, response, options) {
            console.log(response);
            console.log("Error loading Orders…");
        }
    });
    return defer.promise();
},

You may have noticed the filters.on("orders:filter", function (startdate, enddate) { block. I trigger this any time the user changes the start or end date on in the filters view, but I'm unsure of what to do from here because I'll essentially need to re-run all of the above code as setup.

Suggestions? Thanks!

Answer 1

I'd suggest you separate the setup and data fetching parts. Something like:

var ordersLayout = new List.OrdersLayout();

var ClickableRow = Backgrid.Row.extend({
    events: {
        "click" : "rowClicked"
    },
    rowClicked: function () {
        CRM.trigger("order:show", this.model.get("RecordID"));
    }
});
var customersListView = new Backgrid.Grid({
    row: ClickableRow,
    columns: CRM.settings.columns.orders,
    // don't set the collection here (see below)
    // collection: orders,
    className: "simple-table backgrid"
});

var updateData = function(startDate, endDate){

    var fetchingOrders = CRM.request("orders:entities");
    $.when(fetchingOrders).done(function (orders) {
      // update collection reference
      customersListView.collection = orders;
      // rerender the view
      customersListView.render();
    });
};

var filters = new List.Filters({});
filters.on("orders:filter", function (startdate, enddate) {
     // call the function updating the data each time the filter criteria change
     updateData(startdate, enddate);
});

// initially call the data update method once with the default params to display
// the initial data set
updateData("2013-04-28", "2013-09-29");


ordersLayout.on("show", function () {
    ordersLayout.filters.show(filters);
    ordersLayout.backgrid.show(customersListView);
});

I hope this at least gets you going in the right direction!