Custom Dropdown List has same value and label

[rehanrehanParticipant]

I have been trying to implement this Custom Dropdown List

Here is my code

<template>
    <div>
        this is a test

        <JqxGrid ref="myGrid" @cellselect="myGridOnCellSelect($event)" @cellendedit="myGridOnCellEndEdit($event)"
                 :width="getWidth" :source="dataAdapter" :columns="columns"
                 :editable="true" :autoheight="true" :selectionmode="'singlecell'">
        </JqxGrid>

        <div ref="eventLog" style="font-size: 13px; margin-top: 20px; font-family: Verdana"></div>
    </div>
</template>

<script>
    import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";

    export default {
        components: {
            JqxGrid
        },
        data: function () {
            return {
                getWidth: '90%',
                dataAdapter: new jqx.dataAdapter(this.source),
                columns: [
                    {
                        text: 'Tax', datafield: 'valtaxgroups_id', displayfield: 'valtaxgroups_id', columntype: 'dropdownlist',
                        createeditor: (row, value, editor) => {
                            editor.jqxDropDownList({ width: '99%', height: 27, source: this.countriesAdapter, displayMember: 'label', valueMember: 'value' });
                        }
                    }
                ]
            }
        },
        beforeCreate: function () {

            const countries = [
                { value: 1, label: 'usama' },
                { value: 2, label: 'rehan' },
                { value: 3, label: 'foo' },
                { value: 4, label: 'bar' },
                { value: 5, label: 'foobar' },
                { value: 6, label: 'barfoo' },
                { value: 7, label: 'rehanfoo' }

            ];

            const countriesSource = {
                datatype: 'array',
                datafields: [
                    { name: 'value', type: 'string' },
                    { name: 'label', type: 'string' }
                ],
                localdata: countries
            };

            this.countriesAdapter = new jqx.dataAdapter(countriesSource, { autoBind: true });

            this.source = {
                datatype: 'array',
                localdata:
                    [
                        { valtaxgroups_id: 5 },
                        { valtaxgroups_id: 2 },
                        { valtaxgroups_id: 2 },
                        { valtaxgroups_id: 3 },
                        { valtaxgroups_id: 4 },
                        { valtaxgroups_id: 7 }
                    ],
                datafields: [
                    // name - determines the field's name.
                    // value - the field's value in the data source.
                    // values - specifies the field's values.
                    // values.source - specifies the foreign source. The expected value is an array.
                    // values.value - specifies the field's value in the foreign source.
                    // values.name - specifies the field's name in the foreign source.
                    // When the adapter is loaded, each record will have a field called 'Country'. The 'Country' for each record comes from the countriesAdapter where the record's 'countryCode' from gridAdapter matches to the 'value' from countriesAdapter.
                    { name: 'valtaxgroups_id', value: 'valtaxgroups_id', values: { source: [
                { value: 1, label: 'usama' },
                { value: 2, label: 'rehan' },
                { value: 3, label: 'foo' },
                { value: 4, label: 'bar' },
                { value: 5, label: 'foobar' },
                { value: 6, label: 'barfoo' },
                { value: 7, label: 'rehanfoo' }

                            ], value: 'value', name: 'label' } }
                ]
            };
        },
        methods: {
            myGridOnCellSelect: function (event) {
                let column = this.$refs.myGrid.getcolumn(event.args.datafield);
                let value = this.$refs.myGrid.getcellvalue(event.args.rowindex, column.datafield);
                let displayValue = this.$refs.myGrid.getcellvalue(event.args.rowindex, column.displayfield);
                this.$refs.eventLog.innerHTML = '<div>Selected Cell<br/>Row: ' + event.args.rowindex + ', Column: ' + column.text + ', Value: ' + value + ', Label: ' + displayValue + '</div>';
            },
            myGridOnCellEndEdit: function (event) {
                let column = this.$refs.myGrid.getcolumn(event.args.datafield);
                debugger;
                let container = this.$refs.eventLog;
                if (column.displayfield !== column.datafield) {
                    container.innerHTML = '<div>Cell Edited:<br/>Index: ' + event.args.rowindex + ', Column: ' + column.text + '<br/>Value: ' + event.args.value.value + ', Label: ' + event.args.value.label
                        + '<br/>Old Value: ' + event.args.oldvalue.value + ', Old Label: ' + event.args.oldvalue.label + '</div>';
                }
                else {
                    container.innerHTML = '<div>Cell Edited:<br/>Row: ' + event.args.rowindex + ', Column: ' + column.text + '<br/>Value: ' + event.args.value
                        + '<br/>Old Value: ' + event.args.oldvalue + '</div>';
                }
            }
        }
    }
</script>

<style>
</style>

When I try to run this, the value and label both are the same

For example
id : 1, label : rehan

In my case, the label and value both are usama for some reason, Can you guide me through on what part is the problem in the code?

[HristoParticipant]

Hello rehanrehan,

It looks you did not follow the example at all points.
Into the main DataAdapter’s source where is the “valtaxgroups_id“ you use the same value for the name and value.
And also, you should add a DataAdapter into the source of this field:
Try to change it like this:
{ name: 'valtaxgroups', value: 'valtaxgroups_id', values: { source: this.countriesAdapter.records, value: 'value', name: 'label' } }
instead of this:
“{ name: ‘valtaxgroups_id’, value: ‘valtaxgroups_id’, values: { source: [ /* array of objects */ ], value: ‘value’, name: ‘label’ }”

Also, you should change it on the columns datafield (valtaxgroups_id) and displayfield (valtaxgroups).

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts