cloudflarearchive / backgrid-filter Goto Github PK

Tested using the server-side demo with Chrome and FF for linux.

After filtering the Github users, clicking the 'x' clears the box but doesn't trigger a grid update. I'm not able to trigger any custom event in my own code either.

If I search for an email address, it seems the @ breaks the email address into two separate terms for filtering. This causes the view to show results with only the second half of the email address or only the first. Is there a fix or workaround for this? Even if I could simply "and" all the terms in the filter and only show items which have all terms, that could work for my purposes.

Thank you.

I would like to add two checkboxes with Search text boxes as a filter through Backgrid. is there any option is exist or any API is exist or we have append through jQuery after search filter textbox ?

or How to extend the Backgrid.Extension.ServerSideFilter?

It doesn't seem like filter respects my custom query params in collection. On sort they get included, but on filter they aren't included.

Using classes like "close" and "clear" to bind functionality with Backgrid filter and paginator causes problems. class="clear" is a common clearfix style and Filter now uses that to bind the [x] to clear out the search field. I can get around the issue with custom css, but you may want to consider solving the root problem.

The Backgrid plugins should probably use something that is more namespace sensitive to bind behavior instead of using css classes. Maybe something like data-backgrid-action="clear".

I've a scenario where I'm looking to have a ClientSideFilter to work on different backgrid tables which are backed by two different PageableCollections. Is there any good way to accomplish this other hacking the original semantics of the filter itself?

Is it possible to remove the hard dependency to Lunr?

For example i only use server-side filtering and loading Lunr is therefore not necessary.

For now i just use this:

<script type="text/javascript">
  window.lunr = {};
</script>

and removed Lunr.js which is kind of hacky..

Error line is here
var paginator = new Backgrid.Extension.Paginator({

   <script>

$(function() {

    var Territory = Backbone.Model.extend({
        initialize: function () {
            Backbone.Model.prototype.initialize.apply(this, arguments);
            this.on("change", function (model, options) {
                console.log("Saving change " + JSON.stringify(options) );
              if (options && options.save === false) return;
              model.save();
            });
          }
        });

    var Territories = Backbone.PageableCollection.extend({
      model: Territory,
      url: "/backgridjs/examples/pageable-territories.json",
      mode: "infinite"    
    });

    var territories = new Territories();

    var columns = [{
        name: "id", // The key of the model attribute
        label: "ID", // The name to display in the header
        editable: false, // By default every cell in a column is editable, but *ID* shouldn&apos;t be
        // Defines a cell type, and ID is displayed as an integer without the &apos;,&apos; separating 1000s.
        cell: Backgrid.IntegerCell.extend({
          orderSeparator: ''
        })
      }, {
        name: "name",
        label: "Name",
        editable: false,
        // The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
        cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
      }, {
        name: "pop",
        label: "Population",
        editable: false,
        cell: "integer" // An integer cell is a number cell that displays humanized integers
      }, {
        name: "percentage",
        label: "% of World Population",
        cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
      }, {
        name: "date",
        label: "Date",
        editable: false,
        cell: "date",
      }, {
        name: "url",
        label: "URL",
        editable: false,
        cell: "uri" // Renders the value in an HTML &lt;a&gt; element
      }];

      // Initialize a new Grid instance
      var grid = new Backgrid.Grid({
        columns: columns,
        collection: territories
      });

      // Render the grid and attach the root to your HTML document
      var $datagrid = $("#datagrid");  
      $datagrid.append(grid.render().$el);

      var paginator = new Backgrid.Extension.Paginator({
          collection: territories
        });

      // Render the paginator
      $datagrid.append(paginator.render().$el);

      // Initialize a server side filter  
       var serverSideFilter = new Backgrid.Extension.ServerSideFilter({
         collection: territories,
         name: "searchParam", // the name of the URL query parameter
         placeholder: "Search Name" // HTML5 placeholder for the search box
      });

      // Render the filter
       $datagrid.append(serverSideFilter.render().el);

      // Add some space to the filter and move it to the right
      //serverSideFilter.$el.css({float: "right", margin: "20px"});

      // Fetch some data
      territories.fetch({reset: true});


    });
</script>

Hello,

I created a grid with a footer and a header recently and i want to display a message between where is no result. I want to avoid this display.

Is there a way to do it with backgrid-filter? Is it a feature that could be developed on this program?

Thanks

All hell broke loose on Firefox.

The default style needs to go away on MobileSafari.

"name": "backgrid-filter",
"version": "0.3.7",

Please add AMD support for the backgrid filter.

Perform the initial migration.

Test out the various grunt tasks.

am using backgrid + backgrid filter (ServerSideFilter) . I would like to reset my collection state eg current page before i query the server on the filter. I would like to get the first page of my collection each time i do change my filter.

and when going throw the pages mentain my filter

Bootstrap 3 RC1 is out, so I've been trying to update my BS2 app. There are a lot of breaking changes between bs2 and bs3, and the backgrid-filter search box no longer renders correctly:

Changing the template line to this fixed it for me (though this would break it for Bootstrap 2, and I assume both need to be accommodated somehow):

    template: _.template('<div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span><input class="form-control" type="text" <% if (placeholder) { %> placeholder="<%- placeholder %>" <% } %> name="<%- name %>" /><span class="input-group-addon"><a class="close" href="#">&times;</a></span></div>'),

I have a backgrid table that, by default, displays the results of a search. I would like any new searches to append onto this search. Also, when I clear a search, I'd like it to clear back to this default search.

For example, my table shows all users that have a status of "active". If someone searches for "Sammy Davis", I want the search request to include the condition that the user's status is "active": q=active Sammy Davis

I was thinking it would be useful to add a "baseParams" argument to the instantiation of a filter.

Can you mark a semantic version for this? Even 0.0.1 would help.

Thanks!

Could you update the bower.json dependency "backgrid" to version "0.3.8" or newer, please?

Should have the ability to reload after text entered or deleted when key hasn't been pressed for x seconds.

Hi from France,

I'm working on ServerSideFilter and I would like to override the search function. I tried to do this with the following lines :

            tagName: "form",
            collection: mycollection,
            className: "backgrid-filter form-search",
            search: function (e) {
                if (e) e.preventDefault();

                var data = {};
                var query = this.query();
                if (query) data[this.name] = query;

                if( data["search"].length > 2 ) {
                    console.log("Good");
                }
                else
                {
                    console.log("Bad");
                }

                var collection = this.collection;

                // go back to the first page on search
                if (Backbone.PageableCollection &&
                    collection instanceof Backbone.PageableCollection) {
                    collection.getFirstPage({data: data, reset: true, fetch: true});
                }
                else collection.fetch({data: data, reset: true});

            },
            events: {
                "keyup input[type=search]": "showClearButtonMaybe",
                "click a[data-backgrid-action=clear]": "clear",
                "submit": "search",
                "click #backgrid_submit_button": "search"
            },
            name: "search",
            value: null,
            placeholder: "Recherche"

        });

