[kashehiParticipant]

thank you for response, It helps me.

[kashehiParticipant]

Hi,
Would you please answer my question?

[kashehiParticipant]

Hi, thank you for response, I helped me alot, But this time I have one company.js component with four button that I called CRUD.js on it and it works.
But I have User.js Component and also it has four button , I want Call CRUD.js again but I want where click on create button it opens different html from create button on Company.js
How can I do this?

[kashehiParticipant]

Hi again,
thank you for your response, it was ok for one window and one button and worked in my project, but I want one button component and one window component and in all of my project I call them with different style ,for example one button named it create and another named delete with click on each of button open jqxwindow related to them, but with just 2 component(button,jqxwindow).
Is it possible?

[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

[kashehiParticipant]

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

[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;

[kashehiParticipant]

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

[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

[kashehiParticipant]

Thank You soooo much, It works.
Best Regards

[kashehiParticipant]

Hi,
again I have this code as below load dropdown data from json but my dropdown is empty, would you please help me:
import * as React from ‘react’;
import JqxDropDownList, { IDropDownListProps, jqx } from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist’;
import { GetCourseAndTabgeh } from ‘../data-access/Course’
class CourseDropdown extends React.PureComponent {
log = React.createRef(HTMLDivElement);
constructor(props) {
super(props);
const source = {
datafields: [
{ name: ‘Tabageh’ },
{ name: ‘CorseName’ }
],
datatype: ‘json’,

};
this.state = {
source: new jqx.dataAdapter(source)
}

}
componentDidMount() {
GetCourseAndTabgeh().then(data => {
this.state.source = data;

})
console.log(this.state.dataSource)
}
render() {
return (
<div>
<JqxDropDownList
width={200}
height={30}
source={this.state.source}
selectedIndex={2}
displayMember={‘CorseName’}
valueMember={‘Tabageh’}
rtl={true}
/>
<div ref={this.log} />
</div>
);
}

}
export default CourseDropdown;

export async function GetCourseAndTabgeh() {
const res = await fetch(‘Corse/GetCourseAndTabgeh’);
const data = await res.json();
return data
}

[kashehiParticipant]

Thank you
And Would you please help me about jqxdropdownlist from json
which method I should use for update dropdownlist after call below function:
componentDidMount() {
GetCourseAndTabgeh().then(data => {
this.state.dataSource.localdata = data;

})

}

[kashehiParticipant]

I do not Know how can I thank you, It completely works.

[kashehiParticipant]

Thank you for your response, I edit my code according what you said but it is still load mygrid empty,
I am confused please help me to do that in right way.
this is my code
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”,

localdata: GetCourseList(),

};

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),
};
}

export async function GetCourseList() {
const res = await fetch(‘Corse/GetCourseList’);
const data = await res.json();
return data
}

this is image url of my problem
https://ibb.co/MVZ368b

[kashehiParticipant]

Hi,
Thank you for your help.
I changed my code to this code as below but it is not work
when I click on update button data is load on grid but when I open my page on load of page grid is empty, would you please help me again
import * as React from “react”;
import “jqwidgets-scripts/jqwidgets/styles/jqx.base.css”;
import JqxGrid, {
IGridProps,
jqx,
} from “jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid”;
import { GetCourseList } from ‘../data-access/Course’
import CourseDropdown from ‘./CourseDropDown’
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”,

localdata: []
};
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),
};
}

updateGrid = () => {
GetCourseList().then(data => this.state.dataSource.localdata = data)
this.myGrid.current.updatebounddata(“sort”);
};
componentDidMount() {
GetCourseList().then(data => this.state.dataSource.localdata = data)
this.myGrid.current.updatebounddata(‘sort’);

}

render() {
return (
<div>
<div><CourseDropdown /></div>
<button onClick={this.updateGrid}>Update</button>
<JqxGrid ref={this.myGrid}
width={‘100%’}
height={‘100%’}
source={this.state.source}
columns={this.state.columns}
altrows={true}
sortable={true}
columnsresize={true}
enabletooltips={true}
pageable={true}
rtl={true}
/>

</div>

);
}
}

export default CourseGrid;

[Author]

Posts