[Bug] - Slider Component

[spider58]

Hi,

below code is show a slider in datagrid (thanks for code. I got this code from you)

Code:

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

[stworthy]

It's not the bug. This is the loaded data.

Code:

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.

[spider58]

It's not the bug. This is the loaded data.

Code:

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

[stworthy]

Please try this code instead.

Code:

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;

[spider58]

Please try this code instead.

Code:

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.

[spider58]

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

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;

[stworthy]

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.

Code:

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

Code:

<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>
	)}
/>