Hi,
I do not want to make use of the default search bar in grid. I want a custom type with some buttons on its toolbar so that when i click on 'Today' it would filter today;s record or when l click on 'Yesterday' it would filter the records for the previous day (date). I also have other button such as 'Thisweek', 'Lastweek' etc. I had actually accomplished this in a winform project but l don't how to write is in angular. Kindly assist
https://stackblitz.com/edit/angular-nqk33p?file=app.component.html,app.component.ts
Regards
Charles
Hi Charles,
Greetings from Syncfusion support
We have checked your query and we could see that you like to filter the date column externally with toolbar button, based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.
toolbarClick(args) { //toolbar click event of Grid if(args.item.id === 'Today') { let time = new Date().getTime(); //we can use filterByColumn() method to filter the single date this.grid.filterByColumn('OrderDate', 'equal', new Date(time - (time % 86400000))); } if(args.item.id === 'Yesterday') {
const today = new Date(); const yesterday = new Date(today); let time: any = new Date(yesterday.setDate(yesterday.getDate() - 1)); this.grid.filterByColumn('OrderDate', 'equal', new Date(time - (time % 86400000))); } if(args.item.id === 'Tomorrow') { const today = new Date(); const yesterday = new Date(today); let time: any = new Date(yesterday.setDate(yesterday.getDate() + 1)); this.grid.filterByColumn('OrderDate', 'equal', new Date(time - (time % 86400000))); } if(args.item.id === 'Thisweek') { //use this below way to filter the date column using range values const weekstartDate = new Date(new Date(new Date().setDate(new Date().getDate() - ((new Date().getDay() + 7) % 7))).toDateString()); const weekendDate = new Date(new Date(new Date().setDate( new Date(new Date().setDate(new Date().getDate() - ((new Date().getDay() + 7) % 7))).getDate() + 6)).toDateString()); this.grid.filterSettings.columns = [ {field: 'OrderDate', matchCase: false, operator: 'greaterthanorequal', predicate: 'and', value: weekstartDate}, {field: 'OrderDate', matchCase: false, operator: 'lessthanorequal', predicate: 'and', value: weekendDate}] } if(args.item.id === 'Lastweek') { //use your code here } if(args.item.id === 'Thismonth') { //use your code here } if(args.item.id === 'Thisyear') { //use your code here } if(args.item.id === 'Lastyear') { //use your code here }
}
|
Sample: https://stackblitz.com/edit/angular-xxyn6p-9zdvjo?file=app.component.html,data.ts,app.component.ts
Video demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vddemo1471727340.zip
Documentation: https://ej2.syncfusion.com/angular/documentation/grid/filtering/filtering/
API: https://ej2.syncfusion.com/angular/documentation/api/grid/#filterbycolumn
Regards,
Rajapandi R
Hi Rajapandi,
Thank you for your assistance. Today, Yesterday, Tomorrow all work fine but I tried the below codes for 'Lastweek' and it return empty grid eventhough there are existing records. I will appreciate if you can get the the codes for Lastweek, thismonth, Lastmonth, Thisyear, Lastyear.
I also try to refresh or reload the grid with the codes below but it didnt work
refreshGrid() {
setTimeout(() => {
this.grid.refresh();
}, 100);
}
Regards
Charles
Hi Charles,
Thanks for your update
Based on your query we have checked your shared code information and we could see that you are trying to filter the invalid date ranges please refer the below screenshot for more information.
We have modified the code to get the last week start date(sunday) and end date(saturday), please refer the below code example and sample for more information.
if(args.item.id === 'Lastweek') { const lastweektoday = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 7); const startvalue = new Date(lastweektoday.setDate(lastweektoday.getDate()-lastweektoday.getDay())); const weekendDate = new Date(lastweektoday.getFullYear(), lastweektoday.getMonth(), 6 - lastweektoday.getDay() + lastweektoday.getDate());
this.grid.filterSettings.columns = [ {field: 'OrderDate', matchCase: false, operator: 'greaterthanorequal', predicate: 'and', value: startvalue}, {field: 'OrderDate', matchCase: false, operator: 'lessthanorequal', predicate: 'and', value: weekendDate}] }
|
Sample: https://stackblitz.com/edit/angular-xxyn6p-8cemex?file=app.component.html,app.component.ts
Screenshot:
Regards,
Rajapandi R
H Rajapandi,
Regards
Charles
Charles,
Query#: 'This Year', and 'Last Month' are not filtering as expected
Based on your query we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.
if(args.item.id === 'Lastmonth') { var date = new Date(); var firstDayPrevMonth = new Date(date.getFullYear(), date.getMonth() - 1, 1); var lastDayPrevMonth = new Date(date.getFullYear(), date.getMonth(), 0); this.grid.filterSettings.columns = [ {field: 'OrderDate', matchCase: false, operator: 'greaterthanorequal', predicate: 'and', value: firstDayPrevMonth}, {field: 'OrderDate', matchCase: false, operator: 'lessthanorequal', predicate: 'and', value: lastDayPrevMonth}] } if(args.item.id === 'Thisyear') { var currentYear = new Date().getFullYear(); const firstDay = new Date(currentYear, 0, 1); const lastDay = new Date(currentYear, 11, 31); this.grid.filterSettings.columns = [ {field: 'OrderDate', matchCase: false, operator: 'greaterthanorequal', predicate: 'and', value: firstDay}, {field: 'OrderDate', matchCase: false, operator: 'lessthanorequal', predicate: 'and', value: lastDay}]
}
|
Sample: https://stackblitz.com/edit/angular-xxyn6p-gt6m1d?file=app.component.html,app.component.ts
Query#: I want grid to display most recent added row in the database to top of grid upon loading.
By default, the Grid will display the record based on what order you are returning from your database. If you like to display the newly added record on top of the Grid, while performing saving action you need to insert the added record in 1st record position in your database at server-side.
Regards,
Rajapandi R