jQuery UI Widgets Forums React Bind Second DropDown based on first dropdown

This topic contains 8 replies, has 2 voices, and was last updated by  svetoslav_borislavov 1 month, 1 week ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author

  • kashehi
    Participant

    Hi,
    I have two dropdown that the second one load base on selected row in first one
    now:
    1- first dropdown rows loaded from json that return from server with fetch and it completely works, but for load data to second dropdown at first I need to get the id of selected row in first dropdown and send it to server for get the result, But i dont know how can I write this code,
    would you please help me?

    this is my firstdropdown and it is ok:
    import * as React from ‘react’;
    import JqxDropDownList, { IDropDownListProps, jqx } from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist’;
    class TabaghehDropDown extends React.PureComponent {
    log = React.createRef(HTMLDivElement);
    constructor(props) {
    super(props);
    const source = {
    datafields: [
    { name: ‘Tabageh’ },
    { name: ‘CorseName’ }
    ],
    datatype: ‘json’,
    url: ‘Corse/GetTabgeh’
    };
    this.state = {
    dataSource: source,
    source: new jqx.dataAdapter(source)
    }

    }

    render() {
    return (
    <div>
    <JqxDropDownList
    width={200}
    height={30}
    source={this.state.source}
    selectedIndex={-1}
    displayMember={‘CorseName’}
    valueMember={‘Tabageh’}
    rtl={true}
    placeHolder=”طبقه را انتخاب نمایید”
    />
    <div ref={this.log} />
    </div>
    );
    }

    }
    export default TabaghehDropDown;

    this is my second dropdowncode:
    import * as React from ‘react’;
    import JqxDropDownList, { IDropDownListProps, jqx } from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist’;

    class GroupDropDown extends React.PureComponent {
    log = React.createRef(HTMLDivElement);
    constructor(props) {
    super(props);

    const source= {
    datafields: [
    { name: ‘Tabageh’ },
    { name: ‘CorseName’ }
    ],
    datatype: ‘json’,
    url: ‘Corse/GetGroup’
    };
    this.state = {
    dataSource: source,
    source: new jqx.dataAdapter(source)
    }

    }

    render() {
    return (
    <div>
    <JqxDropDownList
    width={200}
    height={30}
    source={this.state.source}
    selectedIndex={2}
    displayMember={‘CorseName’}
    valueMember={‘Tabageh’}
    rtl={true}
    placeHolder=”گروه را انتخاب نمایید”
    />
    <div ref={this.log} />
    </div>
    );
    }

    }
    export default GroupDropDown;

    BestRegards
    Sama

    Hi,

    For this you should save the selected id in a parent component. I have developed a little example for your needs:

    This can be the parent component:

    import * as React from 'react';
    import TabaghehDropDown from './firstdropdown';
    import GroupDropDown from './seconds';
    
    class ParentComponent extends React.PureComponent {
    
        constructor(props) {
            super(props);
    
            this.state = {
                selectedId: -1 //Here is your initial id -1 is just an example
            }
    
            this.setSelectedId = this.setSelectedId.bind(this);
    
        }
    
        setSelectedId(id) {
    
            this.setState({
                selectedId: id
            });
    
        }
    
        render() {
            return (
                <div>
                    <TabaghehDropDown setId={this.setSelectedId}></TabaghehDropDown>
                    <GroupDropDown id={this.state.selectedId}></GroupDropDown>
                </div>
            );
        }
    
    }
    export default ParentComponent;

    This is your component from which you are selecting the id:

    import * as React from 'react';
    import JqxDropDownList, { jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist';
    
    class TabaghehDropDown extends React.PureComponent {
    
        log = React.createRef(HTMLDivElement);
    
        constructor(props) {
            super(props);
    
            this.setParentsId = props.setId;
    
            const source = {
                datafields: [
                    { name: 'Tabageh' },
                    { name: 'CorseName' }
                ],
                datatype: 'json',
                url: 'Corse/GetTabgeh'
            };
    
            this.state = {
                dataSource: source,
                source: new jqx.dataAdapter(source)
            }
    
        }
    
        onSelect = (e) => {
    
            this.setParentsId(e.args.index);
            //e.args.index is the index of the selected option
            //You can retrieve the id with the index and set it
    
        }
    
        render() {
            return (
                <div>
                    <JqxDropDownList
                        width={200}
                        height={30}
                        source={this.state.source}
                        onSelect={this.onSelect}
                        selectedIndex={-1}
                        displayMember={'CorseName'}
                        valueMember={'Tabageh'}
                        rtl={true}
                        placeHolder="طبقه را انتخاب نمایید"
                    />
                    <div ref={this.log} />
                </div>
            );
        }
    
    }
    export default TabaghehDropDown;

    And this is the component which updates its data after id`s change:

    import * as React from 'react';
    import JqxDropDownList, { jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist';
    
    class GroupDropDown extends React.PureComponent {
        log = React.createRef(HTMLDivElement);
        constructor(props) {
            super(props);
    
            const source = {
                datafields: [
                    { name: 'Tabageh' },
                    { name: 'CorseName' }
                ],
                datatype: 'json',
                url: 'Corse/GetGroup' //your initial url you can use the initial id: props.id
            };
    
            this.state = {
                dataSource: source,
                source: new jqx.dataAdapter(source),
                selectedId: props.id
            }
        }
    
        componentDidUpdate(prevProps) {
    
            if (prevProps.id !== this.props.id) {
                const source = {
                    datafields: [
                        { name: 'Tabageh' },
                        { name: 'CorseName' }
                    ],
                    datatype: 'json',
                    url: 'Corse/GetGroup' //Here on every update use you id for the url via this.props.id
                    //url: <code>Corse/GetGroup/${this.props.id}</code> EXAMPLE
                };
    
                this.setState({
                    ...this.state,
                    selectedId: this.props.id,
                    source: new jqx.dataAdapter(source)
    
                });
            }
    
        }
    
        render() {
            return (
                <div>
                    <JqxDropDownList
                        width={200}
                        height={30}
                        source={this.state.source}
                        selectedIndex={2}
                        displayMember={'CorseName'}
                        valueMember={'Tabageh'}
                        rtl={true}
                        placeHolder="گروه را انتخاب نمایید"
                    />
                    <div ref={this.log} />
                </div>
            );
        }
    
    }
    export default GroupDropDown;

    Best regards,
    Svetoslav Borislavov
    jQWidgets Team


    kashehi
    Participant

    Hi,
    Thank you for reply. It completely works.
    Best regards,
    Sama


    kashehi
    Participant

    I am sorry, I have another question :
    I have one grid and I want after click second dropdown data bind on grid.
    this is my code for grid but it does not work, would you please correct my wrong code?
    import * as React from “react”;
    import “jqwidgets-scripts/jqwidgets/styles/jqx.base.css”;
    import JqxGrid, {
    IGridProps,
    jqx,
    } from “jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid”;

    class CourseGrid extends React.PureComponent {
    myGrid = React.createRef(JqxGrid);
    constructor(props) {
    super(props);
    const source = {
    datafields: [
    {
    name: “Tabageh”,
    type: “string”,
    },
    {
    name: “Univ”,
    type: “string”
    },
    {
    name: “SexGroup”,
    type: “string”,
    },
    {
    name: “CorseStatus”,
    type: “string”
    },
    {
    name: “CorseCode”,
    type: “string”,
    },
    {
    name: “CorseName”,
    type: “string”
    }
    ,
    {
    name: “CorseNoe”,
    type: “string”
    }

    ],
    datatype: ‘json’,
    url: ‘Corse/GetCourseList’,
    data: {
    Gid: props.id,
    Tid: props.Rid,

    }

    };
    this.state = {
    columns: [
    {
    text: “نام درس”,
    datafield: “CorseName”,

    }
    ,

    {
    text: “جنسیت”,
    datafield: “SexGroup”,

    }

    ,
    {
    text: “Tabageh”,
    datafield: “Tabageh”,
    hidden: true
    },
    {
    text: “Univ”,
    datafield: “Univ”,
    hidden: true

    }

    ,
    {
    text: “نوع درس”,
    datafield: “CorseStatus”,

    }

    ,
    {
    text: “CorseCode”,
    datafield: “CorseCode”,
    hidden: true
    }

    ,

    {
    text: “CorseNoe”,
    datafield: “CorseNoe”,

    }
    ],
    dataSource: source,
    source: new jqx.dataAdapter(source),
    };

    }

    componentDidUpdate(prevProps) {

    }
    render() {
    return (
    <div>

    <JqxGrid ref={this.myGrid}
    width={‘100%’}
    height={‘80%’}
    source={this.state.source}
    columns={this.state.columns}
    altrows={true}
    sortable={true}
    columnsresize={true}
    enabletooltips={true}
    pageable={true}
    rtl={true}
    />

    </div>

    );
    }
    }

    export default CourseGrid;

    Hi,

    I am going to help you fix your code, but please explain to me what are you trying to do?
    Are you trying to load data to the dropdown after selecting a row from the grid or load data to the grid after selecting from the dropdown?

    Best regards,
    Svetoslav Borislavov
    jQWidgets Team


    kashehi
    Participant

    Hi,
    I want to load data to grid after select item from second dropdown on your example that you help me.

    Hi,

    You should again save your selected id in a parent component and pass it to the grid. In the Grid the componentDidUpdate should fetch your data and update the grid`s data.
    For example, if you get your data with a method that accepts id you can do this:

    componentDidUpdate() {
        const id = this.props.id;
    
        GetCourseList(id).then(data => {
            this.state.dataSource.localdata = data;
            this.myGrid.current.updatebounddata();
        })
    }

    .

    If you want, you can give me your dropdown component and i can bind the logic.

    Hope this helps!

    Best regards,
    Svetoslav Borislavov
    jQWidgets Team


    kashehi
    Participant

    Hi,
    Thank you for your reply.
    Would you please help me in this problem?
    on grid I need column with datafield ‘Select’ after click on it selected row data add to another grid

    Hi,

    I have developed an example for you. You should save your data in a parent component and the two grids are his children.
    Here are the components you can do something similar:

    Parent:

    import * as React from 'react';
    import GridFrom from './GridFrom';
    import GridTo from './GridTo';
    
    class ParentComponent extends React.PureComponent {
    
        data = [
            {
                "name": "Peter",
                "age": 225,
                "gender": "male",
                "city": "Sofia",
            },
            {
                "name": "Ivan",
                "age": 14,
                "gender": "male",
                "city": "Kazanlak"
            },
            {
                "name": "Johny",
                "age": 24,
                "gender": "male",
                "city": "Varna"
            },
        ];
    
        constructor(props) {
            super(props);
    
            this.state = {
                data: this.data.map(e => ({ ...e, select: false })),
                selectedData: []
            }
    
        }
    
        setSelectedData = (data, row) => {
    
            const index = this.state.data.findIndex(e => e.name === row.name);
    
            const newData = [...this.state.data];
            newData[index].select = !(newData[index].select);
    
            this.setState({
                ...this.state,
                data: newData,
                selectedData: data
            });
    
        }
    
        render() {
            return (
                <div>
                    <GridFrom
                        setSelectedData={this.setSelectedData}
                        data={this.state.data}
                        selectedData={this.state.selectedData}
                    >
                    </GridFrom>
                    <GridTo selectedData={this.state.selectedData}></GridTo>
                </div>
            );
        }
    
    }
    export default ParentComponent;

    The grid from which you can select rows:

    import * as React from 'react';
    
    import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
    import 'jqwidgets-scripts/jqwidgets/styles/jqx.material-purple.css';
    import JqxGrid, { jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
    
    export default class Grid extends React.PureComponent {
    
        myGrid = React.createRef(JqxGrid);
    
        constructor(props) {
            super(props);
    
            const source = {
                datafields: [
                    { name: 'name', type: 'string' },
                    { name: 'age', type: 'number' },
                    { name: 'gender', type: 'string' },
                    { name: 'city', type: 'string' },
                    { name: 'select', type: 'bool' }
                ],
                datatype: 'array',
                localdata: this.props.data
            };
            
            this.state = {
                columns: [
                    { text: 'Name', datafield: 'name' },
                    { text: 'Age', datafield: 'age' },
                    { text: 'Gender', datafield: 'gender' },
                    { text: 'City', datafield: 'city' },
                    { text: 'Select', datafield: 'select', columntype: 'checkbox', width: 70 }
                ],
                source: new jqx.dataAdapter(source)
            }
        }
    
        onCellvaluechanged = (e) => {
    
            const args = e.args;
    
            if (args.datafield === 'select') {
    
                const row = this.myGrid.current.getrowdata(args.rowindex);
    
                const data = [...this.props.selectedData];
                
                if (args.newvalue === true) {
    
                    this.props.setSelectedData([...this.props.selectedData, row], row);
    
                } else {
    
                    const index = data.findIndex(e => e.boundindex === args.rowindex);
                    
                    data.splice(index, 1)
    
                    this.props.setSelectedData(data, row);
                }
            }
        }
    
        render() {
            return (
                <>
                    <JqxGrid
                        ref={this.myGrid}
                        width='70%'
                        source={this.state.source}
                        columns={this.state.columns}
                        columnsresize={true}
                        editable={true}
                        onCellvaluechanged={this.onCellvaluechanged}
                    />
                </>
            )
        }
    }

    the grid to which the rows are being transfered:

    import * as React from 'react';
    
    import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
    import 'jqwidgets-scripts/jqwidgets/styles/jqx.material-purple.css';
    import JqxGrid, { jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';
    
    export default class Grid extends React.PureComponent {
    
        myGrid = React.createRef(JqxGrid);
    
        source = {
            datafields: [
                { name: 'name', type: 'string' },
                { name: 'age', type: 'number' },
                { name: 'gender', type: 'string' },
                { name: 'city', type: 'string' }
            ],
            datatype: 'array'
        };
    
        constructor(props) {
            super(props);
    
            this.source.localdata = this.props.selectedData; 
    
            this.state = {
                columns: [
                    { text: 'Name', datafield: 'name' },
                    { text: 'Age', datafield: 'age' },
                    { text: 'Gender', datafield: 'gender' },
                    { text: 'City', datafield: 'city' },
                ],
                source: new jqx.dataAdapter(this.source)
            }
        }
    
        componentDidUpdate = () => {
            
            this.source.localdata = this.props.selectedData;
    
            this.myGrid.current.updatebounddata();
            
        }
    
        render() {
            return (
                <>
                    <JqxGrid
                        ref={this.myGrid}
                        width='70%' source={this.state.source} columns={this.state.columns} columnsresize={true}
                    />
                </>
            )
        }
    }

    Best regards,
    Svetoslav Borislavov
    jQWidgets Team

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.