How to Get Selected Value in Multiselect Dropdown

[Naga Padmasree]

Hi,

How can i get selected value in multiselect dropdown.

 @(Html.EJS().MultiSelect("ddlFilterEmployee")

                                                                                                                                         .AllowFiltering()

                                                                                                                                         .FloatLabelType(FloatLabelType.Auto)

                                                                                                                                         .Width("100%").ShowSelectAll(true).ShowDropDownIcon(true)

                                                                                                                                         .DataSource(datasource => datasource.Url(@Url.Action("GetEmployees"))

                                                                                                                                                       .Adaptor("UrlAdaptor"))

                                                                                                                                         .Mode(Syncfusion.EJ2.DropDowns.VisualMode.CheckBox)

                                                                                                                                         .Fields(df => df.Text("Text").Value("Value"))

                                                                                                                                         .Placeholder(Localizer["Employee ID"].Value)

                                                                                                                                         .Select("onSelect")

                                                                                                                                         .Render())

[Sureshkumar P]

Hi Naga, 

 

Greetings from Syncfusion support. 

 

With shared code we have validated your requirement. Using our inbuild value property, we can get the selected value in the multiselect component Please refer to the block of code below. 

 

// Instance created on multiselect component 

        var multiselectObj = document.getElementById('ddlFilterEmployee').ej2_instances[0]; 

        // Get the selected value through Value property 

        console.log(multiselectObj.value); 

 

Regards, 

Sureshkumar P 

[Naga Padmasree]

Hi,

If i use Select("onSelect") and writing that code in that function i am getting null as checkbox is checked after the function.

how to get the value on click and write a function for that multiselect component.

  @(Html.EJS().MultiSelect("ddlFilterEmployee")

                                                                                                                                                 .AllowFiltering()

                                                                                                                                                 .FloatLabelType(FloatLabelType.Auto)

                                                                                                                                                 .Width("100%").ShowSelectAll(true).ShowDropDownIcon(true)

                                                                                                                                                 .DataSource(datasource => datasource.Url(@Url.Action("GetEmployees"))

                                                                                                                                                               .Adaptor("UrlAdaptor"))

                                                                                                                                                 .Mode(Syncfusion.EJ2.DropDowns.VisualMode.CheckBox)

                                                                                                                                                 .Fields(df => df.Text("Text").Value("Value"))

                                                                                                                                                 .Placeholder(Localizer["Employee ID"].Value)

                                                                                                                                                 .Select("onSelect")

                                                                                                                                                 .Render())

                            </div>

<script>

 function onSelect() {

        // Instance created on multiselect component 

        var multiselectObj = document.getElementById('ddlFilterEmployee').ej2_instances[0];

        // Get the selected value through Value property 

        console.log(multiselectObj.value); 

    }

</script>

Thank You.

[Sureshkumar P]

Hi Naga,

Your requirement has been validated in the selected event our component model value has not been updated. That's why null value is returned by the value property. In the change event we can get the value property. If you want the selected value to be obtained by select event, you can receive the value by using the event argument as below. 

 

Kindly refer the below code block. 

function OnSelect(args) { 

        var multiselectObj = document.getElementById('ddlFilterEmployee').ej2_instances[0]; 

        console.log(args.itemData[multiselectObj.fields.value]); 

    } 

 

For your convenience we created a sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/forum/148516/ze/DropDownList270257173  

 

Regards, 

Sureshkumar P 

[Naga Padmasree]

Thank You its working :)

[Berly Christopher]

Hi Naga, 

 

We are glad  to hear that issue is resolved at your end. Please revert us if you need further assistance on this. We will be happy to assist you.  

 

Regards, 

Berly B.C 

[Naga Padmasree]

Hi,

If we want to have selected Checkboxes values in onSelect function how can we achieve that in syncfusion EJ2 Multiselect.

I want to send checked checkboxes values to controller.

Thank You

[Sureshkumar P]

Hi Naga, 

 

We can get the single selected value in the select event. We suggest using the change event instead of the select event to get the all selected value from value property. Also, we would like to say we have given new property to trigger change event while select the value through multiselect using “ChangeOnBlur”.  

 

Kindly refer the code block. 

 

@using Syncfusion.EJ2; 

@using Syncfusion.EJ2.Inputs; 

 

@Html.EJS().MultiSelect("ddlFilterEmployee").Change("OnChange").ChangeOnBlur(false).Placeholder("Select a Country").PopupHeight("200px").DataSource(dataManger => 

    dataManger.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").CrossDomain(true)).Fields(new Syncfusion.EJ2.DropDowns.MultiSelectFieldSettings 

    { 

        Value = "shipCountry", Text="shipCountry" 

    }).Render() 

 

<script> 

    function OnChange() { 

        var multiselectObj = document.getElementById('ddlFilterEmployee').ej2_instances[0]; 

        console.log(multiselectObj.value); 

    } 

</script> 

 

For your convenience we have modified the previous sample based on your requirement. please refer the sample here: https://www.syncfusion.com/downloads/support/forum/148516/ze/DropDownList517788674  

 

Regards, 

Sureshkumar P 

[Krishna Prasad]

Thank You issue Resolved.

[Sureshkumar P]

Hi Naga, 

 

Thanks for your update. Please get back to us if you need further assistance on this 

 

Regards, 

Sureshkumar P