Backgrid-advanced-filter NPM

Backgrid advanced filter

An advanced filter plugin for Backgrid. Online demo

Example usage

Initialization

    // Create advanced filter instance
    var advancedFilter = new Backgrid.Extension.AdvancedFilter.Main({
      collection: dataCollection,
      /*
        Filterable columns need an additional attribute 'filterType'.
        e.g.: filterType: 'string';  (Supported: string, number, boolean, percent)
      */
      columns: columnCollection,
      /* optional */
      filters: filterCollection
    });

    // Render the filter
    $(document.body).append(advancedFilter.render().$el);

    // Available events
    advancedFilter.on("filter:new", function(filterId, filterModel) {
        console.log("New filer created.");
    });
        
    advancedFilter.on("filter:save", function(filterId, filterModel) {
        console.log("Currently active filter saved.");
    });
    
    advancedFilter.on("filter:apply", function(filterId, filterModel) {
        console.log("Filter apply requested");
    });

    advancedFilter.on("filter:cancel", function(filterId, filterModel, stateBeforeCancel) {
        console.log("Changes made to current filter reverted.");
    });

    advancedFilter.on("filter:reset", function(filterId, filterModel) {
        console.log("Current active filter reset");
    });

    advancedFilter.on("filter:remove", function() {
        console.log("Currently active filter removed.");
    });

Filtering

    advancedFilter.on("filter:apply", function(filterId, filterModel) {
        // Get filter definition (default is mongo style)
        var definition = filterModel.exportFilter("mongo");
        
        // Or get it as string
        var definitionString = filterModel.exportFilter("mongo", true);
        
        // Request new data using filter
        dataSource(filter).success(function(filteredData) {
            dataCollection.reset(filteredData);
        });        
    });