We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

140886 Nov 13,2018 07:18 AM UTC Nov 23,2018 05:39 AM UTC ASP.NET MVC 5
loading
Tags: ListBox
Alis
Asked On November 13, 2018 07:18 AM UTC

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 [Syncfusion]
Replied On November 14, 2018 05:12 AM UTC

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.  
 
 
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
Replied On November 15, 2018 07:20 AM UTC

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 [Syncfusion]
Replied On November 19, 2018 07:36 AM UTC

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
Replied On November 23, 2018 04:31 AM UTC

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 [Syncfusion]
Replied On November 23, 2018 05:39 AM UTC

Hi Alis,   

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

Regards, 
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon