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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Need to click 2 times to get the Start date when i place ejs-daterangepicker inside ng-template

Thread ID:

Created:

Updated:

Platform:

Replies:

148044 Oct 2,2019 09:34 PM UTC Oct 11,2019 05:35 AM UTC Angular - EJ 2 5
loading
Tags: Grid
Mayank K
Asked On October 2, 2019 09:34 PM UTC

I am using ejs-daterangepicker in my grid to show the date range picker to the user to select a range of dates to get the desired output. When i use ejs-daterangepicker outside of the EJ grid it works just fine. But when i use it within the grid the select date is giving me issues. 

I need to click 2 times to get the Start Date selected and then when i hover i am able to select the desired range. And when i click again i am able to get the End date. This issue is i have to click 2 times to get the Start date selected. On the first click the date is highlighted in Red but the Start date is not changed and the heading shows "Start Date" itself. When i click second time then it shows the correct date. Please find the sample code below:

        <ejs-grid [dataSource]='data' #grid [allowPaging]='true' [pageSettings]='pageSetting' [allowSorting]='true'
          [allowFiltering]='true' [filterSettings]='filterSettings' [allowGrouping]='false' [allowResizing]='true'
          (actionBegin)="actionBegin($event)">
          <e-columns>
            <e-column field='name' headerText='Name' width='auto'></e-column>
            <e-column field='ID' headerText='ID' width='auto'></e-column>
            <e-column field='Date' headerText='Date' width='auto'>
                <ng-template #filterTemplate let-data>
                    <ejs-daterangepicker placeholder='Select date' (change)="onDateChange($event)" [startDate]='start'
                      [endDate]='end'></ejs-daterangepicker>
                  </ng-template>
            </e-column>
            <e-column field='statusmain' headerText='Status Main' width='auto'>
                <ng-template #filterTemplate let-data>
                    <ejs-dropdownlist id='dropdown' [(ngModel)]="data.status" [enabled]="data.column.allowFiltering"
                    (change)=onChange($event) [dataSource]='data' [fields]='fields'[popupHeight]='height' ></ejs-dropdownlist>
               </ng-template>
            </e-column>
            <e-column field='taskmain' [allowFiltering]='false' headerText='Task Main' width='auto'></e-column>
          </e-columns>
        </ejs-grid>


Please let me know if this is library issue or the implementation need to be changed. Remember it works perfectly fine when it is outside the grid.

Attachment: calenderfirstclick_b3e2f850.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On October 4, 2019 09:08 AM UTC

Hi Mayank, 

Thanks for contacting Syncfusion support. 

We have validated the provided information and checked with our end and its working fine. Please refer the below sample for more information. 


In the above sample, we have used the latest version(17.3.14) so you can check with latest version and If you still face the problem then share more details or sample(or reproduce at our sample) and package version details that will helpful for us to validate further and to provide a better solution as soon as possible. 

Regards, 
Thavasianand S.  


Mayank K
Replied On October 4, 2019 04:11 PM UTC

Thanks a lot Thavasianand Sankaranarayanan for assisting and also providing the sample. 

Unfortunately the issue is still there. I am able to reproduce it on the sample as well. 

To reproduce the issue on your end in app.compnent.ts on line 31 please change the type from Menu to FilterBar like this

this.filterSettings = { type: 'FilterBar' };

After reload you can see this issue is reproduced. Please find the screenshot with this email. 

Once again thanks for your help.

Attachment: Error_8ec8fa9.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On October 9, 2019 01:38 PM UTC

Hi Mayank, 

Thanks for your update. 

As per your suggestion, we have checked with filterBar and we can able to see the reported problem so we suggest you to use the below way to resolve the reported problem.  

In the below sample, we have bind open event for date range picker and focus the element. Please refer the below code example and sample for more information. 


<ejs-grid [dataSource]='data' [allowPaging]='true' [allowSorting]='true' [allowFiltering]='true' 
[filterSettings]='filterSettings' [allowGrouping]='true' > 
  <e-columns> 
    <e-column field='OrderDate' headerText='Order Date' width='130' [format]='formatoptions' textAlign='Right'> 
      <ng-template #filterTemplate let-data> 
        <ejs-daterangepicker placeholder='Select date' (open)='open($event)' (change)="onDateChange($event)" [startDate]='start' 
          [endDate]='end'></ejs-daterangepicker> 
      </ng-template> 
    </e-column> 
  </e-columns> 
</ejs-grid> 

. . . . . . . . . . 
  open(args){ 
    setTimeout(()=>{ 
      args.popup.element.querySelector('table').focus() 
    }, 500) 
  } 


Regards, 
Thavasianand S. 


Mayank K
Replied On October 10, 2019 09:20 PM UTC

Thanks a lot Thavasianand. Its working fine with this workaround. 

Thavasianand Sankaranarayanan [Syncfusion]
Replied On October 11, 2019 05:35 AM UTC

Hi Mayank, 
 
Thanks for your update. 
 
We are happy that the problem has been resolved at your end. 
 
Regards, 
Thavasianand 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