Add a default value for the drop down list component

[Cezar]

I want to add a default value to a drop down list. I tried the value property, but it didn't work.  

The scenario is as follows, I have a TreeViewComponent on the right that displays several items. From this, when dragging an element and putting it on the scheduler, I want the template editor to have a drop-down list with this selected element.  

For this, on the onTreeDragStop action, I created the event and added it to the editor.

  let eventData = {

                              Id: filteredData[0].Id,

                              StarTime:cellData.startTime,

                             EndTime: cellData.endTime

}

this.scheduleObj.openEditor(eventData, 'Add',true);

And on the Template editor I put a DropDownListComponent with the map fields

      <td className="custom-dropdown" colSpan={4}>

                            <DropDownListComponent

                                id="subject"

                                placeholder="Subject - Teacher"

                                data-name="Subject"

                                className="e-field"

                                style={{ width: '100%' }}

                                dataSource={allSubjects}

                                fields = {{text: 'Subject', value: 'Id'}}

                                value ={ props.id || 'null'}

                                change={this.onDropSubjectChange.bind(this)}

                            />

                        </td>

I am attaching an archive with the data I receive by props on the Template editor and DropDown.

Can you help me with this problem?

     

Attachment: DropDownList_screens_1d912c29.rar

[Cezar]

Any sugestion ? 

[Ruksar Moosa Sait]

Hi Cezar,

We have validated your requirement and suspect the id was not mapped properly. Hence, we suggest you change the id value as Id in the dropdown field like the below.

<DropDownListComponent

        id="subject"

        placeholder="Subject - Teacher"

        data-name="Subject"

        className="e-field"

        style={{ width: '100%' }}

        dataSource={allSubjects}

        fields = {{text: 'Subject', value: 'Id'}}

        value ={ props.Id || 'null'}

        change={this.onDropSubjectChange.bind(this)}  />                        

 

Kindly try the above solution and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait

[Cezar]

I tried but it doesn’t work.

[Mugilraj Govindarajan]

Hi Cezar,

We had validated your query at our end and we suspect that the datasource bind for dropdown list component will does not contain the externally dragged appointment subject. Because of this dropdown list component will remains null value. To resolve this, you need to provide all subject values to dropdownlist datasource property. We had prepared a sample based on your requirement

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

Kindly try the shared sample and let us know if this works at your end. If you still face any problem, please share the below details to reproduce the issue which will help us to validate the issue and provide prompt solution as soon as possible.

• Replicate the issue in above sample
• Share simple issue replicating sample if possible

Regards,
Mugilraj G

[Cezar]

