Jsgrid: Filtering not working

[Junglefish]

Hi

I have a very simple grid that works fine. However, If I add the filtering: true directive, although I see the mini-form appear at the top of the grid, it doesn't actually do anything. Am I missing something? Code below:

        $(function() {

            $("##jsGrid").jsGrid({
                height: "auto",
                width: "100%",
                autoload: true,
                sorting: true,
                paging: true,
                pageSize: 10,
                pageButtonCount: 5,
                editing: false,
                filtering: true, // doesn't seem to work...

                controller: {
                    loadData: function() {
                        var d = $.Deferred();

                        $.ajax({
                            url: "#event.buildLink("Persons.personsAsJson")#",
                            dataType: "json"
                        }).done(function(response) {
                            //d.resolve(response.value);
                            d.resolve(response);
                        });

                        return d.promise();
                    }
                },

                fields: [
                      { name: "PERS_FIRSTNAME", title: "Firstname", type: "text"}
                    , { name: "PERS_LASTNAME", title: "Lastname", type: "text"}                         
                    , {     
                        headerTemplate: function() {
                            return $("<button>").attr("type", "button").text("Add").on("click", function () {
                                window.location = '#event.buildLink(linkTo="Persons.addPerson")#';
                            });
                        }   
                        , itemTemplate: function(value, item) {
                            return '<input type="button" value="Edit" name="edit" onClick="javascript:window.location=\'#event.buildLink(linkTo="Persons.editPerson", queryString="pers_ky=' + item.PERS_KY + '")#\';" /> <input type="button" value="Delete" name="delete" onClick="javascript:if(confirm(\'Are you sure you want to delete this record?\')){window.location=\'#event.buildLink(linkTo="Persons.deletePerson", queryString="pers_ky=' + item.PERS_KY + '")#\'};" />';
                        }    
                    }
                 ]
            });             
        });

[Venkatramanaryams]

TRY LIKE THIS I THINK ITS WORKS
you shoud map your column name with your filtering see that once

    $(function() {
            $.ajax({  type: "GET",-----THIS IS ACCORDING TO YOUR BACK END METHOD
                     url:"#event.buildLink("Persons.personsAsJson")#",
                     }).done(function(data) {
                  $("#jsGrid").jsGrid({
                        height : "auto",
                        width : "100%",
                   inserting:true,
                    editing: true,
                    filtering: true,
                    sorting : true,
                    paging : true,
                   autoload : true,
                     pageSize : 10,
    fields : [ {
        name : "Firstname",
        type : "text",
        width : 150
    },{
        name : "Lastname",
        type : "text",
        width : 150
    }, { type:"control" } ],
                   controller: {
                       loadData:  function(filter) {
                          return $.grep(data, function(item) {
                                     // client-side filtering below (be sure conditions are correct)
                             return(!filter.Firstname|| item.Firstname.indexOf(filter.Firstname) > -1) 
                             && (!filter.Lastname|| item.Lastname.indexOf(filter.Lastname) > -1) 
                  });
                  },
               }
              });
           });
        });

[tabalinas]

Please see the following issue: https://github.com/tabalinas/jsgrid/issues/258