jQuery UI Widgets › Forums › Grid › Filter on string starting with "0"
Tagged: angular grid, filter, filterable, filtertype, grid, jquery grid, jqxgrid, number, string, zero
This topic contains 11 replies, has 2 voices, and was last updated by Naroth 9 years, 4 months ago.
-
Author
-
Hello,
I’m trying to filter a grid by certain values, but on two columns I got some issues.
var source= { datatype : 'json', datafiels : [ {name : 'cLoginName', type:'string'}, {name : 'compteCodePostal', type:'string'}, ], url: url, type : "POST" }
autowidth:true, autoHeight:true, filterable:true, showfilterrow : true, editable:true, // sortable:true, columnsresize: true, rowsHeight:40, source: dataAdapter, columns: [ { text: 'cLoginName', datafield: 'cLoginName', columntype: 'textbox', align: 'center', width: 80, editable:false, hidden:false, filtercondition: 'contains'}, { text: 'compteCodePostal', datafield: 'compteCodePostal', columntype: 'textbox', align: 'center', cellsalign:"center", width: 150, editable:true, filtercondition : 'contains' }, ], });
“compteCodePostal” columns contains digital strings (“42190” for example)
“cLoginName” contains digital strings, normal strings, and alphanumeric stringsProblems are :
– “compteCodePostal” : using Chrome i can’t apply any digital filter or character filter (error : Uncaught TypeError: Cannot read property ‘toString’ of null). It’s work with Firefox
– “cLoginName” : can apply digital or characters filter, but I found no line (it is supposed to find some lines) (Chrome & Firefox)
– both : if cells value start with “0”, this “0” is not include in filters (Chrome & Firefox)
How can I fixe theses issues ?
I’m using jqWidgets 3.8.0.
Thanks & Regards
Hi Naroth,
Please provide us with a complete example (JSFiddle/JS Editor), including some data, so that we can test your case. Share how to reproduce the issues step-by-step.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hello Dimitar,
Sorry for delay
I can’t replicate the issue, but I have new information.
var source= { datatype : 'json', datafiels : [ {name : 'cLoginName', type:'string'}, {name : 'compteCodePostal', type:'string'}, ], url: url, type : "POST" }
When I apply a filter (using showfilterrow input),
it apply “numericfilter” on “cLoginName” column, “compteCodePostal” column (Firefox)
and apply “numericfilter” on “cLoginName” column, “datefilter” on “compteCodePostal” column (chrome).I build another grid with same data (from Json string)
Chrome & Firfox apply “stringfilter” on both columns and obviously works wellGot it with getfilterinformation method
Hi Naroth,
Please try applying a particular filtertype to each of your columns. Here is more about this property:
filtertype – sets the filter’s type.
‘textbox’ – basic text field.
‘input’ – input field with dropdownlist for choosing the filter condition. *Only when “showfilterrow” is true.
‘checkedlist’ – dropdownlist with checkboxes that specify which records should be visible and hidden.
‘list’ – dropdownlist which specifies the visible records depending on the selection.
‘number’ – numeric input field. *Only when “showfilterrow” is true.
‘checkbox’ – filter for boolean data. *Only when “showfilterrow” is true.
‘date’ – filter for dates.
‘range’ – filter for date ranges. *Only when “showfilterrow” is true.
‘custom’ – allows you to create custom filter menu widgets. *Only when “showfilterrow” is false.$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: dataAdapter,
columnsresize: true,
showfilterrow: true,
filterable: true,selectionmode: ‘singlecell’,
columns: [
{ text: ‘Name’, columntype: ‘textbox’, datafield: ‘name’, width: 120 },
{ text: ‘Product’, filtertype: ‘checkedlist’, datafield: ‘productname’, width: 160 },
{ text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 67 },
{ text: ‘Ship Date’, datafield: ‘date’, filtertype: ‘date’, width: 180, cellsalign: ‘right’, cellsformat: ‘d’ },
{ text: ‘Qty.’, datafield: ‘quantity’, filtertype: ‘number’, width: 50, cellsalign: ‘right’ },
{ text: ‘Price’, datafield: ‘price’, filtertype: ‘number’, cellsalign: ‘right’, cellsformat: ‘c2’ }
]
});Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Thanks for reply,
I tried each filtertype property, but getfilterinformation always return “numericfilter” as filtertype. (Chrome apply “datefilter” on “compteCodePostal”).Filter Column: cLoginName
Filter:
Value: c
Condition: LESS_THAN
Operator: 0
Type: numericfilterI got more than two columns in my grid, on others columns “stringfilter” are apply.
function jqx_grid_bo_accounts_list_init() { var source= { datatype : 'json', datafiels : [ {name : 'cLoginName', type:'String'}, {name : 'cbackupServerName', type:'String'}, {name : 'cAlias', type:'String'}, {name : 'cTypeCompte', type:'String'}, {name : 'compteNom', type:'String'}, {name : 'comptePrenom', type:'String'}, {name : 'compteNomPharmacie', type:'String'}, {name : 'compteRue', type:'String'}, {name : 'compteCodePostal', type:'String'}, {name : 'compteVille', type:'String'}, {name : 'compteNumTel', type:'String'}, {name : 'compteMail', type:'String'}, {name : 'compteMailPartenaire', type:'String'}, {name : 'sendMailAuto', type:'String'}, {name : 'periodReport', type:'String'}, {name : 'accountStatus', type:'String'}, // {name : 'weeklyReport', type:'String'}, ], url: url, type:'POST', async: false, updaterow: function (rowid, rowdata, commit) { var data = "update=true&" + $.param(rowdata); console.log(data); $.ajax({ dataType: 'json', type:'POST', url: url, cache: false, data: data, success: function (data, status, xhr) { // update command is executed. commit(true); }, error: function(jqXHR, textStatus, errorThrown) { commit(false); } }); } }; var dataAdapter = new $.jqx.dataAdapter(source); var initeditorPeriodReport = function(row, cellvalue, editor){ editor.jqxDropDownList({ source: ["Quotidien","Hebdomadaire","Aucun"], placeHolder:"Selectionnez la periodicité du rapport",displayMember: "Description", valueMember: "Title"}); if(cellvalue == 'Quotidien'){ editor.jqxDropDownList('selectIndex', 0 ); } else if(cellvalue == 'Hebdomadaire'){ editor.jqxDropDownList('selectIndex', 1 ); } else{ // Si il n'est ni Quotidien, ni Hebdomadaire laisser le place holder } editor.on('change', function (event){ var rowIDs = $('#jqx_grid_bo_accounts_list').jqxGrid('getselectedrowindex'); // console.log("rowIDs"); // console.log(rowIDs); // $('#jqx_grid_bo_accounts_list').jqxGrid('updaterow', rowIDs, newRows); }); } var initeditorSendMailAutoReport = function(row, cellvalue, editor){ editor.jqxDropDownList({ source: ["Non","Oui"], placeHolder:"Envoyer les rapports automatiquement",displayMember: "Description", valueMember: "Title"}); if(cellvalue == 'Non'){ editor.jqxDropDownList('selectIndex', 0 ); } else if(cellvalue == 'Oui'){ editor.jqxDropDownList('selectIndex', 1 ); } else{ // Si il n'est ni Quotidien, ni Hebdomadaire laisser le place holder } editor.on('change', function (event){ var rowIDs = $('#jqx_grid_bo_accounts_list').jqxGrid('getselectedrowindex'); // console.log("rowIDs"); // console.log(rowIDs); // $('#jqx_grid_bo_accounts_list').jqxGrid('updaterow', rowIDs, newRows); }); } var cellsrendererPeriodReport = function (row, column, value) { var PeriodReport = $('#jqx_grid_bo_accounts_list').jqxGrid('getrowdata', row).periodReport; if(PeriodReport == 'Quotidien'){ var etat = "<div style='line-height:40px; text-align:center;'>Quotidien</div>"; } else if(PeriodReport == 'Hebdomadaire'){ var etat = "<div style='line-height:40px; text-align:center;'>Hebdomadaire</div>"; }else{ // Si il n'est ni Quotidien, ni Hebdomadaire on laisse le champ vide var etat = ""; } return etat; } var cellsrendererSendMailAutoReport = function (row, column, value) { var sendMailAuto = $('#jqx_grid_bo_accounts_list').jqxGrid('getrowdata', row).sendMailAuto; if(sendMailAuto == 'Non'){ var etat = "<div style='line-height:40px; text-align:center;'>Non</div>"; } else if(sendMailAuto == 'Oui'){ var etat = "<div style='line-height:40px; text-align:center;'>Oui</div>"; }else{ // Si il n'est ni Quotidien, ni Hebdomadaire on laisse le champ vide var etat = ""; } return etat; } var initEditorStatus = function(row, cellvalue, editor){ editor.jqxDropDownList({ source: ["ACTIVE","HIDDEN","SUSPENDED","CLOSED"], placeHolder:"Statut du compte",displayMember: "Description", valueMember: "ACTIVE"}); if(cellvalue == 'ACTIVE'){ editor.jqxDropDownList('selectIndex', 0 ); } else if(cellvalue == 'HIDDEN'){ editor.jqxDropDownList('selectIndex', 1 ); } else if(cellvalue == 'SUSPENDED'){ editor.jqxDropDownList('selectIndex', 2 ); }else if(cellvalue == 'CLOSED'){ editor.jqxDropDownList('selectIndex', 3 ); }else{ } editor.on('change', function (event){ // var rowIDs = $('#jqx_grid_bo_accounts_list').jqxGrid('getselectedrowindex'); }); } $("#jqx_grid_bo_accounts_list").jqxGrid( { // width : 1520, autowidth:true, autoHeight:true, filterable:true, showfilterrow : true, editable:true, // sortable:true, selectionmode: 'singlecell', columnsresize: true, rowsHeight:40, source: dataAdapter, columns: [ { text: 'cLoginName', datafield: 'cLoginName', columntype: 'textbox', align: 'center', width: 80, editable:false, filtertype: 'input', hidden:false}, // { text: 'cbackupServerName', datafield: 'cbackupServerName', columntype: 'textbox', align: 'center', width: 0, editable:false, hidden:true, filtercondition: 'contains' }, { text: 'cAlias', datafield: 'cAlias', columntype: 'textbox', align: 'center', cellsalign:"center", width: 180, editable:true, filtertype: 'input', filtercondition: 'contains' }, { text: 'cTypeCompte', datafield: 'cTypeCompte', columntype: 'textbox', align: 'center', cellsalign:"center", width: 100, editable:true, filtertype: 'input', filtercondition: 'contains' }, { text: 'compteNom', datafield: 'compteNom', columntype: 'textbox', align: 'center', cellsalign:"center", width: 120, editable:true, filtertype: 'input', filtercondition: 'contains' }, { text: 'comptePrenom', datafield: 'comptePrenom', columntype: 'textbox', align: 'center', cellsalign:"center", width: 110, editable:true, filtertype: 'input', filtercondition: 'contains' }, { text: 'compteNomPharmacie', datafield: 'compteNomPharmacie', columntype: 'textbox', align: 'center', cellsalign:"center", width: 180, filtertype: 'input', editable:true, filtercondition: 'contains' }, { text: 'compteRue', datafield: 'compteRue', columntype: 'textbox', align: 'center', cellsalign:"center", width: 180, editable:true, filtertype: 'input', filtercondition: 'contains' }, { text: 'compteCodePostal', datafield: 'compteCodePostal', columntype: 'textbox', align: 'center', cellsalign:"center", width: 50, editable:true, filtertype: 'input', filtercondition: 'contains' }, { text: 'compteVille', datafield: 'compteVille', columntype: 'textbox', align: 'center', cellsalign:"center", width: 150, editable:true, filtertype: 'input', filtercondition: 'contains' }, { text: 'compteNumTel', datafield: 'compteNumTel', columntype: 'textbox', align: 'center',cellsalign:"center", width: 120, editable:true, filtertype: 'input', filtercondition: 'contains' }, { text: 'compteMail', datafield: 'compteMail', columntype: 'textbox', align: 'center',cellsalign:"center", width: 180, editable:true, filtertype: 'input', filtercondition: 'contains' }, // { text: 'compteMailPartenaire', datafield: 'compteMailPartenaire', columntype: 'textbox', align: 'center', width: 70, hidden:true, editable:true, filtercondition: 'contains' }, { text: 'sendMailAuto', datafield: 'sendMailAuto', columntype: 'dropdownlist', align: 'center', cellsalign:"center", width: 40, cellsrenderer : cellsrendererSendMailAutoReport , filtertype: 'input', filtercondition: 'contains', initeditor: initeditorSendMailAutoReport}, { text: 'periodReport', datafield: 'periodReport', columntype: 'dropdownlist', align: 'center', cellsalign:"center", width: 110, cellsrenderer: cellsrendererPeriodReport, initeditor : initeditorPeriodReport, filtertype: 'input', filtercondition: 'contains' }, { text: 'accountStatus', datafield: 'accountStatus', columntype: 'dropdownlist', align: 'center', cellsalign:"center", width: 110, initeditor : initEditorStatus, filtertype: 'input', filtercondition: 'contains' }, // { text: 'weeklyReport', datafield: 'weeklyReport', columntype: 'textbox', align: 'center', cellsalign:"center", width: 180 }, ], }); };
Thanks & Regards
NarothHi Naroth,
Please share some of your JSON data so that we may test your code locally.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
data : (from db return by php script)
[{“cLoginName”:”58469″,”compteCodePostal”:”42400″}, {“cLoginName”:”45494t”,”compteCodePostal”:”42120″}];
code :
var sourceDeux= { datatype : 'json', datafiels : [ {name : 'cLoginName', type:'String'}, {name : 'compteCodePostal', type:'String'}, ], url: url, type:'POST', async: false, updaterow: function (rowid, rowdata, commit) { var data = "update=true&" + $.param(rowdata); console.log(data); $.ajax({ dataType: 'json', type:'POST', url: 'bo-getaccountslist.php', cache: false, data: data, success: function (data, status, xhr) { // update command is executed. commit(true); }, error: function(jqXHR, textStatus, errorThrown) { commit(false); } }); } }; var dataAdapterDeux = new $.jqx.dataAdapter(sourceDeux); $("#jqxgridDEux").jqxGrid( { autowidth:true, autoHeight:true, filterable:true, showfilterrow : true, editable:true, // sortable:true, columnsresize: true, rowsHeight:40, source: dataAdapterDeux, columns: [ { text: 'NOKcLoginName', datafield: 'cLoginName', columntype: 'textbox', align: 'center', width: 120, editable:false, hidden:false, filtercondition: 'CONTAINS'}, { text: 'NOKcompteCodePostal', datafield: 'compteCodePostal', columntype: 'textbox', align: 'center', cellsalign:"center", width: 120, editable:true, filtercondition: 'contains' }, ] }); });
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../js/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../js/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../js/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../js/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../js/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../js/jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../js/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../js/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../js/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../js/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../js/jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../js/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../js/jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript"> $(document).ready(function () { function getFilterjqxgriddeux(){ var filterGroups = $('#jqxgridDEux').jqxGrid('getfilterinformation'); var info = ""; for (var i = 0; i < filterGroups.length; i++) { var filterGroup = filterGroups[i]; info += "Filter Column: " + filterGroup.filtercolumn; var filters = filterGroup.filter.getfilters(); for (var j = 0; j < filters.length; j++) { info += "\nFilter: "; info += "\nValue: " + filters[j].value; info += "\nCondition: " + filters[j].condition; info += "\nOperator: " + filters[j].operator; info += "\nType: " + filters[j].type; info += "\n"; // console.log(filters[j]); } } console.log(info); } </script> </head> <body class='default'> <div id='jqxWidget'> <input type="button" onClick="getFilterjqxgriddeux()" value="filter info jqxgriddeux"/> <div id="jqxgridDEux"></div> </div> </body> </html>
With a Json array “var data = ‘[{“cLoginName”:”58469″,”compteCodePostal”:”42400″}, {“cLoginName”:”45494″,”compteCodePostal”:”42120″}]’;” it works well.
Thanks & Regards
NarothIn my db “cLoginName” is a varchar(60) and “compteCodePostal” is a varchar(7)
Hi Naroth,
We tested the following version of your code:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function () { var localData = [{ "cLoginName": "58469", "compteCodePostal": "42400" }, { "cLoginName": "45494t", "compteCodePostal": "42120"}]; var sourceDeux = { datatype: 'json', datafiels: [ { name: 'cLoginName', type: 'String' }, { name: 'compteCodePostal', type: 'String' } ], localdata: localData, type: 'POST', async: false }; var dataAdapterDeux = new $.jqx.dataAdapter(sourceDeux); $("#jqxgridDEux").jqxGrid( { autowidth: true, autoHeight: true, filterable: true, showfilterrow: true, editable: true, // sortable:true, columnsresize: true, rowsHeight: 40, source: dataAdapterDeux, columns: [ { text: 'NOKcLoginName', datafield: 'cLoginName', columntype: 'textbox', align: 'center', width: 120, editable: false, hidden: false, filtercondition: 'CONTAINS' }, { text: 'NOKcompteCodePostal', datafield: 'compteCodePostal', columntype: 'textbox', align: 'center', cellsalign: "center", width: 120, editable: true, filtercondition: 'contains' } ] }); }); </script> </head> <body class='default'> <div id="jqxgridDEux"> </div> </body> </html>
and the filtering works fine. Please share in what scenario/with what data does the example not work as expected?
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
In this case it works well.
Try to get the data from a php script.
Php script is the only difference between your code and mine.Regards
NarothHi Naroth,
As far as the grid is “concerned”, there is no difference between loading from local data and PHP, because the loading is handled by the data adapter. Something I notice now is that the sourceDeux property datafields is misspelled as “datafiels” and this is what may cause the issue.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Many thanks,
The issue came from there.Maybe it should be very usefull, to make something that can alert us when we got this kind of issue.
Thanks & Regards
Naroth -
AuthorPosts
You must be logged in to reply to this topic.