with this implementation it works, but my drop down contains 2 fields:  Subject and Id (Ex:

fields={{ text: 'Subject', value: 'Id' }}

. How can I send to the actionBegin method Id from this drop down? With this implementation I will send the text. 

[Ruksar Moosa Sait]

Hi Cezar,

We have modified the sample based on your requirement by directly mapping the Subject from the datasource like the below code.

<DropDownListComponent

                id="subject"

                placeholder="Subject - Teacher"

                data-name="Subject"

                className="e-field"

                style={{ width:
'100%' }}

                dataSource={this.allSubjects}

                value={props.Subject || null}

              ></DropDownListComponent>

componentWillMount() {

    var
allEvents = extend([], dataSource.hospitalData, null, true).concat(

      extend([], dataSource.waitingList, null, true)

    );

    this.allSubjects = allEvents.map(function(e) {return
e.Subject;});

  }

Sample: https://stackblitz.com/edit/react-h37t3y-clxk31?file=datasource.json,index.js

Kindly check the above sample and let us know if you need any assistance.

Regards,

Ruksar Moosa Sait

[Cezar]

Ok .Thanks for your reply . I have one more question .

How can I validate that drop-down so that a new event cannot be created if a drop-down value has not been selected?

[Ravikumar Venkatesan]

Hi Cezar,

We have validated your requirement “How can I validate that drop-down so that a new event cannot be created if a drop-down value has not been selected?” at our end. You can add the validation to both default Schedule fields and custom fields as mentioned in the shared code snippet.

[index.js]

export class EditorTemplate extends SampleBase {

  editorTemplate(props) {

    return props !== undefined ? (

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

        <tbody>

          <tr>

            <td className="e-textlabel">Subject</td>

            <td colSpan={4}>

              <DropDownListComponent id="Subject" placeholder="Subject - Teacher" data-name="Subject" className="e-field" style={{ width: '100%' }} dataSource={this.allSubjects} fields={{ text: 'Subject', value: 'Subject' }} value={props.SubjectId || null}></DropDownListComponent>

            </td>

          </tr>

          <tr>

            <td className="e-textlabel">Clasa</td>

            <td colSpan={4}>

              <DropDownListComponent id="Class" placeholder="Clasa" data-name="Class" className="e-field" style={{ width: '100%' }} dataSource={this.classes} fields={{ text: 'name', value: 'name' }}></DropDownListComponent>

            </td>

          </tr>

        </tbody>

      </table>

    ) : (

      <div></div>

    );

  }

 

  onPopupOpen(args) {

    if (args.type === 'QuickInfo' && !args.target.classList.contains('e-appointment')) {

      // To prevent opening quick info popup on cell click action

      args.cancel = true;

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

      // Adding validation to custom fields

      const formElement = args.element.querySelector('.e-schedule-form');

      var validator = formElement.ej2_instances[0];

      validator.addRules('Class', { required: true });

    }

  }

 

  render() {

    return (

      <div className="schedule-control-section">

        <ScheduleComponent

          eventSettings={{

            dataSource: scheduleData,

            fields: {

              subject: { name: 'Subject', validation: { required: true } },

            }

          }}

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

        >

          <ViewsDirective>

            <ViewDirective option='WorkWeek' startHour='08:00' endHour='20:00' />

          </ViewsDirective>

          <Inject

            services={[WorkWeek, Resize, DragAndDrop]}

          />

        </ScheduleComponent>

      </div>

    );

  }

}

 

const mapStateToProps = state => ({

  schedulings: state.schedulings

});

UG:

https://ej2.syncfusion.com/react/documentation/schedule/editor-template/#field-validation

https://ej2.syncfusion.com/react/documentation/schedule/editor-template/#apply-validations-on-editor-template-fields

Demo:

https://ej2.syncfusion.com/react/demos/#/material/schedule/editor-validation

Kindly let us know if you need any further assistance.

Regards,

Ravikumar Venkatesan

Attachment: ej2reactschedulewithfieldvalidation_a5026241.zip

[Cezar]

Thank you very much for all assistance .

[Satheesh Kumar Balasubramanian]

Hi Cezar,

Thanks for the update.

We are happy that your problem has been resolved now.

Regards,

Satheesh Kumar B

[rohan chaudhary]

Hi All i am getting issue in setting the default value in react tree grid inside a dropdownlistcomponent can anyone help me out . using functional component.

const  CoaAccountCategories =

[ { "AccountID": 26, "AccountCode": "0100", "AccountName": "Assets", "BalanceSheet": true, "Status": true, "Posting": null, "SubLevel": 0, "Code": "A", "AccountTypeId": 4, "ParentId": null }, { "AccountID": 35, "AccountCode": "0400", "AccountName": "Liabilities", "BalanceSheet": true, "Status": true, "Posting": null, "SubLevel": 0, "Code": "L", "AccountTypeId": 5, "ParentId": null } ]

<ColumnDirective

headerText="Action"

width="50"

field="AccountTypeId"

template={(props) => (

  <DropDownListComponent

  dataSource={CoaAccountCategories}

  ref={(dropdownlist) => {

    listObj = dropdownlist;

  }}

  fields={{text: 'Code', value: 'AccountTypeId'}}

  value={props.AccountTypeId || null}

  popupHeight="220px"

/>

)}

/>

[Pon Selva Jeganathan]

Hi Rohan,

Greetings from Syncfusion.

The reported problem occurs only when TreeGrid datasource doesn’t contain AccountTypeId (Dropdown fields.value). For your query, we have prepared sample based on the provided code and we have used your datasource for treeGrid and dropDownList which is working as expected. If the TreeGrid datasource contains the AccountTypeId field, then kindly share the TreeGrid datasource details to proceed further. Refer below attached sample.

Sample - 3yvb8b (forked) - StackBlitz 

Regards,

Pon selva