ejDropDownList with Angular - Remote Data with Remote Filtering

[Yann Bruneau]

Hello,

I am trying to use the ejDropDownList with remote Data :

<select ej-dropdownlist e-fields-text="XXX" e-fields-value="ID" e-datasource="data" e-enableFilterSearch="true" e-filterType="contains" e-allowVirtualScrolling="true" e-virtualScrollMode="ej.VirtualScrollMode.Normal" e-itemsCount="20" e-value="data.XXX" e-watermarkText=""> </select>

$scope.data= ej.DataManager({ url: "XXXX", adaptor: new ej.UrlAdaptor() });

public object XXX([FromBody] DataManager dm)

I do get the initial 20 records, but when I try to search, the query is never send back to the server.

What did I miss? I cannot load all the record in the dropdownlist and make the filtering on the client side because I have 100 000 records.

Thank you,

Yann

[Ezhil S]

Hi Yann,

Thank you for contacting Syncfusion support.

Query #1: I do get the initial 20 records
                Based on the code sample shared, it looks like that VirtualScrolling is not implemented with the DropDownList and only 20 items loaded based on e-itemCount value given. To overcome this issue, we suggest you to pass the e-virtualScrollMode value as string “normal” or “continuous” directly.
Sample link: https://jsplayground.syncfusion.com/ttx2xlzz

Query #2: when I try to search, the query is never send back to the server
                Search will be applied only on the list items loaded in the page and it will not send request back to the server. In virtual scrolling initially items are loaded based on itemsCount value and on every scroll items will be fetched from the server, where on enabling search filtering is applied only for the items available at that time in the pop up. So there will be no request back to server on filter search.
                However we can achieve this scenario using continuous scroll mode and handling the request processing to server manually in search event. We can get the search key and send request to server from search event to fetch items based on search key programatically to update the pop up items. If this is the scenario you need to obtain with virtual scrolling and search, we can consider this as a custom sample and provide you further details. Or else explain us your requirement, so that we can provide you an alternative solution.

Please let us know if you have any other queries.

Regards,
Ezhil S

[Yann Bruneau]

Hello Ezhil,

Thank you for your answer.

"If this is the scenario you need to obtain with virtual scrolling and search, we can consider this as a custom sample and provide you further details." -> Yes, this is exactly what I need

I would love to see a sample of that.

Thank you,

Yann

[Yann Bruneau]

Hello,

Do you have any timing for the sample?

"If this is the scenario you need to obtain with virtual scrolling and search, we can consider this as a custom sample and provide you further details."

Thank you,

Yann

[Arun Palaniyandi]

Hi Yann,

Thanks for the patience.

We have prepared a sample based on your requirement. So please kindly find the attached sample below.

https://www.syncfusion.com/downloads/support/directtrac/149250/ze/RemoteSearch-1765161988

Please let us know if you have any other queries.

Regards,
Arun P

[Yann Bruneau]

Hi Arun,

Thank you for your sample. It is exactly what I needed.

I still need to make some adaptation to make it works on my piece of code.

Do you plan to include this feature in the February service pack? I do think that this feature should be a candidate to be part of the included feature of the dropdownList.

Thank you for your time,

Yann

[Arun Palaniyandi]

Hi Yann,

Thanks for the suggestion.

Query :”Do you plan to include this feature in the February service pack? I do think that this feature should be a candidate to be part of the included feature of the dropdownList.”

In the given sample, we have overridden some of existing functionalities to achieve the required scenario. If we are merging with source level, it will leads to multi selection maintenance issue when do searching in DropDownList control, so we have provided as custom sample to avoid those issues in users end.

Please let us know if you have any other concerns.

Regards,
Arun P

[Yann Bruneau]

Hello,

I am using the sample you sent me and I have a issue.

When you type at the regular speed, you get a "No suggestion" but when you type very slowly, then you find what you are looking for...

Is there is timeout somewhere I could increase?

Please see the 2 attached screenshots.

Thank you,

Yann

Attachment: Timeout_4f428953.zip

[Yann Bruneau]

Sorry, Second point: What is the best way to set the Value and Text of the dropdownbox with a value that is not in the current page?

I still need to be two way angular binded.

Thank you

[Arun Palaniyandi]

Hi Yann,

Thanks for the update,

Query 1 : “When you type at the regular speed, you get a "No suggestion" but when you type very slowly, then you find what you are looking for...Is there is timeout somewhere I could increase?”

No need to extend any time interval in code execution. This is because, time taken to fetch the date from remote have extended, so that “No Suggestion” will be shown on DropDownlist Items. So we suggest you include the following highlighted line in Search event method

<code>
function onSearch(args) {
                window.search = args;
               
                if (!window.searchFlag) {
                                …..
                }
                else {
                    args.cancel = true;
                    console.log("continuous search have restricted");
                }
            }
</code>

Please find the modified sample for your reference below:
https://www.syncfusion.com/downloads/support/forum/121736/ze/RemoteSearch1502254616

Query 2: “What is the best way to set the Value and Text of the dropdownbox with a value that is not in the current page?

We can select the items through value property but the given value must be available on list items which have already loaded in DropDownlist otherwise it won’t select that particular items.  This is because, we will compare the given value with loaded items values and then select the particular items.

Please let us know if you have any queries,

Regards,
Arun P

[Yann Bruneau]

Hello,

Query #1: Thank you!

Query #2: Should I add the value to the datamanager or directly to the dropdownList? Maybe there is a simple way to add this data to the datamanager after it get the data from the server?

Thank you,

Yann

[Arun Palaniyandi]

Hi Yann,

Thanks for the patience,

Query:  Should I add the value to the datamanager or directly to the dropdownList? Maybe there is a simple way to add this data to the datamanager after it get the data from the server?”

We have an option to preselect the items while fetching the data from server, This can be done by using ‘Selected’ property under fields in Dropdownlist control. it will select the items which is mentioned with selected property while scrolling on popup for virtual items.  

Please find the below API Link:
https://help.syncfusion.com/aspnet/dropdownlist/databinding

Please find the sample for the scenario :
https://jsplayground.syncfusion.com/3fyh5isy

Please let us know if you have any concerns.
Regards,
Arun P