Look at this example, it works fine.
import React from 'react';
import { DataGrid, GridColumn, Slider } from 'rc-easyui';
class App extends React.Component {
constructor() {
super();
this.state = {
data: [
{ name: 'name1', slider: 50 },
{ name: 'name2', slider: 25 }
]
}
}
render() {
return (
<div>
<DataGrid data={this.state.data} style={{ width: 600, height: 250 }}>
<GridColumn field="name" title="Name" sortable></GridColumn>
<GridColumn field="slider" title="Slider"
render={({ row }) => (
<Slider value={row.slider} onChange={(value) => row.slider = value}></Slider>
)}
/>
</DataGrid>
</div>
);
}
}
[code]export default App;
i found what is problem excatly
We define a data column for slider and use data value for slider. othervise doesn't worked well. Is this normal? My data coming from an URL and it has no slider value.
Please try with below code (not defined a data column for slider value)
import React, { Component } from 'react';
import { DataGrid, GridColumn, Slider } from 'rc-easyui';
class Main extends Component {
constructor() {
super();
this.state = {
data: [
{ name: 'name1' },
{ name: 'name2' },
]
}
}
render() {
return (
<div>
<DataGrid data={this.state.data} style={{ width: 600, height: 250 }}>
<GridColumn field="name" title="Name" sortable></GridColumn>
<GridColumn field="slider" title="Slider"
render={({ row }) => (
<Slider value={10}></Slider>
)}
/>
</DataGrid>
</div>
);
}
}
export default Main;
or below code (defined slider solumn but doesn't applied it)
import React, { Component } from 'react';
import { DataGrid, GridColumn, Slider } from 'rc-easyui';
class Main extends Component {
constructor() {
super();
this.state = {
data: [
{ name: 'name1', slider:50 },
{ name: 'name2', slider:25 },
]
}
}
render() {
return (
<div>
<DataGrid data={this.state.data} style={{ width: 600, height: 250 }}>
<GridColumn field="name" title="Name" sortable></GridColumn>
<GridColumn field="slider" title="Slider"
render={({ row }) => (
<Slider value={10}></Slider>
)}
/>
</DataGrid>
</div>
);
}
}
export default Main;
[/code]