Combobox: prevent first request when using DataSource

Question

Good morning,We have quite a few of this scenario, a detail page with several Comboboxes, all of which we have the initial/default value in hand, so, we'd like to know if somehow we can prevent the controller from making the first API request.Here's the example: https://stackblitz.com/edit/nmjqek-7cycoh?file=index.tsIf we monitor Network, it actually makes two initial requests. Imagine this scenario with 20 comboboxes in the page, it makes lots of unnecessary calls.Thank you for the help.

Ponmani Murugaiyan · Answer

Hi Davi, 

Greetings from Syncfusion support. 

We have validated your reported query. We would like to inform you that that, you have given as string type for value property. But the Employee ID is int type, So we request you to modify as like the below code snippet to get rid of the reported issue. Please find the test sample below for reference. 

[Index.ts] 





    let loader: HTMLElement; 
    // initialize AutoComplete component 
    let atcObj1: ComboBox = new ComboBox({ 
        // bind the DataManager instance to dataSource property 
        dataSource: new DataManager({ 
            url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees', 
            adaptor: new WebApiAdaptor, 
            crossDomain: true 
        }), 
        // bind the Query instance to query property 
        query: new Query().select(['EmployeeID']).take(10).requiresCount(), 
        // map the appropriate columns to fields property 
        fields: { value: 'EmployeeID',  text: 'EmployeeID' }, 
        // set the placeholder to AutoComplete input element 
        placeholder: 'e.g. 1', 
        // enable the autofill property to fill a first matched value in input when press a down key 
        autofill: true, 
        value: 1, 
        allowFiltering: true, 
    }); 
    atcObj1.appendTo('#products'); 



Sample: https://stackblitz.com/edit/nmjqek-grxwtp?file=index.ts 

Regards, 
Ponmani M

Davi Daniel Siepmann · Answer

Hi,

Well, this does not change anything, the two initial requests are already made. If I have 20 ComboBoxes in my page, they'll make 40 "unnecessary" API calls, and fetch hundreds of records that I don't need.

My question is, can I tell the ComboBox to not do this first request (well, those two first requests)?

Please, see Networking to understand my point. See, also, attached file.

Attachment: twoinitialrequests_70ac0479.7z

Ponmani Murugaiyan · Answer

Hi Davi, 

Sorry for the inconvenience caused. 

Both are requests made to the server. The first request is made from service worker in the browser. For more information regarding this, please find the below link for reference. 

https://developers.google.com/web/fundamentals/primers/service-workers 

https://stackoverflow.com/questions/33590378/status-code200-ok-from-serviceworker-in-chrome-network-devtools  

Regards, 
Ponmani M

shamsmehra · Answer

Hi,i like this community but i need some help

Ponmani Murugaiyan · Answer

Hi shamsmehra, 

Greetings from Syncfusion support. 

Could you please raise the query. We are hear to help you with pleasure. 

Regards, 
Ponmani M

Davi Daniel Siepmann · Answer

Hi,With all do respect, I have the feeling you guys don't want to answer my question.Right after initialization, the AutoComplete does an initial request to the server when an initial value is given. I need to know if it have a config so it stops doing this request.

Ponmani Murugaiyan · Answer

Hi Davi, 

As per our previous update, the another request is made from service worker of the Chrome browser. So, we could not stop the request. If it's a request for Employees, it will fire off a fetch() request for the same URL, and then call event.respondWith() using that response. The first Employees entry in the screenshot, the one with "(from ServiceWorker)" in the "Size" column, is there by virtue of the fact that we called event.respondWith() inside the fetch handler. The second Employees entry in the screenshot, the one with the little gear icon next to it and "(from cache)" in the "Size" column, represents that fetch() request that was made inside the service worker while responding to the event 





  

Regards, 
Ponmani M

Davi Daniel Siepmann · Answer

Hi you all,I'm gonna try this one last time, than I give up.I'm not questioning how and why the the request(s) is done, I need to know if we can prevent it from happening. That's all I need to know.I'm sending you a Gif. You'll see, as soon as I give it an initial "value", it fires a request at page/ComboBox initialization. I need to prevent this from hapenning, the ComboBox already has the ID, and that's the only thing I fetch from API, so there's no reason to fire this request.Attachment: cbinitialrequest_f380b73e.7z

Ponmani Murugaiyan · Answer

Hi Davi, 
We have checked the reported requirement. We will update the pre-select value to the component by comparing the provided value with data source based on the fetched data. If the pre-select value matched with data source then we will update the corresponding value to the component. 
When set the pre-select value to the component, then request must send to the server. If we prevent this action, value did not fetch from the server. So, we suggest you to set the required value to element of the component as mentioned in the below code example. This will lead to prevent the request sent to the server on initialization. 
Here, we have set the value to the component in the created event and makes that value as active element in the popup, we have bind the value in the dataBound event since it be fired after data fetched from the server.  




    // initialize ComboBox component 
    let comboBoxObj1: ComboBox = new ComboBox({ 
    // bind the DataManager instance to dataSource property 
    dataSource: new DataManager({ 
            url: 'https://ej2services.syncfusion.com/production/web-services/api/Employees', 
            adaptor: new WebApiAdaptor, 
            crossDomain: true 
        }), 
        // bind the Query instance to query property 
        query: new Query().select(['FirstName', 'EmployeeID']).take(10).requiresCount(), 
        // map the appropriate columns to fields property 
        fields: { text: 'FirstName', value: 'EmployeeID' }, 
        // set the placeholder to ComboBox input element 
        placeholder: 'Select a name', 
        // set the height of the popup element 
        popupHeight: '200px', 
        // sort the resulted items 
        sortOrder: 'Ascending', 
        created: function(args){ 
            comboBoxObj1.element.value = "Janet Leverling"; // To set the value to the component 
        }, 
        dataBound: function(args){ 
            comboBoxObj1.value = 3; // to make the provided value selected state on popup opening  
        } 
    }); 
    comboBoxObj1.appendTo('#customers'); 
 
Please find the sample from the below link. 
Sample Link: https://stackblitz.com/edit/qrnifx?file=index.ts 
Regards, 
Ponmani M

shamsmehra · Answer

Hi shamsmehra, 

Greetings from Syncfusion support. 

Could you please raise the query. We are hear to help you with pleasure. 

Regards, 
Ponmani M Thanks for such a quick response! I have the query! :)Thanks. .

Ponmani Murugaiyan · Answer

Hi Shamsmehra, 

Thanks for the update. 

Please post the query in detail, if you need technical assistance. 

Regards, 
Ponmani M