Autocomplete Component in Custom Editor Template

[Matthew]

I am having an issue using the Autocomplete component inside an editor template for the Scheduler Component. Its my understanding that all "input" fields in the editor template must have className="e-field". However passing this into the Autocomplete Component inside the editor template causes an error, message: 'Uncaught DOMException: Failed to execute 'closest' on 'Element': '.' is not a valid selector'

If className is not passed through, no error is thrown the event is not updated. Please could you advise on how to get the Autocomplete component working with a custom editor template in the scheduler

[Matthew]

See attached for example snippet to reproduce 

Attachment: editor_template_autocomplete_45804cc7.zip

[Karthigeyan Krishnamurthi]

Hi Matthew,  

 

Syncfusion greetings. 

 

We provided the e-field support only for limited JS2 Syncfusion components like datepicker, datetimepicker, dropdownlist, multiselect, checkbox and input components . For other JS2 components, we have to handle the ‘get, set value’ in sample end using actionBegin and popupOpen events like below. 

https://stackblitz.com/edit/react-i1j2ez-c1snkt?file=index.js 

 

onPopupOpen(args) { 

      if(args.type=='Editor'){ 

          this.listObj.value = args.data.Game || null 

      } 

    } 

    onActionBegin(args) { 

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

          args.data[0].Game = this.listObj.value; 

        } 

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

          args.data.Game = this.listObj.value; 

        } 

    } 

 

Regards, 

Karthi 

 

[Matthew]

Hi, Thanks for that. I am using resource grouping but when I click save the onActionBegin and onActionComplete events are not being triggered? If I take the AutoComplete/DropdownList components out of the editor templete they are then triggered. Do you know why this might be?

[Karthigeyan Krishnamurthi]

Hi Matthew, 

 

Thanks for the update. 

 

In your sample, resource field may not be included in custom editor which could be the cause. We have prepared the below sample for your reference, kindly check it. 

https://stackblitz.com/edit/o7wvn8-mrcmk3?file=index.ts 

  

Regards, 

Karthi 

[Matthew]

Hi, Thanks for you help, I have got it working now :)

[Karthigeyan Krishnamurthi]

Most welcome 😊