DropdownList itemTemplate not render after datasource rebind

Question

itemtemplate is working properly if datasource is binded initially but after rebind it is not working

itemTemplate: function() {

return { template: Vue.component('itemTemplate', { template: `<span>{{data.itemCode}} - {{ data.itemDescription}}</span>` }) }

}

<ejs-dropdownlist :itemTemplate='itemTemplate' :popupWidth="600" :width="250" id="dropdownlist" placeholder="Select Stock" sort-order="Ascending" :allow-filtering="true" :filtering="filtering" :data-source="stockDataSource" :fields="fields" />

filtering: async function(args) {

if (args.text && args.text.length > 2) {

const result = (await apiGetStocks(args.text)).data

this.stockDataSource = result

}

as far as i researched before this bug is solved for angular but for vue it is still going

Berly Christopher · Accepted Answer

Hi Mehmet Ali SEKER, 
  
Thanks for sharing information to us. When changing the data source if the item template is configured, then the changes will be reflected in the popup after the close action. Due to this behavior, on data source change, the filtering will not be working on the initial time. This is the intended behavior of the template configuration.  
  
If you want to modify the data source on filtering action, we suggest you to use our updateData() method from the filtering event argument as mentioned in the below code example. 
  




  filtering: function(args) {           
        if(args.text) { 
            var proxy = args; 
            fetch("https://61ae9610a7c7f3001786f8cc.mockapi.io/api/syncfusionapitest/remoteDropDownDataSource") 
            .then((response) => response.json()) 
            .then((body)=> { 
              console.log(body.data) 
              var dropdown_query = new Query(); 
              dropdown_query = (proxy.text !== '') ? dropdown_query.where('Name', 'contains', proxy.text, true) : dropdown_query; 
              proxy.updateData(body.data,dropdown_query); 
            }) 
        } 
      }, 
  
Modified sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/dropdownFilter_(2)-1242945395  
  
Regards, 
Berly B.C

Ponmani Murugaiyan · Answer

Hi Mehmet, 

Thanks for contacting Syncfusion support. 

We checked your reported query. But unfortunately we couldn’t replicate the reported issue in our end. As per your provided information prepared sample and attached below for reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dropdown-602697380 

Kindly check with the above sample. If issue still exists or whether we misunderstood query, please revert us with simple issue replicating sample which helps us to check and provide you the solution at earliest. 

Regards, 
Ponmani M

Mehmet Ali SEKER · Answer

Hi Ponmani thank you for your interestActually the problem is occuring when using filtering.Normally, if the itemTemplate is not used, the captured data appears directly in the pop-up, but when we use the itemtemplate, it says no record found.I attached project files. only changed a few lines code on app.vue. Please review my sended filethanks Attachment: dropdownFilter_140f2200.rar

Berly Christopher · Answer

Hi Mehmet Ali SEKER,

Thanks for sharing information to us. When changing the data source if the item template is configured, then the changes will be reflected in the popup after the close action. Due to this behavior, on data source change, the filtering will not be working on the initial time. This is the intended behavior of the template configuration.

If you want to modify the data source on filtering action, we suggest you to use our updateData() method from the filtering event argument as mentioned in the below code example.

filtering: function(args) {

if(args.text) {

var proxy = args;

fetch("https://61ae9610a7c7f3001786f8cc.mockapi.io/api/syncfusionapitest/remoteDropDownDataSource")

.then((response) => response.json())

.then((body)=> {

console.log(body.data)

var dropdown_query = new Query();

dropdown_query = (proxy.text !== '') ? dropdown_query.where('Name', 'contains', proxy.text, true) : dropdown_query;

proxy.updateData(body.data,dropdown_query);

})

}

},

Modified sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/dropdownFilter_(2)-1242945395

Regards,

Berly B.C

Mehmet Ali SEKER · Answer

Hi Berlyunfortunality it is still not working. Please check it I typing any word in search text input it says no record found.Only If I click outside to close search popup and reclick the dropdown then I can see rendered itemTemplate resultsI dont see anything immediately after typing search text.