We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid external filter

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


3 Replies 1 reply marked as answer

RR Rajapandi Ravi Syncfusion Team October 18, 2022 07:52 AM

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



CH Charles October 18, 2022 04:34 PM

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



RR Rajapandi Ravi Syncfusion Team October 19, 2022 07:53 AM

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


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon