Change the url in the Datamanager by the v-model ?

[Franky Lee]

Hi Team,

I try the example:

<template>
<div id="app">
    <div id="wrapper1">
        <ejs-textbox floatLabelType="Auto" placeholder="Enter a name" v-model="value"></ejs-textbox>
    </div>
</div>
</template>
<script>
import Vue from 'vue';
import { TextBoxPlugin } from '@syncfusion/ej2-vue-inputs';
Vue.use(TextBoxPlugin);

export default {
 data: function(){
        return {
            value: null
        }
    }
}

and at the same page I use the dropdownlist

<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
        <br>
        <ejs-dropdownlist id='dropdownlist' placeholder='Select a customer' sortOrder='Ascending' :dataSource='dataSource' :query='query' :fields='fields'></ejs-dropdownlist>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(DropDownListPlugin);
import { DataManager,Query,ODataV4Adaptor } from "@syncfusion/ej2-data";
export default {
  data (){
    return {
        query :  new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6),
        dataSource : new DataManager({
          url: 'http://services.odata.org/V4/Northwind/Northwind.svc/',
          adaptor: new ODataV4Adaptor,
          crossDomain: true
          }),
        fields: { text: 'ContactName', value: 'CustomerID' }
    }
  }
}

Is there a simple method to change the url in dataManager by v-model 

For example, url: 'http://mydatabase.com/value' from the <ejs-textbox></ejs-textbox>

Thanks,

[Sureshkumar P]

Hi Franky, 

 

Greetings from Syncfusion support. 

 

Based on your shared information, we suspect that you want to change the dropdownlist data source URL based on the textbox two-way binding variable. But the dropdown data source URL does not support two-way binding. So we suggest you to change the data source URL based on textbox change event.  

 

Please find the code example here: 

<template> 

<div id="app"> 

    <div id="wrapper1"> 

        <ejs-textbox floatLabelType="Auto" placeholder="Enter a name" :change="UrlChange"></ejs-textbox> 

        <ejs-dropdownlist id='dropdownlist' ref='dropdownObj' placeholder='Select a customer' sortOrder='Ascending' :dataSource='dataSource' :query='query' :fields='fields'></ejs-dropdownlist> 

    </div> 

</div> 

</template> 

<script> 

import Vue from 'vue'; 

import { TextBoxPlugin } from '@syncfusion/ej2-vue-inputs'; 

Vue.use(TextBoxPlugin); 

import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns"; 

Vue.use(DropDownListPlugin); 

import { DataManager,Query,ODataV4Adaptor } from "@syncfusion/ej2-data"; 

 

export default { 

 data: function(){ 

        return { 

            query :  new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6), 

        dataSource : new DataManager({ 

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

          adaptor: new ODataV4Adaptor, 

          crossDomain: true 

          }), 

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

        } 

    }, 

    methods: { 

        UrlChange: function(e) { 

         this.$refs.dropdownObj.$el.ej2_instances[0].dataSource = new DataManager({ 

          url: e.value, 

          adaptor: new ODataV4Adaptor, 

          crossDomain: true 

          }) 

        } 

    } 

} 

 

 

Regards, 

Sureshkumar P 

[Franky Lee]

Hi 

I still have some problems

my remoteData at url:'http://mydatabase.com/user' has the form [{"CustomerId":"us001", "ContactName":"Franky"},{"CustomerId":"us002", "ContactName":"Foster"}]

However,  the target:

query :  new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6),  

is added,  the status code shows the 404 Not Found.  

is there the wrong from my remoteData? 

Another question: I would like to show the selected value in dropdownlist, 

but the preselectedValue: ''us001 in the dropdownlist item will not be worked without query target?

[Sureshkumar P]

Hi Franky, 

 

Thanks for your update. 

 

Based on your shared information we cannot able to replicate the reported issue from our end. So, please update the below details to proceed further. 

1.     Please update the issue replicated sample with detailed issue replicated procedure. 

2.     Please update the Syncfusion package version. 

These details will help us to replicate the reported issue and provide exact solution as earlier as possible. 

 

Regards, 

Sureshkumar P 

[Franky Lee]

Hi,

Thanks for your reply.

The question 1 may come from my wrong code, and I will check it again.

In the question 2, I use the sample,

Sample Link       : https://codesandbox.io/s/dropdown-preselected-value-remote-data-source-lxbjh

It doesn't work when I add the 'v-model' in the <ejs-dropdownlist></ejs-dropdownlist>

But I need to observe the change of value.

Is there a simple solution?

Thanks

Franky

[Sureshkumar P]

Hi Franky, 

 

Thanks for your update. 

 

Based on your shared information and sample, we have checked and modified the sample. the sample working as expected when bind the v-model variable. Please find the modified sample below. 

 

Sample link: https://codesandbox.io/s/dropdown-preselected-value-remote-data-source-forked-4tgmr  

 

If you want to know more about two-way binding in dropdownlist component. Please refer the documentation: https://ej2.syncfusion.com/vue/documentation/drop-down-list/two-way-binding/  

 

Regards, 

Sureshkumar P