Dynamically change selected value and validation before selecting custom value

[Sunita]

I am using multiselect control, mode is box. I have placed it in a component and that component is used in many places in our application to select multiple/single user depending upon use case.  Pre-selected users are set by input parameter - selectedUsers.

allowCustomValue is set to true so that new user can be added. But before adding a new user (custom value) - I need to get it confirmed once using the confirmation box. If user selects 'Yes' then it goes all fine. But if user selected ' Cancel' button in confirmation box - the selected custom value is not removed from the multi-select component. So how do I remove the newly added custom value? Or how do I prevent it being added before the confirmation box result is returned?

Also another issue I am facing is - If a I dynamically add user to "selectedUsers" property from code then it does got gets selected (not displayed as a chip).

<ejs-multiselect #multiSelectUsers id='multiSelectUsers'

                         [mode]='box' [dataSource]='users'

                         [allowCustomValue]='true'

                         [allowFiltering]='true'

                         [placeholder]='placeholder'

                         [fields]='fields'

                         [value]='selectedUsers'

                         [popupWidth]='popupWidth'

                         [hideSelectedItem] ='true'

                         [maximumSelectionLength]='selectionLength'

                         (select)='onUserSelection($event)'

                         (removed)='onUserRemoved($event)'

                         (filtering)='onFilter($event)'

                         (created)='onCreated($event)'

                         (customValueSelection)='onCustomValueSelection($event)'>

        </ejs-multiselect>

onCustomValueSelection(args) {

        if (this.selectedUsers && this.selectionLength <= this.selectedUsers.length) {

            args.cancel = true;

            return

        }

      

        this.message.confirm(

            'Are you sure you want to add this new user?',

            (isConfirmed) => {

                if (isConfirmed) {

                    this.onAddUser()

                } else {

                         args.cancel = true;

                }

            });

    }

Help appreciated.

Thanks.

[Vinoth Kumar Sundara Moorthy]

Hi Sunita, 

Good day to you. 

Query 1: if user selected ' Cancel' button in confirmation box - the selected custom value is not removed from the multi-select component 

Your provided code is right. But when set the args.cancel as true in customValueSelection it will be added to the list. Because it triggers only after updating the list. So we suggest to you remove the added list and array value manually in the customValueSelection event. 

[html]  

<ejs-multiselect id='custom-list' [dataSource]='gameList' [allowCustomValue]=true [mode]='box' [placeholder]='waterMark' [fields]='fields' [value]='selectedUsers'
(customValueSelection )='onCustomValueSelection($event)' (created)="onCreation()" ></ejs-multiselect>  

 

  

 

[ts] 

 public onCustomValueSelection(args){ 

       args.cancel = true; 

       dropObj.mainList.querySelector('li[datavalue="'+dropObj.inputElement.value+'"]').remove(); 

        dropObj.mainData.pop();
} 

 

Query 2: If a I dynamically add user to "selectedUsers" property from code then it does got gets selected (not displayed as a chip). 

We are unable to reproduce the reported issue. We have updated the value when the component rendering. In created event dynamically changed the value property value and it works properly. Please refer the below code snippet, 

[html] 

 <ejs-multiselect id='custom-list' [dataSource]='gameList' [allowCustomValue]=true [mode]='box' [placeholder]='waterMark' [fields]='fields' [value]='selectedUsers'(select)='onSelection($event)' (created)="onCreation()" ></ejs-multiselect> 

 

 

[ts] 

public onCreation(){ 

     this.selectedUsers = ['Game2'];
}

 

 

Please check the below sample for your reference, 

Sample Link: https://stackblitz.com/edit/angular-vrqpcz-qyuhxr?file=app.component.ts 

Regards, 

Vinoth Kumar S 

 

[Sunita]

Hi Sunita, 

Good day to you. 

Query 1: if user selected ' Cancel' button in confirmation box - the selected custom value is not removed from the multi-select component 

Your provided code is right. But when set the args.cancel as true in customValueSelection it will be added to the list. Because it triggers only after updating the list. So we suggest to you remove the added list and array value manually in the customValueSelection event. 

[html]  

<ejs-multiselect id='custom-list' [dataSource]='gameList' [allowCustomValue]=true [mode]='box' [placeholder]='waterMark' [fields]='fields' [value]='selectedUsers'
(customValueSelection )='onCustomValueSelection($event)' (created)="onCreation()" ></ejs-multiselect>  

 

  

 

[ts] 

 public onCustomValueSelection(args){ 

       args.cancel = true; 

       dropObj.mainList.querySelector('li[datavalue="'+dropObj.inputElement.value+'"]').remove(); 

        dropObj.mainData.pop();
} 

 

