Grid external filter

[Charles]

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

[Rajapandi Ravi]

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

[Charles]

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. 

if(args.item.id === 'Lastweek') {

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: 'StartDate', matchCase: false, operator: 'greaterthanorequal', predicate: 'and', value: weekstartDate},

{field: 'StartDate', matchCase: false, operator: 'lessthanorequal', predicate: 'and', value: weekendDate}]

}

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

[Rajapandi Ravi]

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

[Charles]

H  Rajapandi,

1. I'm trying to filter grid based on Month and  Year,  'This Month' filter is working fine while 'Last Month', 'This Year', and 'Last Month' are not filtering as expected. Kindly assist. See link below  https://stackblitz.com/edit/angular-xxyn6p-c66v39?file=app.component.html,app.component.ts
2. I want grid to display most recent added row in the database to top of grid upon loading.  The bottom row from the database table should be display at the top of the grid when it load i.e. from descending to ascending order.  The sorting to be done automatic from bottom to top whenever the grid is loaded.

Regards

Charles

[Rajapandi Ravi]

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 1^st record position in your database at server-side.

Regards,

Rajapandi R