Multiselect with checkbox not allowing me to uncheck initially checked values.

[Thomas L Crittendon]

I am attempting to do some basic things with the multiselect control. In this scenario, I need to precheck some items from session data and then whenever the selected items are changed I need to rewrite that session data to reflect the new selections. 

The following is an example of my code, I bolded the relevant areas that seem to be giving me trouble: 

<ejs-multiselect id="businessUnitsGlobal" dataSource="@Model.BusinessUnits" mode="CheckBox" placeholder="Business Units" created="businessUnitsGlobal_created" change="businessUnitsGlobal_change" width="150px" popupWidth="150px" cssClass="mb-1" showSelectAll="true" showDropDownIcon="true" filterBarPlaceholder="Search" popupHeight="350px">

    <e-multiselect-fields text="Name" value="Id"></e-multiselect-fields>

</ejs-multiselect>

<script>

    function businessUnitsGlobal_created(sender)

    {

        var url = "@Url.Action("GetBusinessUnits", "Session")";        

        ajaxPost(url, null, businessUnitsSession_loaded);

    }

    function businessUnitsSession_loaded(response)

    {

        if (response != null)

        {

            var businessUnitsGlobal = $("#businessUnitsGlobal")[0].ej2_instances[0];

            businessUnitsGlobal.value = response.split(",");

        }

    }

    function businessUnitsGlobal_change(args)

    {

        if (args.isInteracted)

        {

            var selectedBusinessUnits = args.value.join(",");

            var url = "@Url.Action("SetBusinessUnits", "Session")";

            var data = { businessUnits: selectedBusinessUnits };

            ajaxPost(url, data, null);

        }

    }

</script>

So, as you can see, when the multiselect created event is fired, I grab the values that need to be preselected and set the value of the multiselect to that. This much works fine. Also, whenever I change the multiselects value, it accurately writes the new selection data back to the session. But the values that I select in that initial "created" event will not uncheck. I click on them and they just stay selected. 

Any help on this is greatly appreciated. 

[Berly Christopher]

Hi Thomas, 

  

Greetings from Syncfusion support. 

  

Based on the provided details, we have checked the MultiSelect component with change event. But the reported issue is not occurred and we can unselect the values which are selected in the created event. For your convenience, we have prepared the sample and attached it below. 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelect_163619-1778096738  

  

Please check the sample and share any video demonstration for the reported issue or issue reproducing sample and Syncfusion product version that will help us to check and proceed further at our end.  

  

Regards, 

Berly B.C 

[Thomas L Crittendon]

Thank you for your response. After reviewing the sample you posted, I realized the only fundamental difference was the datatype of the value that is being bound. In my example, The Id that I'm binding the value to is an int on the C# side of things. If I change this to a string (like your example uses), then the problem seems to be resolved.

This is an unusual caveat for a control but I can work with it for now. 

[Berly Christopher]

Hi Thomas, 

  

Thanks for sharing information to us. 

  

Based on the shared information, we have changed the value property type as int for MultiSelect component. But the reported issue is not occurred at our end. For your convenience, we have prepared the sample and attached it below. 

  

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

  

Please check the above sample and still issue persists, modify the attached sample with the reported issue that will help us to check and provide the prompt solution in our end. 

  

Regards, 

Berly B.C