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!
Thanks for joining our community and helping improve Syncfusion products!
There are some issues causing problems for me:
1 - The most critical problem, when I have "allowFiltering" on and I do a search, the filtering works, and I can drag/drop or use the toolbars to move filtered elements over - but the moment I try to update the filter, the list will only show the filtered items - I can no longer find anything.
For example with the sample dataset below, search for "prop" - move over one or two items, then change the search to "mod" nothing shows up - wipe out the filter, only shows the remaining "prop" elements it found
The sample I have below is a tiny subset of the data we are using - we have over 600 elements our users can choose from - so filtering is critical.
2 - We have grouping active, and when I use the toolbar to move "all" elements between to the list, it includes the "Groups" - while in list 2 I do not have grouping active (we just want to show the individual elements the are using in the 2nd list, and not group them to allow the user to sort the output any way they desire)
3 - Unable to move individual elements back out of the destination list via the toolbar - so when I have a few items moved over, and I select one in the destination list, the moveFrom icon doesn't become active. NOTE: if you select something in the source list AFTER you have selected an item in the destination, it then becomes active, but that is not logical for a user experience.
Here is a the JS code I am using to test this out:
const source = [
Bold BI
Bold Reports
BoldDesk { "fieldName": "status", "groupName": "Property Detail", "displayName": "Property Status", "filterType": "enumeration", "filterSource": "PropertyStatus" }, { "fieldName": "modified", "groupName": "Property Detail", "displayName": "Last Modified", "filterType": "date", "filterSource": null }, { "fieldName": "property_type", "groupName": "Property Detail", "displayName": "Property Type", "filterType": "enumeration", "filterSource": "PropertyType" }, { "fieldName": "property_id", "groupName": "Property Detail", "displayName": "Property Id", "filterType": "number", "filterSource": null }, { "fieldName": "borrower", "groupName": "Property Detail", "displayName": "Borrow Name", "filterType": "text", "filterSource": null }, { "fieldName": "client_id", "groupName": "Property Detail", "displayName": "Client", "filterType": "lookup", "filterSource": "ClientId" }, { "fieldName": "am_id", "groupName": "Property Detail", "displayName": "Asset Manager", "filterType": "lookup", "filterSource": "AssetManagerId" }, { "fieldName": "evict_ordered_dt", "groupName": "Evictions", "displayName": "Eviction Ordered Date", "filterType": "date", "filterSource": null }, { "fieldName": "fc_loan_amount", "groupName": "Forclosure & Insurance", "displayName": "Foreclosure Loan Amount", "filterType": "number", "filterSource": null }];
const dest = [
];
const listSource = new ej.dropdowns.ListBox({allowDragAndDrop: true,
allowFiltering: true,
dataSource: source,
fields: { text: 'displayName', value: 'fieldName', groupBy: 'groupName' },filterType: 'Contains',
height: '300px',
noRecordsTemplate: '',
scope: '#list-destination',
toolbarSettings: { items: ['moveTo', 'moveFrom', 'moveAllTo', 'moveAllFrom'] },});
listSource.appendTo('#list-source');const listDestination = new ej.dropdowns.ListBox({allowDragAndDrop: true,
dataSource: dest,
fields: { text: 'displayName', value: 'fieldName' },height: '300px',
scope: '#list-destination',
noRecordsTemplate: '',
toolbarSettings: { items: ['moveUp', 'moveDown'] },});
listDestination.appendTo('#list-destination');