1. Home
  2. Forum
  3. Angular - EJ 2
  4. Dropdown spinner

Dropdown spinner

I have a dropdown element that allows multiple selection, its data is populated with an api call that loads when the application starts, at the moment we open the dropdown we have all its data but, somehow it is taking around 2 to 3 seconds to open the list and show its options, is there a way to add a spinner that loads inside the dropdown while the data is being formed?

image


7 Replies
SP Sureshkumar P Syncfusion Team February 10, 2022 10:57 AM UTC

Hi Christian, 
 
We suggest you render the multiselect component with virtualization technique in the open event to improve your popup opening performance in your application.  
 
Please find the sample code here: 
public onOpen(args) { 
    let start: number = 10; 
    let end: number = 15; 
    let listElement: HTMLElement = (this.dropdownObj as any).list; 
    listElement.addEventListener('scroll', () => { 
      if ( 
        listElement.scrollTop + listElement.offsetHeight + 1 >= 
        listElement.scrollHeight 
      ) { 
        let filterQuery = new Query(); 
        new DataManager(this.data) 
          .executeQuery(filterQuery.range(start, end)) 
          .then((event: any) => { 
            start = end; 
            end += 5; 
            this.dropdownObj.addItem( 
              event.result as { 
                [key: string]: Object; 
              }[] 
            ); 
          }) 
          .catch((e: Object) => {}); 
      } 
    }); 
  } 
 
 
 
Also, when we render the component with remote data the spinner is automatically showcased to load the data. This is our default functionality. Please find the online demo for the remote data feature. 
 
 
Regards, 
Sureshkumar P 


HH Hiram Hernandez February 18, 2022 04:23 AM UTC

I have a similar case... but i create the multiselect from the TS file with a MultiselectModel... Is there a way to set the infinite scroll like in the above example?. Here is my code :

public setMultiSelect(data: any[]): IEditCell {
return {
create: () => {
this.elem = document.createElement('input');
return this.elem;
},
read: () => {
return this.multiSelectObj.value.join(',');
},
destroy: () => {
this.multiSelectObj.destroy();
},
write: (args: { rowData: object; column: any }) => {
const tempVal = args.rowData[args.column.field]
? args.rowData[args.column.field].split(',')
: [];
this.multiSelectObj = new MultiSelect({
value: tempVal,
dataSource: data,
fields: { value: 'displayValue', text: 'displayValue' },
mode: 'CheckBox',
floatLabelType: 'Never',
placeholder: 'Select Options',
popupWidth: 500,
showDropDownIcon: true,
allowFiltering: true,
filtering: (e: FilteringEventArgs) => {
let query = new Query();
query =
e.text !== ''
? (query = query.where(
'displayValue',
'contains',
e.text,
true
))
: query;
e.updateData(data, query);
},
});
this.multiSelectObj.appendTo(this.elem);
},
};
}


SP Sureshkumar P Syncfusion Team February 18, 2022 12:21 PM UTC

Hi Hiram, 
 
We will validate the requirement and update in one business day (February 21st, 2022). 
 
Regards, 
Sureshkumar P 


HH Hiram Hernandez replied to Sureshkumar P February 22, 2022 02:52 AM UTC

thank you waiting for the response :) 


SP Sureshkumar P Syncfusion Team February 22, 2022 02:42 PM UTC

Hi Hiram, 
 
We have created the sample based on your requirement. Please find the sample here:  
 
Regards, 
Sureshkumar P 


HH Hiram Hernandez February 24, 2022 02:58 AM UTC

Thank you for the soon response, i already implemented the code, and it seems that works, but i got a trouble getting the list from the multiselect Object, when i try to get the list from the multiselect Object, i get a div instead of a list, and the event scroll doesnt trigger.

          open: (args) => {
            let start: number = 10;
            let end: number = 15;
            let listElement: HTMLElement = (this.multiObj as any).list; // At this line i obtain a div instead of list
            listElement.addEventListener('scroll', () => { 
              if (
                listElement.scrollTop + listElement.offsetHeight + 1 >=
                listElement.scrollHeight
              ) {
                let filterQuery = new Query();
                new DataManager(data)
                  .executeQuery(filterQuery.range(start, end))
                  .then((event: any) => {
                    start = end;
                    end += 5;
                    this.multiObj.addItem(
                      event.result as {
                        [key: string]: Object;
                      }[]
                    );
                  })
                  .catch((e: Object) => {});
              }
            });
          }



SP Sureshkumar P Syncfusion Team February 24, 2022 12:41 PM UTC

Hi Hiram, 
 
Query 1: when i try to get the list from the multiselect Object, i get a div instead of a list 
 
In this case we can get the div element (wrapper element of list element). So,  the scroll event bind for the parent element of list.  
 
Query 2: the event scroll doesnt trigger.  
  
       Based on your query, the scroll event is not triggering when you try to scroll the list in the multiselect component rendered in the cell edit of the EJ2 Grid. We tried to replicate the same but we were not able to reproduce the issue. We have attached a video of the same for your convenience.  
 
 
 
If you still face this issue, please try to reproduce the mentioned issue in the sample provided or share a sample to reproduce the issue.  
 
Please get back to us for further details. 
 
Regards, 
Sureshkumar P 


Loader.
Up arrow icon