1. Feedback
  2. Vue
  3. 18475

Welcome to the Vue feedback portal. We’re happy you’re here! If you have feedback on how to improve the Vue, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Custom function/api call for "dataSource" and "query" attributes

Hello,

I was going through the data binding demo for multiselect dropdown for vue, and I saw the following code for binding remote data to the control :

<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
        <br>
        <ejs-multiselect id='multiselect' sortOrder='Ascending' :dataSource='customerData' :query='query' :fields='fields' placeholder="Select a customer"></ejs-multiselect>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { MultiSelectPlugin } from "@syncfusion/ej2-vue-dropdowns";

Vue.use(MultiSelectPlugin);
import { Query, DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
export default {
  data (){
    return {
      customerData : new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
      }),
      query : new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6),
      fields : { text: 'ContactName', value: 'CustomerID' }
    }
  }
}

</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
</style>

This means that for the dataSource we need to specify a DataManager with the url to the api and the results need to be in a specified format. 

For the query attribute we specify the query that returns the results from a table in that dataSet.


In our application, we are using axios to make api calls and get the results in a custom json format. We are trying to use the multiselect control in a way that on each key press it makes an api call and it gives a list of suggestions which are returned from the api in a json format and then bound to the suggestions list in drop down, so we need a custom method to be bound to the dataSource or the query attribute.

Is there a way currently to accomplish that? Can we use DataManager to specify an api call that gets a custom json response and then query that custom json using the syncfusion Query plugin?


If not can we request an added functionality where we can specify a custom api call to bind data for suggestions in dropdown?


Please let me know if you have any questions regarding this.


Thanks & Regards

Dhruv