Refresh Data

[Prangya Tiwari]

Hi,

Data is pushing from server.here the need is to refresh control.How would i do that?Please provide some examples.

[Gopi Govindasamy]

Hi Prangya,  

Thanks for using Syncfusion EJ2 components. 

We have checked your requirement for dropdownlist component refresh while server data pushed. We suspect that you are expecting to load data form remote server, In our component by default provided this support using datamanager, we no need to refresh the component after load the server data on this case. Please refer the below screenshots, demo and documentation link. 

let dropDownListObj: DropDownList = new DropDownList({ 

    // bind the DataManager instance to dataSource property 

    dataSource: new DataManager({ 

        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers', 

        adaptor: new ODataV4Adaptor, 

        crossDomain: true 

    }), 

    // bind the Query instance to query property 

    query: new Query().select(['ContactName', 'CustomerID']).take(25), 

    // map the appropriate columns to fields property 

    fields: { text: 'ContactName', value: 'CustomerID' }, 

    // set the placeholder to DropDownList input element 

    placeholder: 'Select a customer', 

    // sort the resulted items 

    sortOrder: 'Ascending', 

    // set the height of the popup element 

    popupHeight: '200px' 

}); 

dropDownListObj.appendTo('#customers'); 

 

Demo link: https://ej2.syncfusion.com/15.4.23/demos/#/material/dropdownlist/data-binding.html  

Document link: https://ej2.syncfusion.com/15.4.23/documentation/drop-down-list/data-binding.html?lang=typescript#binding-remote-data  

If you want dynamically push the specific data from the server after rendered the DropDownList, we have provided the addItem() public method which can be pushed to the already DropDownList loaded data, you don’t need to refresh the component because we have handled in the source.  

 

We have prepared the simple sample based on above requirement. On this sample, we are pushed the dynamic data to DropDownList on button click. Please refresh the below code. 

document.getElementById('first').onclick = () => { 

    let dataSource: any = new DataManager({ 

        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers', 

        adaptor: new ODataV4Adaptor, 

        crossDomain: true 

    }); 

    let query: query = new Query().select(['ContactName', 'CustomerID']).take(1); 

    dataSource.executeQuery(query).then((e: any) => { 

        dropDownListObject.addItem({ Id: e.result[0].CustomerID, Game: e.result[0].ContactName }, 0); 

    } 

 

Sample Link: https://plnkr.co/edit/QkxHiIoHoj78LuGfTefh?p=preview  

API Link: https://ej2.syncfusion.com/15.4.23/documentation/drop-down-list/api-dropDownList.html?lang=typescript#refresh  

The above sample not fulfills your requirement, Please provide us some additional details about your requirement or provided the reproducing sample. This would be helpful for us to proceed further. 

Please let us know if you have any other queries, we will happy to help you.   

Regards, 

Gopi G. 

[Prangya Tiwari]

Thank you so much

[Gopi Govindasamy]

Hi Prangya,   

  

Most Welcome. Please get back to us if you require any further assistance on this  

 

Regards,  

Gopi G.