filtering vs loadData

[nono1974]

Hi,

I am dynamically rendering the grid with an ajax call that is working fine.
I am nevertheless getting challenge to make the filter working.

var urlField = function(config) {
			jsGrid.Field.call(this, config);
		};
		
        urlField.prototype = new jsGrid.Field({

			css: "url-field",            // redefine general property 'css'
			align: "center",              // redefine general property 'align'

			myCustomProperty: "foo",      // custom property

			sorter: function(url1, url2) {
				return url1 - url2;
			},

			itemTemplate: function(value) {
				return "<a href='/abonnes/"+value+"' class='uk-icon-download uk-icon-button'></a>";
			}

		});
		
		jsGrid.fields.url = urlField;
        		
        $("#jsGrid").jsGrid({
            height: "auto",
            width: "100%",
            
			filtering:true,
            sorting: true,
		    paging: true,
            autoload: true,
			inserting: false,
			editing: false,
			
            pageSize: 15,
            pageButtonCount: 5,
     
            controller: {
			   loadData: function() {
			        var d = $.Deferred();
				    $.ajax({
						type: "GET",
						url: "/index.php?option=com_directory&view=fichiers&type="+type+"&format=raw",
						dataType: "json",
						success:function(response){ 
					       d.resolve(response); 
						}
                	});
					return d.promise();
				}
			},
     
            fields: [
                { name: "Id", title:"#", type: "number", width: 20, filtering: true },
                { name: "Titre", title:"Titre", type: "text", width: 250, filtering: true },
				{ name: "Action", title:"", type: "url", width:40}
            ]
        });

when I enter some letters I need to press enter but the enter pressing call again the loadData.
could you help me please ?

[AlexPerotti]

I suppose it's the correct behaviour:

when you load your data from a remote source, it's supposed to be paginated and filtered server side.

Have a look in the documentation for the loadData parameters
http://js-grid.com/docs/#loaddatafilter-promisedataresult

the filter object contains all the information you need to pass server side to filter your data

[nono1974]

It is not really what i want to do. I understand more how it works. loadData provides a data set. Enter press key resubmit the loadData. It could be usefull to put a prevent submit jquery command.
I would like to apply the filter on the fly on the local data set when we press any key on the filter input fields. I don 't need to reload from server the data.
I don't understand why the filter is not applyed automatically as the demo does.

[AlexPerotti]

Because the demo works on local data.

I think you could do something defining your own load strategy http://js-grid.com/docs/#load-strategies

but I'm not really sure about it.

In my opinion, it doesn't make sense to get the data by ajax and then pretend to sort and filter locally.

If you need just one call to get the data, you don't need ajax at all. You can simply put your data in the page.

[nono1974]

Well i succeed to make it works. I was using slickgrid up to now and i feel something is missing here.
The view and the data are the same that is why we need to reload data when we are depending from ajax call. Filter is erasing the local dataset (grid.data)
I would claim to add to jsgrid one attribute for data and one attribute for view wich is the visible dataset it will ease the filter local datamanagement and avoiding server roundtrips.
In the meantime, we need to press enter to do a search. I have coded a capacity to search each time a char is entered in the filter field. It could be nice to give a name or an id to input fields in the header in order to apply event.

[tabalinas]

@nono1974, the actual filtering should be implemented by your code. In the demos it's implemented in db.js.
The filter is coming in loadData as the first parameter. So you have to apply it on your dataset.
If you don't want to reload data from the server you could do it in loadData caching the result.
In my example I use self-evaluating function, but you can cache data anywhere:

function applyFilter(data, filter) {
    return $.grep(data, function(item) {
          // return true/false depending on filter condition
          return (!filter.Name || item.Name.indexOf(filter.Name) > -1) 
    });
};

// grid config
controller: {
loadData: (function() {
    var data;
    return function(filter) {
        if(data)
           return applyFilter(data, filter);

        return $.ajax({ /* request params */ }).then(function(result) {
            data = result;
            return applyFilter(data, filter);
        });
    };
}())
},

Please, checkout the following issue #32

[nono1974]

Hi

It is exactly what i did thank you.

regards

Arnaud