Query 2: If a I dynamically add user to "selectedUsers" property from code then it does got gets selected (not displayed as a chip). 

We are unable to reproduce the reported issue. We have updated the value when the component rendering. In created event dynamically changed the value property value and it works properly. Please refer the below code snippet, 

[html] 

 <ejs-multiselect id='custom-list' [dataSource]='gameList' [allowCustomValue]=true [mode]='box' [placeholder]='waterMark' [fields]='fields' [value]='selectedUsers'(select)='onSelection($event)' (created)="onCreation()" ></ejs-multiselect> 

 

 

[ts] 

public onCreation(){ 

     this.selectedUsers = ['Game2'];
}

 

 

Please check the below sample for your reference, 

Sample Link: https://stackblitz.com/edit/angular-vrqpcz-qyuhxr?file=app.component.ts 

Regards, 

Vinoth Kumar S 

 

Hello Vinoth,

Looks like you didn't get my question correct.

When user adds a custom value - I want to ask the user if he is sure he wants to add new value -in confirmation box. If user clicks on 'Yes' in confirmation box then the value should remain their in the input box -as selected and added to the list in dropdown.  If user clicks on 'Cancel' in confirmation box then the value shouldn't be selected and not  be added in the dropdown list. I hope I am clear now.

Also with the dynamically adding items to selected list, I have modified the sample that you provided - please see - its not working their. I am trying to update the selected list on click of button.

 

Thanks,

Sunita

Attachment: htmlpage_9c50a3c3.zip

[Vinoth Kumar Sundara Moorthy]

Hi Sunita, 

  

Good day to you. 

#1 :But before adding a new user (custom value) - I need to get it confirmed once using the confirmation box. If user selects 'Yes' then it goes all fine. But if user selected ' Cancel' button in confirmation box - the selected custom value is not removed from the multi-select component.

As our scenario the value not be added to DropDownList. You need to replace the following code in else part to resolve the issue in your end.

Code Example 

 

args.cancel = true;

dropObj.mainList.querySelector('li[datavalue="'+dropObj.inputElement.value+'"]').remove()

dropObj.mainData.pop();

 

# 2:  If i dynamically add user to "selectedUsers" property from code then it does got gets selected (not displayed as a chip).

For adding list of values for “value” property you need to push to temp array first. Then it can be added to value property to dynamically change value. Refer the code snippet

Code Example
 

let temp: string[]| number[] | boolean[] = this.mulObj.value;

this.mulObj.value = null;

(temp as string[]).push('Game3');

this.mulObj.value = temp;

this.mulObj.dataBind();

Sample Link: https://stackblitz.com/edit/angular-vrqpcz-kpphbn?file=app.component.html

Could you please check the above sample and get back to us if you need any further assistance on this?

Regards,
Vinoth Kumar S

[Sunita]

Hello Vinoth,

Thank you for your help.

I tried code provided by you but things are not working at my end.

The confirmation box - i am not using browsers default confirm. I am using sweetalert confirmation box. The reply is returned in promise and in promise args.cancel=true is not working. Can you please provide me with the sample that is using sweetalert confirmation box? (

https://www.npmjs.com/package/sweetalert2)

Also the other code of dynamically adding selected value is not working at my end.

Is there any way / method to remove selected value (remove the chip) programmatically?

I am really trying hard to resolve this issue. 

Your help is appreciated.

Thanks,

Sunita

[Vinoth Kumar Sundara Moorthy]

Hi Sunita,  

  

Good day to you.  

  

#1:   

We have checked the reported scenario. We gone through the sweetalert confirmation box and prepared the sample. When you clicked ok in the confirmation that will be added to component. Otherwise we have removed the value from the component. Please refer the below sample  

Sample Link: https://stackblitz.com/edit/angular-vrqpcz-efxvxe?file=app.component.ts  

  

#2:  

Could you please share the issue you are facing or code snippet when you use provided dynamically adding selected value? Based on the provided information we will validate and look into the problem in our end.  

  

Regards, 

Vinoth Kumar S 

[Sunita]

Hello Vinoth,

Thank you for your support. Cancelling custom value selection based on input from  Sweetalert box is working at my end. With this, the problem  I was facing is resolved. Thank you once again.

Thanks,

Sunita

[Prince Oliver]

Hi Sunitha, 

Most Welcome. We are glad to know that the issue is resolved in your end. Let us know if you need any further assistance on this. 

Regards, 

Prince