How to Get Selected Value in Multiselect Dropdown

Naga Padmasree

Asked On October 23, 2019 11:35 AM UTC

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())

Reply | Reply with quote

Sureshkumar P [Syncfusion]

Replied On October 24, 2019 07:35 AM UTC

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

Reply | Reply with quote

Naga Padmasree

Replied On October 24, 2019 10:30 AM UTC

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>

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.

Reply | Reply with quote

Sureshkumar P [Syncfusion]

Replied On October 25, 2019 08:44 AM UTC

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

Reply | Reply with quote

Naga Padmasree

Replied On October 25, 2019 10:15 AM UTC

Thank You its working :)

Reply | Reply with quote

Berly Christopher [Syncfusion]

Replied On October 28, 2019 12:35 PM UTC

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

Reply | Reply with quote

Naga Padmasree

Replied On November 6, 2019 09:42 AM UTC

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

Reply | Reply with quote

Sureshkumar P [Syncfusion]

Replied On November 7, 2019 06:46 AM UTC

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()

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

Reply | Reply with quote

Krishna Prasad

Replied On November 8, 2019 06:39 AM UTC

Thank You issue Resolved.

Reply | Reply with quote

Sureshkumar P [Syncfusion]

Replied On November 11, 2019 10:03 AM UTC

Hi Naga,

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

Regards,

Sureshkumar P

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
148516	Oct 23,2019 11:35 AM UTC	Nov 11,2019 10:03 AM UTC	ASP.NET Core - EJ 2	9

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US