Timepicker in Angular Grid's column

[Alireza Kahaei]

Hi,

I've been looking into your documentation for a few hours and I don't understand how would it be possible to define an Angular's Grid of type timepicker? I prefer to set it in HTML file of the component.

Best regards,

Ali

[Pavithra Subramaniyam]

Hi Alireza, 

 

Thanks for contacting Syncfusion support. 

 

From your query we suspect that you want to set a column with TimePicker as editor component. If yes you can achieve your requirement by using the “Cell Edit Template” feature of Grid component. Please refer to the below documentation link for more information in which we have rendered DatePicker as editor. You can add the TimePicker by using the same way. 

 

https://ej2.syncfusion.com/angular/documentation/grid/edit/#using-template 

 

If this is not your requirement please provide more information like Grid code, pictorial representation etc. that will be helpful for us to provide a better solution as early as possible. 

 

Please get back to us, if you need further assistance. 

 

Regards, 

Pavithra S. 

[Alireza Kahaei]

Hi,

yes that's exactly what I wanted to do. 

But there seems to be a problem somewhere that my second timepicker saves an empty string when I'm editing and updating the grid. 

Another issue is that when I click double click on a grid's row, both timepickers are emptied. I want it so that only if I click on the timepicker it will clear the previous value.

This is my HTML:

<div >

    <div class='textboxes' >

        <ejs-textbox placeholder="Name" floatLabelType="Auto">ejs-textbox>

      div>

      <br/>

    <ejs-checkbox label="Needs admin's approval" checked="True">ejs-checkbox>

    <br/>

    <ejs-checkbox label="Queueable">ejs-checkbox>

    <br/>

    <ejs-checkbox label="Maximum reservation times">ejs-checkbox>

    <br/>

    <ejs-checkbox label="Available on holidays" checked="True">ejs-checkbox>

    <br/>

    <div class="control-section">

        <ejs-grid  [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' width = '1000'>

            <e-columns>

                <e-column field='Id' headerText='ID' isPrimaryKey='true' [visible]='false'>e-column>

                <e-column field='DayOfTheWeek' headerText='DAY OF THE WEEK' ColumnType='checkbox' editType= 'dropdownedit' autoFit='true'  textAlign='Center'>e-column>

                <e-column field='WholeDay' headerText='WHOLE DAY' editType='booleanEdit' displayAsCheckBox='true' autoFit='true' textAlign=Center>e-column>

                <e-column field='StartingHour' headerText='STARTING HOUR' autoFit='true' editType= 'dateTimePickerEdit' format='hh:mm' textAlign='Center'>

                    <ng-template #editTemplate let-data>

                        <ejs-timepicker id="StartingHour" placeholder="Start Date" floatLabelType='Naver'>ejs-timepicker>

                    ng-template>

                e-column>

                <e-column field='EndingHour' headerText='ENDING HOUR' autoFit='true' editType= 'dateTimePickerEdit' format='hh:mm' textAlign='Center'>

                    <ng-template #editTemplate let-data>

                        <ejs-timepicker id="EndingHour" placeholder="End Date" floatLabelType='Naver'>ejs-timepicker>

                    ng-template>

                e-column>

            e-columns>

        ejs-grid>

    div>

div>

And here is my TypeScript:

import { Component, OnInit } from '@angular/core';

import { EditSettingsModel, ToolbarItems, SaveEventArgs } from '@syncfusion/ej2-angular-grids';

@Component({

  selector: 'app-rule',

  templateUrl: './rule.component.html',

  styleUrls: ['./rule.component.css']

})

export class RuleComponent implements OnInit {

  public data: Object[] = [

    {

      Id: 1,

      DayOfTheWeek: "Monday",

      WholeDay: false,

      StartingHour: "09:00",

      EndingHour: new Date(),

      OrderDate: new Date()

    },

    {

      Id:2,

      DayOfTheWeek: "Tuesday",

      WholeDay: true,

      StartingHour: "11:00",

      EndingHour: new Date(),

      OrderDate: new Date()

    }

  ];

  public editSettings: EditSettingsModel;

  public toolbar: ToolbarItems[];

  public startTimeData: Object;

  public endTimeData: Object;

  

  constructor() { }

  ngOnInit() {

    // this.data = data;

    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };

    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

  }

}

Please note that I'm completely new to Angular.

[Pavithra Subramaniyam]

Hi Alireza, 

 

Thanks for your update. 

 

Query: But there seems to be a problem somewhere that my second timepicker saves an empty string when I'm editing and updating the grid.  

 

We have validated your query and you can resolve the reported problem by casting the string value in actionBegin event. Find the below code snippets and sample for your reference. 

 

[code snippets] 

... 

export class AppComponent { 

    ... 

   public orderData: Object[]; 

 

    ... 

   actionBegin(args: any) { 

        if (args.requestType === 'beginEdit' || args.requestType === 'add') { 

            this.orderData = Object.assign({}, args.rowData); 

        } 

        if (args.requestType === 'save') { 

           // cast string to integer value. 

            args.data['OrderDate'] = this.orderData['OrderDate']; 

            args.data['ShippedDate'] = this.orderData['ShippedDate']; 

        } 

    } 

} 

 

 

Query: Another issue is that when I click double click on a grid's row, both timepickers are emptied. I want it so that only if I click on the timepicker it will clear the previous value. 

 

You can resolve the reported problem by setting value to timepicker component. Find the below code snippets and sample for your reference. 

 

[code snippets] 

 

<div class="control-section"> 

    <div class="col-lg-9"> 

        <ejs-grid #normalgrid id='Normalgrid' [dataSource]='data' allowPaging='true'  

[pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar' (actionBegin)='actionBegin($event)'> 

            <e-columns> 

                ... 

                   <ng-template #editTemplate let-data> 

                        <ejs-timepicker id="OrderDate" placeholder="Start Date"  

[(ngModel)]="orderData.OrderDate" floatLabelType='Never'></ejs-timepicker> 

                    </ng-template> 

                </e-column> 

                <e-column field='ShippedDate' headerText='Shipped Date' width='120' [format]='formatoptions' textAlign='Right'> 

                    <ng-template #editTemplate let-data> 

                        <ejs-timepicker id="ShippedDate" placeholder="Start Date" 

 [(ngModel)]="orderData.ShippedDate" floatLabelType='Never'></ejs-timepicker> 

                    </ng-template> 

                </e-column> 

            </e-columns> 

       </ejs-grid> 

    </div> 

 

... 

export class AppComponent { 

    ... 

   public orderData: Object[]; 

 

    ... 

   actionBegin(args: any) { 

        if (args.requestType === 'beginEdit' || args.requestType === 'add') { 

            this.orderData = Object.assign({}, args.rowData); 

        } 

        ... 

   } 

} 

 

 

Sample: https://stackblitz.com/edit/angularedittemplatetimepicker-62xzne?file=app.component.ts  

 

Help Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#using-template  

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S. 

[Sivasakthi Nithyanantham]

Is it possible filter based on input in time picker

[Aishwarya Rameshbabu]

Hi Sivasakthi Nithyanantham,

Upon reviewing your query, we have identified the need to filter values in the Syncfusion Grid based on the input from the TimePicker component. To proceed with an appropriate solution, we require additional information from you. Kindly provide the following details:

1. Specify the type of filtering you are employing in the Grid (Filter-Type).

2. Share the column definition of the Grid for which the TimePicker component needs to be rendered, along with the complete Grid rendering code and any event handler functions utilized.

3. Indicate the current version of the Syncfusion package you are using.

By default, the Syncfusion Grid renders the filter UI for a column based on its type. For example, in the sample provided below, we used a Menu filter where a DateTimePicker component is rendered for a dateTime type column. Please review the sample and explain your specific requirements in detail. This will greatly assist us in delivering an optimal solution.

Sample: Dkfgrf (forked) - StackBlitz

Regards

Aishwarya R