Combo Box - Vue JS - DB table to fetch and update on selectIndexChanged

Posted by: eric.devwise on 6 February 2019, 8:44 pm EST

  • Posted 6 February 2019, 8:44 pm EST

    I have a vue js component that features a FlexGrid displaying poDetails. In my header above the FlexGrid, I want a ComboBox or just a simple DropDown that only binds the item-source to one field (poStatus) in the DB response ( same response as the FlexGrid). This DropDown will allow selection of ['po sent', 'receiving', 'received']. In the DB, poStatus is an INT.

    My issues are:

    Coming from the DB is one INT > poStatus is 0,1, or 2
    In the DropDown I need an array of strings > ['po sent', 'receiving', 'received']

    How can I do axios.get and only use poStatus out of all the data in the response? Can I do this in mounted even after I fetch the data for the FlexGrid...it's the same route

    Also how can I cast the number to string to display in dropdown, and then on selectedIndexChanged, cast string back to number to post in DB?

    Finally, what is confusing me is that only one number comes from the DB for poStatus, yet the dropdown needs an array. How can this function from getting and setting the DB like this?

    So far what I have:

      mounted(){
    axios.get('/get_po_details/'+po)
    .then(response => (this.data = new wjCore.CollectionView(response.data.poDetails,{
    pageSize:50
    }), this.data.filter = this.filter));

    axios.get('/get_po_details/'+po)
    .then(response => {
    if(response.data.poDetails[0].poStatus == 1) {
    return this.poStatus = ['receiving', 'received', 'po sent']
    }else if(response.data.poDetails[0].poStatus == 2) {
    return this.poStatus = ['received', 'po sent', 'receiving']
    }else{
    return this.poStatus = ['po sent', 'receiving', 'received']
    }
    });

    },

    THIS IS HACKY AND DOESN'T LOOK RIGHT

    Attached to: <wj-combo-box id="setStatus" class="po-status" :selected-index-changed="updateStatusDropDown" :items-source="poStatus" placeholder="select po status"></wj-combo-box></div>

    updateStatusDropDown(s,e) {
    let current = s.selectedValue;
    let sendStatusArray = [];
    let statusValue = null;
    if(current == 'po sent') {
    let statusValue = 0;
    let sendStatusArray = [{poStatus: 0, poNumber: this.poNumber}];
    axios.post('/updatePoStatus', sendStatusArray)
    .then(response => console.log(response));
    } else if(current == 'receiving') {
    let statusValue = 1;
    let sendStatusArray = [{poStatus: 1, poNumber: this.poNumber}];
    axios.post('/updatePoStatus', sendStatusArray)
    .then(response => console.log(response));
    } else if(current == 'received') {
    let statusValue = 2;
    let sendStatusArray = [{poStatus: 2, poNumber: this.poNumber}];
    axios.post('/updatePoStatus', sendStatusArray)
    .then(response => console.log(response));

    }


    Thank you for your feedback!

  • Replied 7 February 2019, 6:36 am EST

    Hi,

    If we understand correctly then you would like to have a combobox outside the grid in which display value and selected value are different.
    This can be easily achieved by setting selected-value-path and display-member-path property of the combo-box.
    Please refer to the following code snippet:
    // pre cb source like following
    let map = [
    { text: "A", value: 0 },
    { text: "B", value: 1 },
    { text: "C", value: 2 }
    ];
    // assign selected-value-path and display-member-path properties
    <wj-combo-box
    :initialized="init"
    :items-source="map"
    :selected-value-path="'value'"
    :display-member-path="'text'"
    :selected-value="selVal"
    :selected-index-changed="cbChange"
    ></wj-combo-box>
    // perform action on value change
    cbChange(cb) {
    // update this.selVal to keep things in sync
    this.selVal = cb.selectedValue;
    // post to db if required
    console.log("selected value: ", cb.selectedValue);
    console.log("selected text: ", cb.selectedItem.text);
    },

    You may also refer to the following sample which demonstrates the same:
    https://codesandbox.io/s/qq76kv7qyw

    Please let us know if you had a different requirement than this.

    ~Sharad
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels