JavaScript (ES5) - Clear list and refresh datasource on popup open

[Andrei]

Hello,

var organizationDM = new ej.data.DataManager({

    url: "/api/System/Organization/List",

    adaptor: new ejs.data.UrlAdaptor()

});

var organizationW = new ej.dropdowns.DropDownList({

    dataSource: organizationDM,

    fields: { value: "Id", text: "DisplayName" },

    query: new ej.data.Query().take(1),

    value: @Json.Serialize(Model?.OrganizationId),

    placeholder: "Organization",

    floatLabelType: "Auto",

    showClearButton: true,

    allowFiltering: true,

    filtering: (args) => {

        var query = new ej.data.Query().where("IsActive", "equal", "true").take(10);

        query = (args.text !== "") ? query.where("DisplayName", "contains", args.text) : query;

        args.updateData(organizationDM, query);

    }

}, "#OrganizationId");

I see that two queries are sent to server - the first is to populate the popup list and the second one is for the value selected.

1. I would like to cancel the first query if that's possible.

2. Before opening the popup list, I would like to refresh the list by sending the same query mentioned in the filtering event (but to keep the current selected value in the list even if it's not active)

Thanks,

Andrei

[Andrei]

I've noticed that I've chosen the wrong category. It should be DropDownList.

[Ponmani Murugaiyan]

Hi Andrei, 

Greetings from Syncfusion support. 

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 dropdownOBj: DropDownList = new DropDownList({ 

    // 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){ 

        (dropdownOBj.element as any).value = "Janet Leverling"; 

    }, 

    dataBound: function(args){ 

        dropdownOBj.value =  "3"; 

    } 

}); 

dropdownOBj.appendTo('#customers'); 

Sample: https://stackblitz.com/edit/qrnifx-pzdks6?file=index.ts 

Regards, 

Ponmani M