Multiselect component values lag one click behind
Hello, I am trying to use a simple multiselect drop down to act as a filter for a chart.
When I unselect the data from my dropdown, my chart refreshes properly. However I am noticing that when I select the values again, the selected values are not updating as I would expect. Here is my code for the component
<ejs-multiselect id="@Html.IdFor(m => m.SelectedValues)"
ejs-for="SelectedValues" dataSource="@Model.ValuesToSelect"
mode="CheckBox" showDropDownIcon="true"
removed="updateFilter" select="updateFilter" >
<e-multiselect-fields text="Text" value="Value"></e-multiselect-fields>
</ejs-multiselect>
and here is my function (for sake of this example I don't show the code that goes to my server to update the chart, just shows what values I selected from the component)
<script>
function updateFilter(){
var filterValues = document.getElementById("SelectedValues").ej2_instances[0].value;
console.log(filterValues)
}
</script>
the issue is that when I look at the log of filterValues, it does not match what I select in my drop downs, it "lags" by one button click;
Here is the list when I load it.
When I unselect all, as expected my console.log gives an empty [ ]
you can see the console logging the value getting smaller as each item is checked off until it is empty.
Now I try to go back and click the values in the drop down, say I click on publication
the value remains empty.
Now I click on another check box (Close Out)
Console.log only logs 1 value, and that value is for Publication, not for close out
If I keep going clicking one by one, I will eventually select all the items in the drop down but my filterValues will always have one item missing.
Is this a bug? Am I doing something incorrectly?
Please advise.
Jorge
SIGN IN To post a reply.
3 Replies
Hi Jorge,
Thanks for contacting Syncfusion support.
Query: I will eventually select all the items in the drop down but my filterValues will always have one item missing.
We were able to reproduce the reported scenario using the provided code snippet. You are trying to access the component value using instance in Multiselect’s select event, which is causing the problem. However, only after the select event process is completed, the component value property will update. But you are attempting to get the value before the select event has completed. So, we suggest you to achieve your scenario using setTimeout in select event to meet your requirement.
|
<form method="post">
<ejs-multiselect id="multiselectfor" name="val" dataSource="@Model.data" placeholder="e.g. Basketball" ejs-for="@Model.val" mode="CheckBox" showDropDownIcon="true"
removed="updateFilter" select="updateFilter" showSelectAll="true">
</ejs-multiselect>
<div id="errorMessage">
<span asp-validation-for="val"></span>
</div>
<div id="submitbutton">
<ejs-button id="submitButton" content="Submit"></ejs-button>
</div>
</form>
<script>
function updateFilter(args) {
setTimeout(() => {
var filterValues = document.getElementById("multiselectfor").ej2_instances[0].value;
console.log(filterValues);
});
}
</script> |
 |
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Core_Multiselect-523567757
Also, we would like to suggest alternate solution to achieve your requirement, which is change event along with ChangeOnBlur property as false, fires the change event on every value selection and remove
ChangeOnBlur property: https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.MultiSelect.html#Syncfusion_EJ2_DropDowns_MultiSelect_ChangeOnBlur
Regards,
Ponmani M
SIGN IN To post a reply.