I need to customize it to validate data (at least 3 letters). I used a HTML pattern but it doesn't work on Safari. When I try this code, It doesn't work neither. I don't pass through this custom search function. Do you know what could be the solution please ?

Thanks !

@wyuenho I was thinking about the discussion we had about resetting the shadowCollection when the collection sorts. Looking at v0.2.6, the following bit of code from master was missing in ClientSideFilter::initialize: collection = this.collection.fullCollection || this.collection

It seems like the shadowCollection is necessary only if the specified collection is not a PageableCollection because shadowCollection's purpose is to have a reference back to the full set of rows; for a PageableCollection, fullCollection already fullfills that purpose. Would it be sufficient to do:

// In ClientSideFilter::initialize()

if (this.collection instanceof PageableCollection) {
  collection = shadowCollection = this.collection.fullCollection; 
} else {
  collection = this.collection;
  shadowCollection = collection.clone();
  collection.on('sort', ...)
  collection.on('reset', ...)
  .. other listeners that reset shadowCollection ...
}

Hi,

I think I found a bug when I'm using the ClientSideFilter and backgrid-paginator.

If you go to http://backgridjs.com/ , to the example of paginator and filter enabled. Type some text that gets more than one page, like "ar". Then go to second page. In this point, the filter "shadowCollection" got changed by the paginator. So now you can't reset to original result, neither clear the string and get original list.

I made a small patch in a fork and in my tests it's working ok. If you confirm this bug I can send a pull request.

BTW, thanks for your backgrid project work, it's pretty amazing and well structured!

I'd be in favor of an inheritance structure like AbstractFilter <- [ServerSideFilter, ClientSideFilter <- LunrFilter]

It is strange for ClientSideFilter to extend ServerSideFilter.
I'd be happy to work on this change, but I'd like to brainstorm with you first.

clearing filter after sorting causes collection fetch issue.

to reproduce:
enter filter query
sort any column
clear filter

collection is not reset to original state, but remains filtered.

It would be highly appreciated if you would make the shadowCollection available outside the filter especially because the .clone() functionality only returns the filtered result.

var shadowCollection = this.shadowCollection = this.collection.shadowCollection = collection.clone();

Custom template ignored when passed in constructor. Maybe I missed something, but there should be a line this.template = options.template || this.template; in in initialize function.

My model's attributes are like so:

{
  name: 'Thing 1',
  component: Component
}

I'm using Backbone-relational. I want to be able to filter by my model's name as well as it's Component name.

Is this possible?