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
close icon

Grid menu-type filter time-zone

I'd like to display 24H time zone in Grid filter.
Currently, it's shown just AM & PM


I try to use something like this (but didn't help):
<e-column field='Time' headerText='Time' width='150' format='HH:mm:ss' [filter]='{ type: "Menu", menuFilterSettings: { format: "HH:mm:ss" } }'></e-column> I'd also like to have closer times => on 10, max 15 minutes.
One additional question:
When we filter date, data travel in locale time, but actually should be converted in UTC before a request is made. If so, please let me know how to achieve that. Thank you.


1 Reply

VB Vinitha Balasubramanian Syncfusion Team December 21, 2022 02:38 PM UTC

Hi Nemanja,


Thank you for reaching out to Syncfusion support.


Query : To display 24H time zone in Grid filter.


To show the default time format of the filter menu in 24-hour format in the Syncfusion DataGrid for Angular, you can use the custom filter component feature and specify the desired time format using the timeFormat property of the DateTimePicker component.


Here is an example of how you can use the custom filter component feature to show the default time format of the filter menu in 24-hour format:


[app.component.html]

<e-column

      field="OrderDate"

      headerText="Order Date"

      [filter]="filter"

      format="dd/MM/yyyy HH:mm"

      width="140"

    >

</e-column>

 

[app.component.ts]

 

this.filter = {

      ui: {

        create: (args: { target: Element; column: object }) => {

          const flValInput: HTMLElement = createElement('input', {

            className: 'flm-input',

          });

          args.target.appendChild(flValInput);

          this.dropInstance = new DateTimePicker({

            step: 60,

            timeFormat: 'HH:mm',

          });

          this.dropInstance.appendTo(flValInput);

        },

        write: (args: {

          column: object;

          target: Element;

          parent: any;

          filteredValue: number | string;

        }) => {

          this.dropInstance.value = args.filteredValue;

        },

        read: (args: {

          target: Element;

          column: any;

          operator: string;

          fltrObj: Filter;

        }) => {

          args.fltrObj.filterByColumn(

            args.column.field,

            args.operator,

            this.dropInstance.value

          );

        },

      },

    };


In this example, the timeFormat property of the DateTimePicker component is set to HH:mm, which will display the time in 24-hour format.


You can find a sample of this solution at https://stackblitz.com/edit/angular-hjrvvr-9bnynz?file=app.component.html,app.component.ts


For more information about customizing the filter menu in the Syncfusion DataGrid for Angular, you can refer to the documentation at https://ej2.syncfusion.com/angular/documentation/grid/filtering/filter-menu/#custom-component-in-filter-menu


Regards,

Vinitha Balasubramanian


Loader.
Live Chat Icon For mobile
Up arrow icon