Title: [Bug] - Slider Component
Post by: spider58 on December 12, 2018, 08:02:24 AM
Hi, below code is show a slider in datagrid (thanks for code. I got this code from you) 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: 50 }
]
}
}
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>
);
}
}
export default App; As you can see both of sliders has same value on startup. - Now, Please start program - change 1 slider's value with mouse - sort with mouse by click header (name column). you will see both of sliders showing same value. - this error does not occur in subsequent sort clicks. Only in first sort click And also this bug is not appears when sliders has different value on startup And also this bug is not appears when you change 2 or more sliders value before sort
Title: Re: [Bug] - Slider Component
Post by: stworthy on December 12, 2018, 06:40:31 PM
It's not the bug. This is the loaded data. data: [
{ name: 'name1', slider: 50 },
{ name: 'name2', slider: 50 }
]
It has the ascending order on 'name' field. When you clicked on the 'name' column at the first time, the datagrid sorts the data in ascending order. There are no different orders in these rows, so the rows remain their original orders.
Title: Re: [Bug] - Slider Component
Post by: spider58 on December 13, 2018, 01:41:38 AM
It's not the bug. This is the loaded data. data: [
{ name: 'name1', slider: 50 },
{ name: 'name2', slider: 50 }
]
It has the ascending order on 'name' field. When you clicked on the 'name' column at the first time, the datagrid sorts the data in ascending order. There are no different orders in these rows, so the rows remain their original orders. there is no problem with sorting. i agree. But slider values being same value just one time, even their value has been changed by mouse. please check out video https://streamable.com/8dh5l
Title: Re: [Bug] - Slider Component
Post by: stworthy on December 13, 2018, 04:01:27 AM
Please try this code instead. 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: 50 }
]
}
}
handleSliderChange(value,row){
let data = this.state.data.slice();
let index = data.indexOf(row);
data.splice(index, 1, Object.assign({}, row, {slider:value}));
this.setState({data:data})
}
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) => this.handleSliderChange(value,row)}></Slider>
)}
/>
</DataGrid>
</div>
);
}
}
export default App;
Title: Re: [Bug] - Slider Component
Post by: spider58 on December 13, 2018, 04:22:28 AM
Please try this code instead. 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: 50 }
]
}
}
handleSliderChange(value,row){
let data = this.state.data.slice();
let index = data.indexOf(row);
data.splice(index, 1, Object.assign({}, row, {slider:value}));
this.setState({data:data})
}
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) => this.handleSliderChange(value,row)}></Slider>
)}
/>
</DataGrid>
</div>
);
}
}
export default App;
Thanks for code. Seems like working but i think that shouldn't be permanent solution. Because always rendering grid while slider value changed.
Title: Re: [Bug] - Slider Component
Post by: spider58 on December 14, 2018, 12:10:35 AM
my grid has 2 object columns first column has a slider second column has 4 unbound buttons which is different colors and background images. Buttons are no need to state property. it just a button. We can't bound with a datacolumn. What about sorting problem on unbound columns? :-\ Please look at below video https://streamable.com/p18fx and here is my code import React from 'react';
import { DataGrid, GridColumn, Slider, CheckBox } from 'rc-easyui';
class App extends React.Component {
constructor() {
super();
this.state = {
data: [
{ name: 'Mahmut'},
{ name: 'Ahmet' }
]
}
}
handleSliderChange(value,row){
let data = this.state.data.slice();
let index = data.indexOf(row);
data.splice(index, 1, Object.assign({}, row, {slider:value}));
this.setState({data:data})
}
changeButtonColor = (e,row) =>{
var elem = e.target;
elem.style.color="red";
}
render() {
return (
<div>
<DataGrid data={this.state.data} style={{ width: 800, height: 250 }}>
<GridColumn field="name" title="Name" sortable></GridColumn>
<GridColumn title="buttons"
render={({ row }) => (
<div>
<a href="#">button1 </a>
<a href="#" style={{color:"blue"}} onClick={((e) => this.changeButtonColor(e,row))}>ClickToChangeMyColor</a>
</div>
)}
/>
</DataGrid>
</div>
);
}
}
export default App;
Title: Re: [Bug] - Slider Component
Post by: stworthy on December 14, 2018, 07:18:41 PM
You can't change the style of any elements in a data column. React will render DOM with its state. Please use this code instead. changeButtonColor = (e, row) => {
e.preventDefault();
let data = this.state.data.slice();
let index = data.indexOf(row);
data.splice(index, 1, Object.assign({}, row, { color: 'red' }));
this.setState({ data: data })
}
<GridColumn title="buttons"
render={({ row }) => (
<div>
<a href=" ">button1</a>
<a href=" " style={{ color: row.color }} onClick={((e) => this.changeButtonColor(e, row))}>ClickToChangeMyColor</a>
</div>
)}
/>
|