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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Timepicker in Angular Grid's column

Thread ID:

Created:

Updated:

Platform:

Replies:

149110 Nov 14,2019 04:30 PM UTC Nov 18,2019 05:58 AM UTC Angular - EJ 2 3
loading
Tags: Grid
Alireza Kahaei
Asked On November 14, 2019 04:30 PM UTC

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 [Syncfusion]
Replied On November 15, 2019 07:45 AM UTC

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. 
 
 
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
Replied On November 15, 2019 11:41 AM UTC

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 [Syncfusion]
Replied On November 18, 2019 05:58 AM UTC

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); 
        } 
        ... 
   } 
} 
 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon