1. Home
  2. Forum
  3. Blazor
  4. Drag and drop has broken for ListBox as of latest version (18.3.0.38) if inside in an sfTab

Drag and drop has broken for ListBox as of latest version (18.3.0.38) if inside in an sfTab

Hi,
After upgrading to 18.3.0.38 the drag and drop has stopped working if listbox is inside in a tab control.
Code as follows

ListBoxDragDrop


@page "/listboxdragdrop"
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Lists
@using Syncfusion.Blazor.Navigations
   
       
           
               
                   
               
               
                   
                       
                           

Group A @GroupA.Count()

                           
                               
                           
                       
                       
                       
                           

Group B @GroupB.Count() - @listbox2?.Value

                           
                               
                           

                       
                   
               
           
       
   


@code{
    SfListBox listbox1;
    SfListBox listbox2;

    private List GroupA = new List {
        new ListData { Name = "Australia", Code = "AU" },
        new ListData { Name = "Bermuda", Code = "BM" },
        new ListData { Name = "Canada", Code = "CA" },
        new ListData { Name = "Cameroon", Code = "CM" },
        new ListData { Name = "Denmark", Code = "DK" },
        new ListData { Name = "France", Code = "FR" },
        new ListData { Name = "Finland", Code = "FI" },
        new ListData { Name = "Germany", Code = "DE" },
        new ListData { Name = "Hong Kong", Code = "HK" }
    };
    private List GroupB = new List {
        new ListData { Name = "India", Code = "IN" },
        new ListData { Name = "Italy", Code = "IT" },
        new ListData { Name = "Japan", Code = "JP" },
        new ListData { Name = "Mexico", Code = "MX" },
        new ListData { Name = "Norway", Code = "NO" },
        new ListData { Name = "Poland", Code = "PL" },
        new ListData { Name = "Switzerland", Code = "CH" },
        new ListData { Name = "United Kingdom", Code = "GB" },
        new ListData { Name = "United States", Code = "US" }
    };
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if (firstRender)
            StateHasChanged(); // Re-render component to update the ListBox component Scope references in each connected ListBox.
    }
    public class ListData
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }
}

3 Replies
MK Mohan Kumar Ramasamy Syncfusion Team October 13, 2020 10:27 AM UTC

Hi Fergus, 
 
We have checked your reported query, we are able to reproduce the reported issue in our end. To resolved this issue,we suggest to call StateHasChanged method in Listbox Created event. Please refer below code snippets. 
 
 
<SfListBox @ref="listbox1" DataSource="@GroupA" Scope="@listbox2" TItem="ListData" AllowDragAndDrop="true" Height="330px" TValue="string[]"> 
 <ListBoxFieldSettings Text="Name" Value="Code"></ListBoxFieldSettings> 
 <ListBoxEvents Created="Created" TValue="string[]" TItem="ListData"></ListBoxEvents> 
                            </SfListBox> 
@code { 
private void Created() 
    { 
        StateHasChanged(); 
    } 
} 
 
For your reference, we have prepared a sample based on this, please refer below link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohan kumar R 


FE Fergus October 13, 2020 11:37 AM UTC

Hi,
That did work to let me drag and drop, thanks,  but when the listbox is down the page a bit further inside the tab then the dragged tile does not line up as per the code below.
If you change the div above the listbox from 500px to 1500px then you will not see the tile at all when being dragged.

ListBoxDragDrop


@page "/listboxdragdrop"
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Lists
@using Syncfusion.Blazor.Navigations
   
       
           
               
                   
               
               
                   
                       
                       
                           
                               

Group A @GroupA.Count()

                                   
                                       
                                   
                           
                           
                           
                               

Group B @GroupB.Count() - @listbox2?.Value

                                   
                                       
                                   
                           
                       
                   
               
           
       
   


@code{
    SfListBox listbox1;
    SfListBox listbox2;

    private List GroupA = new List {
        new ListData { Name = "Australia", Code = "AU" },
        new ListData { Name = "Bermuda", Code = "BM" },
        new ListData { Name = "Canada", Code = "CA" },
        new ListData { Name = "Cameroon", Code = "CM" },
        new ListData { Name = "Denmark", Code = "DK" },
        new ListData { Name = "France", Code = "FR" },
        new ListData { Name = "Finland", Code = "FI" },
        new ListData { Name = "Germany", Code = "DE" },
        new ListData { Name = "Hong Kong", Code = "HK" }
    };
    private List GroupB = new List {
        new ListData { Name = "India", Code = "IN" },
        new ListData { Name = "Italy", Code = "IT" },
        new ListData { Name = "Japan", Code = "JP" },
        new ListData { Name = "Mexico", Code = "MX" },
        new ListData { Name = "Norway", Code = "NO" },
        new ListData { Name = "Poland", Code = "PL" },
        new ListData { Name = "Switzerland", Code = "CH" },
        new ListData { Name = "United Kingdom", Code = "GB" },
        new ListData { Name = "United States", Code = "US" }
    };
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await base.OnAfterRenderAsync(firstRender);
        if (firstRender)
            StateHasChanged(); // Re-render component to update the ListBox component Scope references in each connected ListBox.
    }
    public class ListData
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }
}

MK Mohan Kumar Ramasamy Syncfusion Team October 14, 2020 03:53 PM UTC

Hi Fergus, 
 
We have checked your reported query, we are unable to reproduce the reported issue in our end.  
 
If you are still facing the issue, kindly share the below details. 
 
  • If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample
Please provide the above requested information, based on that we will check and provide you a better solution quickly. 
 
Regards 
Mohan kumar R 


Loader.
Up arrow icon