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.