1. Feedback
  2. JavaScript
  3. 10537

Welcome to the JavaScript feedback portal. We’re happy you’re here! If you have feedback on how to improve the JavaScript, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

0
Votes

Dual List Box - Sort order is not valid when drag/dropping

I have both the toolbars and drag/drop active with 2 lists - when I move items to the destination using toolbar, the values in the "dataSource" are in the correct order - but when I drag/drop items, they always get added to the start of the list, no matter where I drop them, so the "dataSource" is in the wrong order - which is what I pull data from for an AJAX post that I use to save settings.


Here is a sample of the data + code I am using:


const source = [

    {

        "fieldId": "4452e287-3f11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Evictions",

        "displayName": "Eviction Amount"

    },

    {

        "fieldId": "4452e288-3f11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Evictions",

        "displayName": "Eviction Ordered Date"

    },

    {

        "fieldId": "4552e288-3f11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Forclosure & Insurance",

        "displayName": "Foreclosure Loan Amount"

    },

    {

        "fieldId": "4552e289-3f11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Forclosure & Insurance",

        "displayName": "Foreclosure Start Date"

    },

    {

        "fieldId": "298e512e-3c11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Property Detail",

        "displayName": "Address"

    },

    {

        "fieldId": "c0320b92-3e11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Property Detail",

        "displayName": "Asset Manager"

    },

    {

        "fieldId": "bb320b92-3e11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Property Detail",

        "displayName": "Borrower Name"

    },

    {

        "fieldId": "bd320b92-3e11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Property Detail",

        "displayName": "City"

    },

    {

        "fieldId": "2a8e512e-3c11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Property Detail",

        "displayName": "Client Name"

    },

    {

        "fieldId": "4652e288-3f11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Property Detail",

        "displayName": "Has Repairs"

    },

    {

        "fieldId": "b8320b92-3e11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Property Detail",

        "displayName": "Last Updated"

    },

    {

        "fieldId": "ba320b92-3e11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Property Detail",

        "displayName": "Loan Number"

    },

    {

        "fieldId": "2b8e512e-3c11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Property Detail",

        "displayName": "Property Id"

    },

    {

        "fieldId": "2d8e512e-3c11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Property Detail",

        "displayName": "Property Type"

    },

    {

        "fieldId": "be320b92-3e11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Property Detail",

        "displayName": "State"

    },

    {

        "fieldId": "2c8e512e-3c11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Property Detail",

        "displayName": "Status"

    },

    {

        "fieldId": "bc320b92-3e11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Property Detail",

        "displayName": "Street Address"

    },

    {

        "fieldId": "b9320b92-3e11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Property Detail",

        "displayName": "Updated By"

    },

    {

        "fieldId": "bf320b92-3e11-ea11-bbb3-f01faf3b76d3",

        "groupName": "Property Detail",

        "displayName": "Zip"

    }

];

const dest = [

];


window._listSource = new ej.dropdowns.ListBox({

    allowDragAndDrop: true,

    allowFiltering: true,

    dataSource: source,

    //fields: { text: 'displayName', value: 'fieldId', groupBy: 'groupName' },

    fields: { text: 'displayName', value: 'fieldId' },

    filterType: 'Contains',

    height: '300px',

    noRecordsTemplate: '',

    scope: '#list-destination',

    toolbarSettings: { items: ['moveTo', 'moveFrom', 'moveAllTo', 'moveAllFrom'] },

});

window
._listSource.appendTo('#list-source');


window
._listDestination = new ej.dropdowns.ListBox({

    allowDragAndDrop: true,

    dataSource: dest,

    fields: { text: 'displayName', value: 'fieldName' },

    height: '300px',

    scope: '#list-destination',

    noRecordsTemplate: '',

    toolbarSettings: { items: ['moveUp', 'moveDown'] },

});

window
._listDestination.appendTo('#list-destination');