How can I autocomplete a field in my editor windows custom when I am fill other field with react

[Anderson Castillo Lopez]

Hello,

I would like to know how to update a field in my editor windows cutom when I am writing in other field. For example, I have a user ID (122324) and I would like that number of the user can be completed only whether I have the user in my database. I tried to use setState to update the field and onChange event in the input but it doesn't work. I also want to hide and show other fields when I setState a variable but It shows me a error

My Code:

  editorTemplate(props) {

        return (props !== undefined ?

            <table className="custom-event-editor" style={{ width: '100%', cellpadding: '5' }}>

                <tbody>

                    <tr><td className="e-textlabel">IDtd><td colSpan={4}>

                        <input id="ID" className="e-field e-input" type="text" name="ID" style={{ width: '100%' }} />

                    td>tr>

                    <tr><td className="e-textlabel">Numbertd><td colSpan={4}>

                        <input className="e-field e-input" type="number" name="Number" style={{ width: '100%' }} />

                    td>tr>

                    <tr><td className="e-textlabel">Desdetd><td colSpan={4}>

                        <DateTimePickerComponent format='dd/MM/yy hh:mm a' id="StartTime" data-name="StartTime" value={new Date(props.startTime || props.StartTime)} className="e-field">DateTimePickerComponent>

                    td>tr>

                    <tr><td className="e-textlabel">Hastatd><td colSpan={4}>

                        <DateTimePickerComponent format='dd/MM/yy hh:mm a' id="EndTime" data-name="EndTime" value={new Date(props.endTime || props.EndTime)} className="e-field">DateTimePickerComponent>

                    td>tr>

                    <tr><td className="e-textlabel">Detalle de la reservatd><td colSpan={4}>

                        <textarea id="Description" className="e-field e-input" data-name="Description" rows={3} cols={50} style={{ width: '100%', height: '60px !important', resize: 'vertical' }}>textarea>

                    

                    td>tr>

                tbody>

            table> : <div>div>);

    }

            <ScheduleComponent

                hideEmptyAgendaDays={false}

                showWeekend={true}

                //workDays={this.workingDays}

                startHour='09:00' endHour='24:00'

                timeScale={{ enable: true, interval: this.range, slotCount: 1 }}

                allowMultiCellSelection={true}

                width='100%'

                height='auto'

                actionComplete={this.onActionComplete.bind(this)}

                popupOpen={this.onPopupOpen.bind(this)}

                editorTemplate={this.editorTemplate.bind(this)}

                showQuickInfo={false}

                eventSettings={{ dataSource: this.data}}

                

            >

                <ViewsDirective>

                    <ViewDirective option='Week' />

                ViewsDirective>

                <Inject services={[Week]} />

            ScheduleComponent>

Thanks!

[Balasubramanian Sattanathan]

Hi Anderson, 

Greetings from Syncfusion Support. 

We have validated your requirement at our end and prepared a sample based on that using the below code snippet. 

https://stackblitz.com/edit/react-schedule-editor-auto-complete?file=index.js 

editorTemplate(props) { 

    return ((props !== undefined) ? <table className="custom-event-editor" style={{ width: '100%', cellpadding: '5' }}><tbody> 

      <tr><td className="e-textlabel">Summary</td><td style={{ colspan: '4' }}> 

        <input id="Summary" className="e-field e-input" type="text" name="Subject" style={{ width: '100%' }} /> 

      </td></tr> 

      <tr><td className="e-textlabel">From</td><td style={{ colspan: '4' }}> 

        <DateTimePickerComponent id="StartTime" format='dd/MM/yy hh:mm a' data-name="StartTime" value={new Date(props.startTime || props.StartTime)} className="e-field"></DateTimePickerComponent> 

      </td></tr> 

      <tr><td className="e-textlabel">To</td><td style={{ colspan: '4' }}> 

        <DateTimePickerComponent id="EndTime" format='dd/MM/yy hh:mm a' data-name="EndTime" value={new Date(props.endTime || props.EndTime)} className="e-field"></DateTimePickerComponent> 

      </td></tr> 

      <tr><td className="e-textlabel">OwnerId</td><td style={{ colspan: '4' }}> 

        <AutoCompleteComponent id="OwnerId" dataSource={this.data} fields={this.fields} ref={(AutoComplete) => { this.listObj = AutoComplete; }} data-name='OwnerId' value={(props.OwnerId || '')} placeholder="e.g. Basketball" className="" /> 

      </td></tr> 

      <tr><td className="e-textlabel">Reason</td><td style={{ colspan: '4' }}> 

        <textarea id="Description" className="e-field e-input" name="Description" rows={3} cols={50} style={{ width: '100%', height: '60px !important', resize: 'vertical' }}></textarea> 

      </td></tr></tbody></table> : <div></div>); 

  } 

Kindly refer and follow the above sample and let us know if you need further assistance. 

Regards, 

Balasubramanian S

[Anderson Castillo Lopez]

Thanks for the reply. This example helps me; however, I would like to know how a field can be completed automatically when I write an ID that I have in my database or datasource. For example, if the Id is 12345 and It is registered in my json or db, I want that the other field (Number, for example) can be completed automatically.

For Example: 

datasource

 "doctorsEventData": [

    {

      "Id": 1,

      "Subject": "Surgery - Andrew",

      "EventType": "Confirmed",

      "StartTime": "2018-02-12T03:30:00.000Z",

      "EndTime": "2018-02-12T04:30:00.000Z",

      "OwnerId": "12345",

      "Number": "902837483",

     

    }, ]

My Modal:

[Balasubramanian Sattanathan]

Hi Anderson, 

Thanks for the reply. 

We have validated your requirement at our end and let you know that it can be achieved by using cascading dropdownlist. So, we would suggest you to refer the below UG to know more details about cascading dropdown. We have prepared a sample based on that which can be available from the below link. 

Sample: https://stackblitz.com/edit/react-sxbwdv-n5utpy?file=index.js 

Using DropdownList: https://ej2.syncfusion.com/react/documentation/drop-down-list/how-to/multiple-cascading/ 

Using ComboBox: https://ej2.syncfusion.com/react/documentation/combo-box/how-to/cascading/ 

Kindly refer to the above solution and let us know if you need further assistance. 

Regards, 

Balasubramanian S