Dropdownlist Itemtemplate and filtered items

[Jeff Butterworth]

I have a dropdown using a list of objects:

The data property is:

searchContactList: []

Then I have a function called getExistingContacts() which does a remove ajax call and then assigns the data like this:

getExistingContacts: function (query) {
     // stuff in here to get data remotely

      self.searchContactList = [];    

     for (let item of result.Data.Items) {          

          self.searchContactList.push({ID: item.ID,Name: item.FirstName + " " + item.LastName});

     }

}

Then on the html:

<ejs-dropdownlist                                               

     v-model="searchContactID"

     :data-source="searchContactList"        

     :fields="dropdownMap"                                             

     :allowfiltering="true"

     :filtering="getExistingContacts"   ></ejs-dropdownlist>

Now on the standard dropdownlist this works just fine. As soon as I add an item-template, it doesn't work. The template is defined like this:

var contactLookupTemplateVue = Vue.component("contactLookupTemplate", {
    template: `<span>Hello {{data.Name}}</span>`,    

    data() {        

       return {            

           data: {}        

       };    

    }

});

If I use a list of objects that is NOT filtered and an item-template, it's ok. 

If I use a filtered list of objects (as above) and no item-template, it's ok.

BUT if I use a filtered list of objects AND an item template, it doesn't work.

As soon as I start typing in the dropdownlist, I can debug and see my code is correctly building the list but the list of dropdown items does not change.

[Berly Christopher]

Hi Jeff Butterworth, 

  

Greetings from Syncfusion support. 

  

We have checked the shared code example and you have modified the data source of the DropDownList component in the filtering event directly. Due to this, updated data not reflected in the data source. So, we suggest you to use the custom filtering with help of updateData() method with modified data source as mentioned in the below code example. 

  

  let query = new Query(); 

      //frame the query based on search string with filter type. 

      query = 

        e.text !== "" ? query.where("Name", "startswith", e.text, true) : query; 

      //pass the filter data source, filter query to updateData method. 

      e.updateData(this.searchContactList, query); 

 

  

Please refer the below documentation to know more about this functionality. 

UG Link: https://ej2.syncfusion.com/vue/documentation/drop-down-list/filtering/#filtering 

  

Regards,  

Berly B.C 

[Jeff Butterworth]

Hi Berly

I have been able to implement the code you provided but it doesn't help. Without the itemtemplate on the dropdown, the filtering works. With the itemtemplate it just keeps telling me there are no records. The list in the dropdown just doesn't populate.

I simplied the template to be as follows (which I think is the most basic it can be) and it doesn't want to display any items.

template: `<span>{{data.Name}}</span>`

As soon as I remove the itemtemplate from the dropdownlist, it works again. 

Regards

Jeff

[Berly Christopher]

Hi Jeff Butterworth, 

  

We have checked the dropdownlist component based on the shared code example. But the reported issue does not occur at our end. Can you please share any issue reproducing sample that will help us to validate the issue and proceed further from our end? 

  

Regards, 

Berly B.C