jQuery UI Widgets › Forums › Grid › Issue in applying toolbar in grid.
Tagged: cellsformat, date, filter, filtering, grid, jqxgrid, local data, search, toolbar
This topic contains 37 replies, has 2 voices, and was last updated by Apeksha Singh 11 years, 1 month ago.
-
Author
-
Hi Apeksha,
Here is how you would have to modify the rendertoolbar callback function in the example we provided you:
rendertoolbar: function (toolbar) { var me = this; var container = $("<div style='margin: 5px;'></div>"); toolbar.append(container); var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />"); var combobox = $("<div id='jqxcombobox'></div>"); container.append(input); container.append(combobox); var source = ["firstname", "lastname", "productname", "quantity", "price", "available"]; combobox.jqxComboBox({ source: source, selectedIndex: 0 }); input.on('keyup', function (event) { var searchText = input.val(); var filtergroup = new $.jqx.filter(); var filter_or_operator = 1; var filtervalue = searchText; var filtercondition = 'contains'; var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition); filtergroup.addfilter(filter_or_operator, filter); $("#jqxgrid").jqxGrid('addfilter', combobox.jqxComboBox("val"), filtergroup); $("#jqxgrid").jqxGrid('applyfilters'); });},
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
This code was really helpful it solved my requirements but I am facing some issues with this code as :-
1) If we have a blank row in any column then search for that column is not working properly. For example :-1- If there is 4 rows in a column and only one row has data “abc”.
2- I searched for abc it removed all the blank rows and display me only this row.
3- Then after removing this word from search input I am not getting the original list back.Please tell me what is the issue behind it.
2) This search is not working for dates of format like “2013-09-12”.
Please reply me back as soon as possible.
Thanks & Regards,
ApekshaHi Apeksha,
Here is an improvement for the provided code:
rendertoolbar: function (toolbar) { var me = this; var container = $("<div style='margin: 5px;'></div>"); toolbar.append(container); var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />"); var combobox = $("<div id='jqxcombobox'></div>"); container.append(input); container.append(combobox); var source = ["firstname", "lastname", "productname", "quantity", "price", "available"]; combobox.jqxComboBox({ source: source, selectedIndex: 0 }); input.on('keyup', function (event) { var searchText = input.val(); var datafield = combobox.jqxComboBox("val"); var filtertype = 'stringfilter'; if (datafield == 'price' || datafield == 'quantity') { filtertype = 'numericfilter'; }; if (searchText == "") { $('#jqxgrid').jqxGrid('removefilter', datafield); } else { $('#jqxgrid').jqxGrid('removefilter', datafield); var filtergroup = new $.jqx.filter(); var filter_or_operator = 1; var filtervalue = searchText; var filtercondition = 'contains'; var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition); filtergroup.addfilter(filter_or_operator, filter); $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup); $("#jqxgrid").jqxGrid('applyfilters'); }; });},
Note that for date datafields, the filtertype variable should be set to “datefilter”. You can learn more about filtering in the Grid Filtering documentation entry.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
It resolved one of my issue that is :-
1) If we have a blank row in any column then search for that column is not working properly. For example :-
1- If there is 4 rows in a column and only one row has data “abc”.
2- I searched for abc it removed all the blank rows and display me only this row.
3- Then after removing this word from search input I am not getting the original list back.Thanks a lot for helping me in resolving one issue, but still not able to search date column as the format is “2013-08-25” after “2013” when I enter “-” it is not able to filter it.
Please tell me what can resolve this issue as soon as possible.
Thanks & Regards,
ApekshaHi Apeksha,
1) Make sure you have this piece of code included in your solution:
if (searchText == "") { $('#jqxgrid').jqxGrid('removefilter', datafield);} else {
2) The filtering of dates should be in a particular order: day-month-year, e.g. 01-05-2013.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Is it not possible to do it in year-month-day ?
Regards,
ApekshaHi Apeksha,
It is possible. To achieve it, you have to change the cellsformat property of the date column to “yyyy-MMMM-dd”.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
I have already implemented this format but not able to search date in this format using filter.
Please guide me regarding this as soon as possible.Thanks & Regards,
ApekshaHi Apeksha,
Here is an update to the grid that allows date filtering:
$("#jqxgrid").jqxGrid({ width: 680, source: getAdapter(), theme: theme, showtoolbar: true, rendertoolbar: function (toolbar) { var me = this; var container = $("<div style='margin: 5px;'></div>"); toolbar.append(container); var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />"); var combobox = $("<div id='jqxcombobox'></div>"); container.append(input); container.append(combobox); var source = ["firstname", "lastname", "productname", "quantity", "date", "available"]; combobox.jqxComboBox({ source: source, selectedIndex: 0 }); input.on('change', function (event) { var searchText = input.val(); var datafield = combobox.jqxComboBox("val"); var filtertype = 'stringfilter'; if (datafield == 'quantity') { filtertype = 'numericfilter'; } else if (datafield == 'date') { filtertype = 'datefilter'; }; if (searchText == "") { $('#jqxgrid').jqxGrid('removefilter', datafield); } else { $('#jqxgrid').jqxGrid('removefilter', datafield); var filtergroup = new $.jqx.filter(); var filter_or_operator = 1; var filtervalue = searchText; var filtercondition = 'contains'; if (datafield == "date") { filtervalue = new Date(searchText); filtervalue.setMinutes(0, 0, 0); filtervalue.setHours(0); filtercondition = "EQUAL"; }; var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition); filtergroup.addfilter(filter_or_operator, filter); $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup); $("#jqxgrid").jqxGrid('applyfilters'); }; }); }, columns: [ { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 90 }, { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 90 }, { text: 'Product', datafield: 'productname', width: 170 }, { text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125 }, { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2' }, { text: 'Date', datafield: 'date', cellsalign: 'right', cellsformat: 'yyyy-MMMM-dd' } ]});
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Thanks a lot this is the solution I was searching for.
Now I am able to filter date column, but in this after deleting every value from input fields I am not getting the original grid data.
The above code to get the original data is working fine for other columns except date.
Also while I filter any data for a particular column, the whole column get selected by grey shade but if I change the column for filtering. The previous column is not getting deselected.
Now I have two columns in the grid displayed as selected.Please guide me regarding this as sson as possible.
Thanks & Regards,
ApekshaHi Apeksha,
1) The date filter gets cleared. However, this no longer happens on keyup but on change – when the value of the input has changed and it has lost focus.
2) I understand you wish to clear other columns’ filters when selecting a new column for filtering. Here is how:
rendertoolbar: function (toolbar) { var me = this; var container = $("<div style='margin: 5px;'></div>"); toolbar.append(container); var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 223px;' />"); var combobox = $("<div id='jqxcombobox'></div>"); container.append(input); container.append(combobox); var source = ["firstname", "lastname", "productname", "quantity", "date", "available"]; combobox.jqxComboBox({ source: source, selectedIndex: 0 }); combobox.on("change", function () { input.val(""); $('#jqxgrid').jqxGrid('clearfilters'); }); input.on('change', function (event) { var searchText = input.val(); var datafield = combobox.jqxComboBox("val"); var filtertype = 'stringfilter'; if (datafield == 'quantity') { filtertype = 'numericfilter'; } else if (datafield == 'date') { filtertype = 'datefilter'; }; if (searchText == "") { $('#jqxgrid').jqxGrid('clearfilters'); } else { $('#jqxgrid').jqxGrid('removefilter', datafield); var filtergroup = new $.jqx.filter(); var filter_or_operator = 1; var filtervalue = searchText; var filtercondition = 'contains'; if (datafield == "date") { filtervalue = new Date(searchText); filtervalue.setMinutes(0, 0, 0); filtervalue.setHours(0); filtercondition = "EQUAL"; }; var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition); filtergroup.addfilter(filter_or_operator, filter); $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup); $("#jqxgrid").jqxGrid('applyfilters'); }; });},
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
I have changed the ‘keyup’ to ‘change’ but still the date filter is not getting removed when the value of the input has changed or removed.
I am not able to get my original grid data back.I am adding my piece of code please have a look :-
rendertoolbar: function (toolbar) { //jshint unused:vars var me = this; var container = $("<div style='margin: 5px;'></div>"); toolbar.append(container); var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' placeholder='Search' style='height: 23px; float: right; width: 150px;' />"); var combobox = $("<div id='selectSearchField'></div>"); container.append(input); container.append(combobox); var source = ["Number", "To", "Date", "Due Date", "Status"]; combobox.jqxComboBox({ source: source, selectedIndex: -1, promptText: "Select Column", width: "20%", height: "20", theme: "ui-start" }) combobox.on("change", function () { input.val(""); $('#all_invoicetable').jqxGrid('clearfilters'); }); $(combobox).on("select", function (event) { //$("#all_invoicetable").jqxGrid({ showfiltercolumnbackground: false}); var args = event.args; if (args) { var item = args.item; // get item"s label and value. var label = item.label; //alert("ssds"+label); if (label === "Number") { searchDatafield = "number"; } else if (label === "Date") { searchDatafield = "date"; } else if (label === "Due Date") { searchDatafield = "due_date"; } else if (label === "To") { searchDatafield = "contact_name"; } else { searchDatafield = "workflow_status_status"; } } }); //var searchDatafield = "number"; input.on("change", function (event) { var searchText = input.val(); var filtertype = 'stringfilter'; if (searchDatafield == 'due_date' || searchDatafield == 'date') { filtertype = 'datefilter'; }; if (searchText == " ") { //alert("in"); $("#all_invoicetable").jqxGrid("clearfilters"); } else { $("#all_invoicetable").jqxGrid("removefilter", searchDatafield); var filtergroup = new $.jqx.filter(); var filterOrOperator = 1; var filtervalue = searchText; var filtercondition = "contains"; if (searchDatafield == 'due_date' || searchDatafield == 'date') { filtervalue = new Date(searchText); //filtervalue.setMinutes(0, 0, 0); //filtervalue.setHours(0); filtercondition = "EQUAL"; }; var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition); filtergroup.addfilter(filterOrOperator, filter); //console.log("filters------", filter); $("#all_invoicetable").jqxGrid("addfilter", searchDatafield, filtergroup); $("#all_invoicetable").jqxGrid("applyfilters"); }; }); },
Please guide me as soon as possible.
Thanks & Regards,
ApekshaHi Apeksha,
The issue comes from this line:
if (searchText == " ") {
which should actually be:
if (searchText == "") {
Note the difference between ” ” (an interval) and “” (an empty string).
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar,
Yes this was the issue I didn’t noticed it 😛 .Thanks a lot for your reply.
But still I am facing one issue, let me explain you in steps it might clear what I want to say :-
1- If I select a particular column for filtering say in context of my code I selected “To”.
2- Then in the list I have 4 names say – “Apeksha”,”Dimitar”,”Peter”,”Damen”.
3- Now when I enter “D” in the input field , the filter response properly everything is working fine it filter and show me two names “Dimitar” and “Damen”.
4- Now if I enter “Z” as you can see there is no word in the column that contain “Z” letter.
5- So the grid remove all the data and show “No data to Display”.
6- Now I deleted the “z” letter from input it return me the previous grid data.But there is a design displacement of text in the first cell of first column , first row only. The text is moved to left.
I am not able to understand why is it happening.Please guide me regarding this as soon as possible.
Thanks & Regards,
ApekshaHi Apeksha,
We did not encounter such an issue by following your step-by-step guide. Please make sure you are using the latest version of jQWidgets (3.0.3).
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.