Keep multiselect and dropdown list preselected in a form inside a modal

[Ananya Juhi]

Hi,

I have a 'add' form like template with one text field, multiselect field and dropdown field inside a modal. I give inputs to the form and save it.

When I open another edit modal, I am fetching the saved data and populating the saved data in another form in their respective fields.

My query is how to pre-populate multiselect and dropdown data in the 'edit' form ?

I have prepared a sample for the same. Please find the link below,

https://stackblitz.com/edit/angular-g5qlp1?file=src%2Fapp%2Fapp.component.html

In the sample code, there are two buttons 'Open Add Modal' and 'Open Edit Modal'. When clicked on the 'Open Add Modal' button, a modal opens with three fields (text field, multiselect and dropdown field) where user needs to enter the input. After entering inputs click on 'Save' button to save the inputs.

After saving the 'ADD FORM', now when user clicks on the 'Open Edit Modal' button, 'EDIT FORM' opens, where you can see the text field(Name) is pre populated with the saved data. 

Now I want to pre populate the multiselect and dropdown saved data as well in the 'EDIT FORM' .

Could you please edit my sample code and tell me how to achieve the above?

Thanks.

[Prince Oliver]

Hi Ananya,   

  

Thank you for contacting Syncfusion Support.   

  

You can pre-populate the multiselect and dropdown by setting value or text properties. As per your requirement, we have modified the sample by setting the value property for DropDownList and MultiSelect components to pre-select the value in the 'EDIT FORM'. Kindly refer to the following link for the modified sample: https://stackblitz.com/edit/angular-twd5bl     

  

Please find the changes made in the above sample for your reference, below   

  

Add the value properties in the HTML file for DropDownList and MultiSelect.   

<ejs-multiselect zIndex=100001 [dataSource]='multiselectdata' [fields]='dataFields' [mode]='databox' [popupHeight]='300' 

    [showDropDownIcon]='true' (select)="questionSelect($event)" (removed)="questionDeselect($event)" [selectAllText]='selectAllText' [value]="multiselectvalue" 

    showSelectAll='true'></ejs-multiselect> 

<ejs-dropdownlist zIndex=100001 [dataSource]='dropdowndata' [fields]='itemFields' (select)="itemSelect($event)" [value]="dropval" ></ejs-dropdownlist> 

Define the variables in the AppComponent class. 

  public multiselectvalue; 

  public dropval; 

Store the selected value alone instead of the entire item data in the select event handler method.   

// question selection 

questionSelect(selectEventArgs: SelectEventArgs) { 

  let seldata: any; 

  seldata = selectEventArgs.itemData.Id; 

  AppComponent.questionList.push(seldata); 

  console.log(AppComponent.questionList) 

} 

 

// question deselection 

questionDeselect(removeEventArgs: RemoveEventArgs) { 

  let itemDeselected: any; 

  itemDeselected = removeEventArgs.itemData.Id; 

  let objInedx: any; 

  objInedx = AppComponent.questionList.indexOf(itemDeselected); 

  AppComponent.questionList.splice(objInedx, 1); 

  console.log(AppComponent.questionList) 

} 

 

itemSelect(event) { 

  this.selectedItem = event.itemData.Id; 

  console.log(this.selectedItem); 

}   

In the OpenEdit method, assign the value properties for DropDownList and MultiSelect from the stored variable.   

openEdit() { 

  console.log(this.resultObj); 

  var text; 

  this.showEditModal = true; 

  this._editName = this.resultObj.employeeName 

  this.multiselectvalue = this.resultObj.questions; 

  this.dropval = this.resultObj.items; 

}  

Similarly, you can pre-select using text property instead of value property.   

  

Please let us know if you require any further assistance.   

  

Regards,   

Prince 

[Ananya Juhi]

Hi,

Thanks for updating my code and helping me.

I see, you have stored only the ids for multiselect and dropdown data and fetching the value from id.

But I need to store the entire object or array of objects. In that case, how do I achieve it ?

Thanks...

[Prince Oliver]

Hi Ananya, 

Thanks for your update. 

You can just use another static variable to store the entire object and use it in your required place. Refer to the following code. 

public static questionList: any[] = []; 

public static questionObject: any[] = []; 

 

// question selection 

questionSelect(selectEventArgs: SelectEventArgs) { 

let seldata: any; 

seldata = selectEventArgs.itemData.Id; 

AppComponent.questionList.push(seldata); 

AppComponent.questionObject.push(selectEventArgs.itemData); 

console.log(AppComponent.questionList) 

} 

 

// question deselection 

questionDeselect(removeEventArgs: RemoveEventArgs) { 

let itemDeselected: any; 

itemDeselected = removeEventArgs.itemData.Id; 

let objInedx: any; 

objInedx = AppComponent.questionList.indexOf(itemDeselected); 

AppComponent.questionList.splice(objInedx, 1); 

AppComponent.questionObject.splice(objInedx, 1); 

console.log(AppComponent.questionList) 

} 

 Or else, you can pass the entire object in the existing static variable. But you need to iterate and generate a string or number array to assign to the value property in the openEdit method. 

openEdit() { 

    console.log(this.resultObj); 

    var text, valueMultiselect = []; 

    this.showEditModal = true; 

    this._editName = this.resultObj.employeeName; 

    for(var i = 0; i < this.resultObj.questions.length; i++){ 

       valueMultiselect.push(this.resultObj.questions[i].Id); 

    } 

    this.multiselectvalue = valueMultiselect; 

    this.dropval = this.resultObj.items.Id; 

}  

Sample 

Regards, 

Prince 

[Ananya Juhi]

Hi,

Can you please tell me how can I get the instance of dropdown in the modal (inside this method, "openEdit()" ) provided in the example.

link is here,

https://stackblitz.com/edit/angular-u1btxp?file=src/app/app.component.ts

thanks...

[Prince Oliver]

Hi Ananya, 

Thank you for you update. 

In your shared sample, you are trying to access the DropDownList’s instance in the (openEdit method) click handler of “Open Edit Modal” button. Since the Dialog has been created using ngIf condition, therefore if the conditions fail, then the dialog element and references will be removed from the page. So, in the button click event, we cannot access its instance. But you can achieve your requirement by using beforeOpen event in the dialog control. Kindly refer to the following code snippet. 

[HTML] 

<ejs-dialog #modaldialog class="modal" [isModal]='true' [closeOnEscape]=false *ngIf="showEditModal == true" [buttons]='editbtns' (beforeOpen) = 'onOpen($event)'></ejs-dialog> 

[TS] 

@ViewChild('editdropdown') 

public editDropDown: DropDownListComponent; 

 

onOpen(args: any) { 

     console.log(this.editDropDown); 

} 

Kindly refer to the following link for the updated sample: https://stackblitz.com/edit/angular-evrv6c 

Regards, 

Prince