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

[Mayank K]

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]

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. 

Sample : https://stackblitz.com/edit/angular-qbpuu7-sq4isk?file=app/app.module.ts 

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]

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]

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) 

  } 

Sample : https://stackblitz.com/edit/angular-qbpuu7-tfjywr?file=app.component.ts 

Regards, 

Thavasianand S. 

[Mayank K]

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

[Thavasianand Sankaranarayanan]

Hi Mayank, 

 

Thanks for your update. 

 

We are happy that the problem has been resolved at your end. 

 

Regards, 

Thavasianand S.