How to get value from multi select dropdown

[KINS]

I have an sfmulti select combobox with "ID" and "Name" column binded.

I would like to know to how to get "ID" And "Name" value in value change event.

Note:-

I would like to set "ID" value in Textbox1 with comma seperated (1,4,85) in Value change event

I would like to set "Name" value in Textbox2 with comma separated (Name1,Name4,Name85) in value change event 

[Ponmani Murugaiyan]

Hi KINS, 

You can get the ID and Name using the selected event argument and store the value separately in the list as SelectedId and SelectedName and display it in a TextBox during focus out or Value change as per your requirement. 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Multiselect_Select2036208075 

Regards, 

Ponmani M 

[KINS]

Thanks 

[Ponmani Murugaiyan]

Hi KINS, 

Welcome, please get back us if you need further assistance. 

Regards, 

Ponmani M 

[KINS]

I have another below clarification

I have 1,2,3,4,5 five items in multi select data source.

Query1:-

if I select "4" ,then I would like to know how to prevent to add 1,2,3,5

that means, it should say "you can not add other value if "4" is present in multi select"

Query2:-

If I Select  1 or 2 or 3 or 5,and then select "4",it should say "remove all item if you select "4"

[Ponmani Murugaiyan]

 Hi KINS, 

We have prepared custom sample for your requirement using open event using JS Interop. If selected item is 4, then disabled the other items 1,2,3,5 and if the selected items is any of among 1,2,3,5 then disabled the item4, so that user cannot select the disabled item. 

[Index.razor] 

public void PopupOpen(Syncfusion.Blazor.DropDowns.PopupEventArgs args) 

    { 

        JsRuntime.InvokeVoidAsync("OnPopupOpen", "MultiSelect", this.MultiObj.Value); 

    } 

[daterange.js] 

 

window.OnPopupOpen = (id, multiValue) => { 

    console.log(id); 

    setTimeout(function (e) { 

    var instances = document.getElementById(id); 

    let LIElement = instances.blazor__instance.popupObj && instances.blazor__instance.popupObj.element.getElementsByTagName("li"); 

        var LICount = LIElement.length; 

        if (multiValue && multiValue.includes('4')) { 

            var disableItems = ['1', '2', '3', '5']; 

            for (var item = 0; item < LICount; item++) { 

                var value = LIElement[item].getAttribute('data-value'); 

                if (disableItems.includes(value)) { 

                    LIElement[item].classList.add('e-disabled'); 

                } 

            } 

        } else if (multiValue !== null) { 

            var disableItem = '4'; 

            for (var item = 0; item < LICount; item++) { 

                var value = LIElement[item].getAttribute('data-value'); 

                if (disableItem.includes(value)) { 

                    LIElement[item].classList.add('e-disabled'); 

                } 

            } 

        }         

    }, 50) 

 } 

     

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelect969657129 

Regards, 

Ponmani M 

[KINS]

Thanks for reply..

The below code Integer array value is dynamic except 4. Please advise how to do this

var disableItems = ['1', '2', '3', '5'];

[Ponmani Murugaiyan]

Hi KINS, 

Query: The below code Integer array value is dynamic except 4. Please advise how to do this. 

 

Solution1: The dynamic values will be updated in the popup, you can get the values using the popup object as like below code snippet. 

instances.blazor__instance.popupObj.element.getElementsByTagName("li"); 

 

 

 

Solution2: While updating the dynamic values to the component, you can store those values in a variable and pass the variable as additional parameter to the JS file using Interop. Then process disable Items using the Dynamic values as per your requirement. 

public void PopupOpen(Syncfusion.Blazor.DropDowns.PopupEventArgs args) 

    { 

        JsRuntime.InvokeVoidAsync("OnPopupOpen", "MultiSelect", this.MultiObj.Value, this.DynamicValues); 

    } 

 

Regards, 

Ponmani M