Bind Second DropDown based on first dropdown

[kashehiParticipant]

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

[svetoslav_borislavovParticipant]

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

[kashehiParticipant]

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

[kashehiParticipant]

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;

[svetoslav_borislavovParticipant]

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

[kashehiParticipant]

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

[svetoslav_borislavovParticipant]

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

[kashehiParticipant]

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

[svetoslav_borislavovParticipant]

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

[Author]

Posts