Syncfusion listbox drag and drop not working when one of the list box is empty

[Alis]

Hello,

I have the following code for drag and drop in syncFusion list box:

@Html.EJ().ListBoxFor(Model => Model.Inclusions).Width("100%").Datasource(Model.Inclusions).ListBoxFields(incl => incl.Text("Label").Value("TypeOfInclusionId")).AllowDrag(true).AllowDrop(true).Enabled(true).EnablePersistence(true)

@Html.EJ().ListBoxFor(Model => Model.Exclusions).Width("100%").Datasource(Model.Exclusions).ListBoxFields(excl => excl.Text("Label").Value("TypeOfInclusionId")).AllowDrag(true).AllowDrop(true).Enabled(true).EnablePersistence(true)

When the exlusion listbox contains at least one element, then I can do the drag and drop, but when the listbox is empty (any of them), then I cannot drag from listbox inclusion and drop in listbox exclusion and vice versa.

Any idea why? 

[Deepa Loganathan]

Dear Alis,  

 

Thanks for contacting Syncufsion support.  

 

We have checked the reported issue in the drag drop action of Listboxfor with a sample to replicate the issue at our end. Sorry, but we were unable to replicate it. 

 

For your reference, we have attached the sample that we did try at our end and is available for download under the below link.  

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/220260/ze/ListBoxForMVC1365846797  

 

After cross checking with the above sample, if the issue still persists, kindly get back to us with the following details that would help us assist you better.  

 

1.      Are you facing any script error while during drag drop action? 

2.      The controller and view page of your sample. 

 

Regards,  

Deepa L. 

 

[Alis]

Hello Deepa,

I have tried the sample you send and it works fine.  However I am still getting the same error on my application.

I am not getting any javascript error during drag and drop.

Below is my ajax call to :

         function UpdateExclusionInclusion() {

             $.ajax({

                 url: '/Services/GetInclusionsExclusions' 

                 type: "POST",

                 async: true,

                 success: function (data) {

                     $("#ExclusionInclusionList").html(data);

                    return true;

                },

                 error: function (xhr) {

                     alert("An error occurred while getting list of inclusions and exclusions");

                     return false;

                 }

            });

         }

My controller action:

public ActionResult GetInclusionsExclusions ()

        {

            InclusionsExclusionsViewModel inclusionsExclusionsViewModel = GetInclusionsExclusionsViewModel(;

            return PartialView("~/Views/Shared/Partials/InclusionsExclusions/_InclusionsExlusions.cshtml", inclusionsExclusionsViewModel);

        }

The partial view as is:

@model WebMVC.ViewModels.Service.InclusionsExclusionsViewModel

<div class="form__section form__section--bg mdl-shadow--2dp mb-30 p-20">

    <div class="form__section-col form__section-col--lg">

        <div class="tree-view">

            <div class="tree-view__col">

                <div class="tree-view__toolbar">

                    <h4 class="tree-view__title">Inclusions</h4>

                </div>

                @Html.EJ().ListBox("Inclusions").Width("100%").Datasource((IEnumerable<object>)Model.Inclusions).ListBoxFields(incl => incl.Text("Label").ID("TypeOfInclusionId")).AllowDrag(true).AllowDrop(true).Enabled(true).EnablePersistence(true)

                

                    

            </div>

            <div class="tree-view__control">

                <i class="icon-chevron-left"></i>

                <i class="icon-chevron-right"></i>

            </div>

            <div class="tree-view__col">

                <div class="tree-view__toolbar">

                    <h4 class="tree-view__title">Exclusions</h4>

                </div>

                    @Html.EJ().ListBox("Exclusions").Width("100%").Datasource((IEnumerable<object>)Model.Exclusions).ListBoxFields(excl => excl.Text("Label").ID("TypeOfInclusionId")).AllowDrag(true).AllowDrop(true).Enabled(true).EnablePersistence(true)

            </div>

        </div>

    </div>

</div>

@Html.EJ().ScriptManager()

Whenever I have at least one value in one of the ListBox, it is working.  It does not allow drop when the listbox is empty.

[Deepa Loganathan]

Hi Alis,  

 

We regret the inconvenience.  

 

We have tried to reproduce the reported issue with the code as provided with Partial view in your last update but we were unable to reproduce it at our end.  

 

So, could you please kindly share an issue reproducible sample for replicating the issue at our end, so that we can proceed further? 

 

Regards,  

Deepa L. 

[Alis]

Hello Deepa,

The issue was due to the listbox being in an <li> tag.

It is working fine now.

Thanks for the help.

[Prince Oliver]

Hi Alis,   

Thank you for your update. We are glad to help you. 

Regards, 

Prince