Branched from forum-173400

Question

Hi Pavithra,I have explored so many of your documentations on drop down but couldn't find a suitable help for this problem. 1. I have a drop down and a textbox. The drop down is bind to a datasource, so when l select an item from drop down the textbox should be populated with its corresponding value from the server/database. For exampleEmployeeId Firstname 001 Mark 002 Mary 003 Sabina So, when l select EmployeeId ‘002’ from the drop down then ‘Mary’ would be displayed in the textbox. Kindly assist2. I also want how to do the above scenario for grid too. export class EmployeeComponent implements OnInit { reactForm: FormGroup;public textboxValue;public height: string = '250px'; constructor(public service: employeeService, private formBuilder: FormBuilder) { } ngOnInit() {this.textboxValue='';this.reactForm = new FormGroup({ 'EmployeeId': new FormControl('', [FormValidators.required]), 'FirstName': new FormControl('', [FormValidators.required]) }); let formId: HTMLElement = document.getElementById('formId');document.getElementById('formId').addEventListener( 'submit', (e: Event) => { e.preventDefault(); if (this.reactForm.valid) { this.service.postemployee(this.reactForm.value).subscribe( res=>{ this.reactForm.reset(); }, err => { console.log(err);} ) } else { // validating whole form Object.keys(this.reactForm.controls).forEach(field => { const control = this.reactForm.get(field); control.markAsTouched({ onlySelf: true }); }); } }); } public data: DataManager = new DataManager({ url: 'api/Employees', adaptor: new WebApiAdaptor() }); public fields: Object = { text: 'FirstName', value: 'FirstName' };public query: Query = new Query().from('Employees').select(['FirstName']).take(6);;public WaterMark: string = "Select a name"; get EmployeeId() { return this.reactForm.get('EmployeeId'); } get FirstName() { return this.reactForm.get('FirstName'); } }

Add Next-of-kin Detailsspan> div>

ejs-dropdownlist> span> Employee IDlabel> div>

This field is required. div> div> div>

span> First Namelabel> div>

Please enter first name. div> div> div>

UdhayaKumar Duraisamy · Answer

Hi Charles,Query 1: 1. I have a drop down and a textbox. The drop down is bind to a datasource, so when l select an item from drop down the textbox should be populated with its corresponding value from the server/database. For example EmployeeId Firstname 001 Mark 002 Mary 003 Sabina So, when l select EmployeeId ‘002’ from the drop down then ‘Mary’ would be displayed in the textbox. Kindly assist We can show the selected item data in the Syncfusion TextBox component using the DropDownList change event and TextBox value property. Please refer to the below code snippet and sample for more detail.[app.component.html]

TextBox

Dropdownlist

[app.component.ts] export class AppComponent { @ViewChild('sample') public listObj: DropDownListComponent; public sportsData: Object[] = [ { Id: '001', Game: 'Mark' }, { Id: '002', Game: 'Mary' }, { Id: '003', Game: 'Sabina' }, ]; public fields: Object = { text: 'Id', value: 'Game' }; public height: string = '220px'; public waterMark: string = 'Select a game'; public selectedValue: string; public onChange(args: any): void { this.selectedValue = args.itemData.Game; } } Sample : https://stackblitz.com/edit/angular-1fynqn?file=app.component.html,app.component.tsQuery 2: 2. I also want how to do the above scenario for grid too. Please follow the below forum for the above query.https://forumassist.syncfusion.com/173400Regards,Udhaya Kumar D

Charles · Answer

Hi Udhaya,Thank You for your assistance. I can save form input data into sql server database when l use both combox and dropdownlist, but multiSelect dropdown does not save despite trying almost everything related to it. I can load the multiSelect dropdown with data from the database but it doen't allow save. Each time l tried to use multiSelect i get this error : HttpErrorResponseerror: {errors: {…}, type: 'https://tools.ietf.org/html/rfc7231#section-6.5.1', title: 'One or more validation errors occurred.', status: 400, traceId: '|c4ee4d4d-4d3a50537c5498da.'}headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}message: "Http failure response for http://localhost:5000/api/taskform: 400 Bad Request"name: "HttpErrorResponse"ok: falsestatus: 400statusText: "Bad Request"url: "http://localhost:5000/api/taskform"[[Prototype]]: HttpResponseBasesee codes

Task Id

Please enter a name.

Photo Employee Info

Assigned To

Please enter a name.

@Component({

selector: 'app-add-task',

templateUrl: './add-task.component.html',

styleUrls: ['./add-task.component.css']

})

export class AddTaskComponent implements OnInit {

reactForm: FormGroup;

public textboxValue;

public height: string = '200px';

constructor(public service: SharedService, private formBuilder: FormBuilder, private toastr: ToastrService) { }

ngOnInit() {

this.textboxValue='';

this.reactForm = new FormGroup({

'TaskId': new FormControl('', [FormValidators.required]),

'AssignedTo': new FormControl('', [FormValidators.required]),

});

let formId: HTMLElement = <HTMLElement>document.getElementById('form1');

document.getElementById('form1').addEventListener(

'submit',

(e: Event) => {

e.preventDefault();

if (this.reactForm.valid) {

this.service.post(this.reactForm.value).subscribe(

res=>{

this.reactForm.reset();

this.toastr.success('created successfully', 'Task detail')

},

err => { console.log(err);}

)

} else {

// validating whole form

Object.keys(this.reactForm.controls).forEach(field => {

const control = this.reactForm.get(field);

control.markAsTouched({ onlySelf: true });

});

}

});

}

get TaskId() { return this.reactForm.get('TaskId'); }

get AssignedTo() { return this.reactForm.get('AssignedTo'); }

public data: DataManager = new DataManager({

url: 'api/',

adaptor: new WebApiAdaptor()

});

public empfields: Object = { text: 'FirstName', value: 'FirstName' };

public empquery: Query = new Query().from('Employees').select(['FisrtName']).take(6);;

public empWaterMark: string = "Select a name";

}

Buvana Sathasivam · Answer

Hi Charles,We are validating your reported query. We will update you
with further details on or before Sep 26, 2022.Regards,Buvana S

UdhayaKumar Duraisamy · Answer

Hi Charles,We suggest you refer to the below
documentation to know about updating the data to the server. Documentation : https://ej2.syncfusion.com/angular/documentation/data/manipulation/#updateKindly try the above suggestion and
let us know if this meets your requirement. If we misunderstood the
requirement, we request you to provide additional details about the requirement
as mentioned below. This will help us validate the requirement further and
provide you with a better solution.
 Exact Requirement details.
 
 Please
     provide an issue replicating runnable sample.
Regards,Udhaya
Kumar D