Jsgrid: Basic filters are not working
Hi,
I have tried to use filters in js.grid, but seems its not working.
For filters, I have done 2 things filterable:true,
and controller:data,.
By setting above two properties I was able to get the filters in the Grid but when trying to filter data,
didn't got any success.
Please help.
dhawkKD
All 16 comments
Hello,
Filtering is done entirely on the server. So when you pass along your filter to your back-end code, you will have to filter your results and then return them. JsGrid will not do any filtering for you.
Im not sure what server side implementation you are using, but this page has a few examples of using jsGrid with them.
soul3lade
on 10 Feb 2016
Yes, actual data filtering should be done by developer on client side, server side or both.
Another issue could be that there is no option filterable:true, the grid has an option filtering http://js-grid.com/docs/#filtering-default-false.
tabalinas
on 11 Feb 2016
Actually I don’t want to do it on server side, and from the demo’s I thought its an inbuilt feature of Js grid. How can I achieve this on client side. Do you have any example of that.
Regards,
Kapil Dhawan
From: Artem Tabalin [mailto:[email protected]]
Sent: Thursday, February 11, 2016 6:05 AM
To: tabalinas/jsgrid
Cc: Dhawan, Kapil (Perkins Coie)
Subject: Re: [jsgrid] Basic filters are not working (#200)
Yes, actual data filtering should be done by developer on client side, server side or both.
Another issue could be that there is no option filterable:true, the grid has an option filtering http://js-grid.com/docs/#filtering-default-falsehttps://urldefense.proofpoint.com/v2/url?u=http-3A__js-2Dgrid.com_docs_-23filtering-2Ddefault-2Dfalse&d=CwMCaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=pPUw6eLCERzGUv17E9LYLBTzgZFhcDsx5mh-KhtcoD4&m=Iz5MxhiqU6O2AuEOz99Gw7alruDrioM-PVbCauTGUzA&s=JdoVg1l01vEzwtvYJYeHw2_k6swLcXDNXthkNa0FQkc&e=.
—
Reply to this email directly or view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_tabalinas_jsgrid_issues_200-23issuecomment-2D182657082&d=CwMCaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=pPUw6eLCERzGUv17E9LYLBTzgZFhcDsx5mh-KhtcoD4&m=Iz5MxhiqU6O2AuEOz99Gw7alruDrioM-PVbCauTGUzA&s=qEDZuWIxZlpZkW_E-uvnWVz0pYL-H1lY_GFbmkCbk4M&e=.
NOTICE: This communication may contain privileged or other confidential information. If you have received it in error, please advise the sender by reply email and immediately delete the message and any attachments without copying or disclosing the contents. Thank you.
dhawkKD
on 11 Feb 2016
I also faced clientside filtering issue today, I got this solved by modifying code in below way. here gridData is passed from server for firsttime load in grid.
.jsGrid({
height: "70%",
width: "100%",
filtering: true,
editing: false,
inserting: false,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 10,
fields: [
{ name: "Name", type: "text", width: 150 }
],
controller: {
data:gridData,
loadData: function (filter) {
return $.grep(this.data, function (item) {
return (!filter.Name || item.Name.indexOf(filter.Name) >= 0);
});
},
}
});
Praveen-Mudem
on 5 May 2016
Hi,
When I tried the solution provided by you, I found filter is undefined and getting error .
Regards,
Kapil
From: Praveen-Charminar [mailto:[email protected]]
Sent: Thursday, May 05, 2016 6:53 PM
To: tabalinas/jsgrid
Cc: Dhawan, Kapil (Perkins Coie); Author
Subject: Re: [tabalinas/jsgrid] Basic filters are not working (#200)
I also faced clientside filtering issue today, I got this solved by modifying code in below way. here gridData is passed from server for firsttime load in grid.
.jsGrid({
height: "70%",
width: "100%",
filtering: true,
editing: false,
inserting: false,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 10,
fields: [
{ name: "Name", type: "text", width: 150 }
],
controller: {
data:gridData,
loadData: function (filter) {
return $.grep(this.data, function (item) {
return (!filter.Name || item.Name.indexOf(filter.Name) >= 0);
});
},
}
});
—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_tabalinas_jsgrid_issues_200-23issuecomment-2D217153423&d=CwMCaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=pPUw6eLCERzGUv17E9LYLBTzgZFhcDsx5mh-KhtcoD4&m=cvPeMohu8mCR1KN1QKbSgDRphd90Zr5CtJUeOEzuy3s&s=Irg203mJdsid-ggTxzJmk0H-j6YaJZeqzKNgo9sVbSY&e=
NOTICE: This communication may contain privileged or other confidential information. If you have received it in error, please advise the sender by reply email and immediately delete the message and any attachments without copying or disclosing the contents. Thank you.
dhawkKD
on 17 May 2016
Hi,
We get filter is undefined if data is not applied in controller data. Please check your code and apply data only on the controller data not in grid data.
Regards,
Praveen M
kirankocherla
on 17 May 2016
Hi,
I have done exactly the same which is provided in the example, but still didn’t get any success. Can you share the basic code for this, that would be great help.
Regards,
Kapil Dhawan
From: Kiran Kumar Kocherla [mailto:[email protected]]
Sent: Tuesday, May 17, 2016 3:42 PM
To: tabalinas/jsgrid
Cc: Dhawan, Kapil (Perkins Coie); Author
Subject: Re: [tabalinas/jsgrid] Basic filters are not working (#200)
Hi,
We get filter is undefined if data is not applied in controller data. Please check your code and apply data only on the controller data not in grid data.
Regards,
Praveen M
—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_tabalinas_jsgrid_issues_200-23issuecomment-2D219675595&d=CwMCaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=pPUw6eLCERzGUv17E9LYLBTzgZFhcDsx5mh-KhtcoD4&m=N8ZUtj0Lq6YNe9E_PWr7EYdWyS9xUhr1oR0c5v6pE5s&s=MgZTazBFjRnXewM1-zyWSw8nEPZCxd2kPpiQeHc0KlA&e=
NOTICE: This communication may contain privileged or other confidential information. If you have received it in error, please advise the sender by reply email and immediately delete the message and any attachments without copying or disclosing the contents. Thank you.
dhawkKD
on 17 May 2016
Thanks for the reply I am able to filter for a field. Just need to know how can I filter data on multiple fields together.
From: Praveen-Charminar [mailto:[email protected]]
Sent: Thursday, May 05, 2016 6:53 PM
To: tabalinas/jsgrid
Cc: Dhawan, Kapil (Perkins Coie); Author
Subject: Re: [tabalinas/jsgrid] Basic filters are not working (#200)
I also faced clientside filtering issue today, I got this solved by modifying code in below way. here gridData is passed from server for firsttime load in grid.
.jsGrid({
height: "70%",
width: "100%",
filtering: true,
editing: false,
inserting: false,
sorting: true,
paging: true,
autoload: true,
pageSize: 15,
pageButtonCount: 10,
fields: [
{ name: "Name", type: "text", width: 150 }
],
controller: {
data:gridData,
loadData: function (filter) {
return $.grep(this.data, function (item) {
return (!filter.Name || item.Name.indexOf(filter.Name) >= 0);
});
},
}
});
—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_tabalinas_jsgrid_issues_200-23issuecomment-2D217153423&d=CwMCaQ&c=XRWvQHnpdBDRh-yzrHjqLpXuHNC_9nanQc6pPG_SpT0&r=pPUw6eLCERzGUv17E9LYLBTzgZFhcDsx5mh-KhtcoD4&m=cvPeMohu8mCR1KN1QKbSgDRphd90Zr5CtJUeOEzuy3s&s=Irg203mJdsid-ggTxzJmk0H-j6YaJZeqzKNgo9sVbSY&e=
NOTICE: This communication may contain privileged or other confidential information. If you have received it in error, please advise the sender by reply email and immediately delete the message and any attachments without copying or disclosing the contents. Thank you.
dhawkKD
on 18 May 2016
Can you please share the link of backend sample projects.
dhawkKD
on 18 May 2016
Checkout here http://js-grid.com/samples/
tabalinas
on 18 May 2016
@dhawkKD @Praveen-Mudem @tabalinas i am trying to filter.Grid is showing with the values but the filters are not working.. can any one tell the solutiion
$(function() {
$("#jsGrid").jsGrid({
height : "auto",
width : "100%",
filtering: true,
sorting : true,
paging : true,
autoload : true,
pageSize : 10,
fields : [ {
name : "patientId",
type : "text",
width : 150
}, {
name : "patientName",
type : "text",
width : 150
}, {
name : "genderId",
type : "number",
width : 150
}, {
name : "mobile",
type : "number",
width : 150
}, {
} ],
controller : {
loadData : function(filter) {
return $.ajax({
type: "GET",
url : "/Final/Reports",
data: "url"
return $.grep(this.data, function (item)-----> can you tell what is item.
{
return (!filter.patientId || item.patientId.indexOf(filter.Name) >= 0);
return (!filter.patientName || item.patientName.indexOf(filter.Name) >= 0);
return (!filter.genderId || item.genderId.indexOf(filter.Name) >= 0);
return (!filter.mobile || item.mobile.indexOf(filter.Name) >= 0);
});
}
},
});
});
.
saikiran214333
on 6 Apr 2017
I changed the controller to allow search in any field of the table without hardcoding all of the fields.
$("#jsgrid").jsGrid({
width: "100%",
height: "400px",
filtering: true,
sorting: true,
paging: true,
pageSize: 10,
data: job_offers,
fields: [
{ name: "Title", type: "text", width: 150 },
{ name: "District", type: "text", width: 100 },
{ name: "Creation Date", type: "text", width: 200 }
],
controller: {
data:job_offers,
loadData: function (filter) {
return $.grep(this.data, function (item) {
// Check if all the fields are empty
var all_empty = true;
for (var field in filter) {
if(filter[field]){
all_empty = false;
}
}
// If all the search fields are empty return all the rows
if(all_empty){
return true;
}
// If some search field has content check if it matches the table entries
for(var field in filter){
// Ignore the search in empty fields
if(!filter[field]){
continue;
}
if(item[field].indexOf(filter[field]) >= 0){
return true;
}
}
return false;
});
},
}
});
drmargarido
on 15 Sep 2018
And here a solution with multiple field searching
controller: {
data:job_offers,
loadData: function (filter) {
return $.grep(this.data, function (item) {
// Check if all the fields are empty
var all_empty = true;
for (var field in filter) {
if(filter[field]){
all_empty = false;
}
}
// If all the search fields are empty return all the rows
if(all_empty){
return true;
}
var fields_to_search = [];
// Add fields to search in order to allow multiple fields searching
for(var field in filter){
// Ignore the search in empty fields
if(!filter[field]){
continue;
}
fields_to_search.push(field);
}
var matched = true;
// Check if all the fields match
for(var i=0; i < fields_to_search.length; i++){
var field = fields_to_search[i];
if(!(item[field].indexOf(filter[field]) >= 0)){
matched = false;
break;
}
}
return matched;
});
},
}
Here's the solution used on http://js-grid.com/demos/ though you have to dig in the debug console to find it.
controller: {
data:clients,
loadData: function (filter) {
return $.grep(this.data, function (item) {
return (!filter.Name || item.Name.indexOf(filter.Name) > -1)
&& (!filter.Age || item.Age === filter.Age)
&& (!filter.Address || item.Address.indexOf(filter.Address) > -1)
&& (!filter.Country || item.Country === filter.Country)
&& (filter.Married === undefined || item.Married === filter.Married);
});
},
}
lovelivnlife
on 17 Dec 2019
Javascript solution is:
controller: {
data:data,
loadData: function (filter) {
return $.grep(this.data, function (item) {
let flag = true;
for (key in filter) {
if (key != undefined) {
flag = flag && (!filter[key] || item[key].indexOf(filter[key]) >= 0);
}
}
return flag;
});
},
},
latuzu
on 8 Jan 2020
My solution for django version based on demo code is:
loadData: function(filter) {
var d = $.Deferred();
$.ajax({
type: "GET",
url: "/clients/api",
data: filter
}).done(function(result) {
result = $.map(result, function(item) {
if (item.fields.name.indexOf(filter.name) > -1
&& item.fields.age.indexOf(filter.age) > -1
&& item.fields.address.indexOf(filter.address) > -1
){
x = $.extend(item.fields, { id: item.pk });
return x
}
});
d.resolve(result);
});
return d.promise();
},
yjcho2252
on 25 Jan 2021
Related issues
danielson317
·
3Comments
samuelrobertson
·
3Comments
andymacourek
·
3Comments
git265
·
5Comments
flyinmryan
·
3Comments
Most helpful comment
I also faced clientside filtering issue today, I got this solved by modifying code in below way. here gridData is passed from server for firsttime load in grid.