DropDownList not show

[blackcrowParticipant]

Hello Admin.
I have form with three DropDownList(DDL). When I exported class DiaChi to use as window in other class. The first and second DDL is not shown.
Can you give me solution or example?
Below is my code.

import * as React from 'react';
import JqxForm, { IFormProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxform';
import JqxLayout, { ILayoutProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlayout';
import JqxInput, { IInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxinput';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
import JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
import JqxTabs, { ITabsProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtabs';
import JqxCheckBox, { ICheckBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcheckbox';
import JqxDateTimeInput, { IDateTimeInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatetimeinput';
import JqxDataTable, { IDataTableProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable';
import JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
import JqxDropDownList, { IDropDownListProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist';
import { ApiClient } from "../api";
import JqxNotification, { INotificationProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxnotification';
import JqxWindow from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
let api = new ApiClient();
interface MyComponentProps { /* declare your component's props here */ }
interface MyComponentState {
    templateDiaChi: Array<Object>,
    dmTinh: [],
    dmHuyen: [],
    dmXa: [],
    dataFormDiaChi: {}
}
class DiaChi extends React.Component<MyComponentProps, MyComponentState> {
    private formDiaChi = React.createRef<JqxForm>();
    private labelWidth = '110px';
    _isMounted = false;

    constructor(props) {
        super(props);
        let me = this;
        this.state = {
            templateDiaChi:
                [
                    {
                        columns: [
                            {
                                columnWidth: '33%',
                                bind: 'tinh',
                                name: 'tinh',
                                type: 'custom',
                                label: 'Province',
                                labelWidth: this.labelWidth,
                                width: '100%',
                                init: function (component) {
                                    component.jqxDropDownList({
                                        source: me.state.dmTinh,
                                        displayMember: 'ten',
                                        filterPlaceHolder: 'Type to search',
                                        valueMember: 'ma',
                                        width: '100%',
                                        searchMode: 'containsignorecase',
                                        enableBrowserBoundsDetection: true,
                                        filterable: true
                                    }).on({
                                        change: me.thanhTinhOnChange.bind(me)
                                    })
                                }
                            },
                            {
                                columnWidth: '33%',
                                bind: 'huyen',
                                name: 'huyen',
                                type: 'custom',
                                label: 'Distric',
                                labelWidth: this.labelWidth,
                                width: '100%',
                                init: function (component) {
                                    component.jqxDropDownList({
                                        source: me.state.dmHuyen,
                                        displayMember: 'ten',
                                        filterPlaceHolder: 'Type to search',
                                        valueMember: 'ma',
                                        width: '100%',
                                        searchMode: 'containsignorecase',
                                        enableBrowserBoundsDetection: true,
                                        filterable: true
                                    }).on({
                                        change: me.quanHuyenOnChange.bind(me)
                                    });
                                }
                            },
                            {
                                columnWidth: '33%',
                                bind: 'xa',
                                name: 'xa',
                                type: 'custom',
                                label: 'Commune',
                                labelWidth: this.labelWidth,
                                width: '100%',
                                init: function (component) {
                                    component.jqxDropDownList({
                                        source: me.state.dmXa,
                                        displayMember: 'ten',
                                        filterPlaceHolder: 'Type to search',
                                        valueMember: 'ma',
                                        width: '100%',
                                        searchMode: 'containsignorecase',
                                        enableBrowserBoundsDetection: true,
                                        filterable: true
                                    }).on({
                                        change: me.phuongXaOnChange.bind(me)
                                    });
                                }
                            }
                        ]
                    }
                ],
            dmTinh: [],
            dmHuyen: [],
            dmXa: [],
            dataFormDiaChi: {}
        }
        this.loadDMTinh = this.loadDMTinh.bind(this);
        this.loadDMHuyen = this.loadDMHuyen.bind(this);
        this.loadDMXa = this.loadDMXa.bind(this);
       this.thanhTinhOnChange = this.thanhTinhOnChange.bind(this);
       this.quanHuyenOnChange = this.quanHuyenOnChange.bind(this);
       this.phuongXaOnChange = this.phuongXaOnChange.bind(this);
    }
    componentDidMount() {
        this._isMounted = true;
        this.loadDMTinh();
        setTimeout(() => {
            this.formDiaChi.current!.refresh();
        }, 500);
    }
    componentWillUnmount() {
        this._isMounted = false;
    }
    loadDMTinh() {
        let me = this;
        api.get("dvhc/ma_ct/VN?lowercase=true").then(data => {
            if (this._isMounted) {
                this.setState({ dmTinh: data });
            }
        });
    }
    loadDMHuyen(maTinh) {
        let me = this;
        api.get("dvhc/ma_ct/" + maTinh + "?lowercase=true").then(data => {
            if (this._isMounted) {
                this.setState({ dmHuyen: data });
                let ddlHuyen = this.formDiaChi.current.getComponentByName('huyen');
                console.log(ddlHuyen);
                ddlHuyen.jqxDropDownList({source: data});
            }
        });
    }
    loadDMXa(mahuyen) {
        let me = this;
        api.get("dvhc/ma_ct/" + mahuyen + "?lowercase=true").then(data => {
            if (this._isMounted) {
                // this.setState({ dmxa: dmxa });
                let ddl = me.formDiaChi.current!.getComponentByName("xa");
                ddl.jqxDropDownList({ source: data });
            }
        });
    }
    thanhTinhOnChange(e: Event): void {
        let maTinh = e['args'].item.value;
        console.log(e);
        console.log(maTinh);
        this.loadDMHuyen(maTinh);
    }
    quanHuyenOnChange(e: Event): void {
        let mahuyen = e['args'].item.value;
        this.loadDMXa(mahuyen);
    }
    phuongXaOnChange(e: Event): void {
        let mahuyen = e['args'].item.value;
        console.log("hàm phường xã onchange dòng 291");
    }
    public render() {
        return (
            <div className='container-fluid'>
                <div className="row">
                    <JqxForm ref={this.formDiaChi} style={{ width: '100%', height: 'auto' }}
                        template={this.state.templateDiaChi} backgroundColor={'white'} borderColor={'0px'}
                        value={this.state.dataFormDiaChi} padding={{ left: 10, top: 10, right: 10, bottom: 10 }}
                    >
                    </JqxForm>
                </div>
                <div className="row d-flex justify-content-center mt-2">
                    <JqxButton width={100} value={'New'} textPosition={'center'} />
                    <JqxButton width={100} value={'Choose'} />
                </div>
            </div>
        );
    }
}
export default DiaChi;

[HristoParticipant]

Hello,

You could find similar discussion in this topic:
https://www.jqwidgets.com/community/topic/render-data-for-dropdownlist/

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts