Datagrid Object colums doesn't affect by sort.

[spider58]

Hi

I have a datagrid which has some object columns such as buttons and sliders.

[date, name, slider, buttons]

date and name columns are sortable, slider and buttons not.

I am changing some rows slider value and sorting columns by name or date. But sliders and buttons does not affecting by sort.

[stworthy]

Please show an example to demonstrate your issue.

[spider58]

Please show an example to demonstrate your issue.

Add a name and slider column.
Set data with 2 or more row
Run project
Change some rows slider value with mouse
Sort columns by name with click mouse

And you willl see slider columns doesn't changing their rows by sort.

Example.

 İ changed 1st row slider value as 50
Third slider value as 25

Sorted grid. Rows changed but sliders not. İ'm still seeing 1st rows salider value as 50 and 3th slider value as 25

Do you have jsfiddle template for rc-easyui? İ can show sample.

[stworthy]

Look at this example, it works fine.

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

export default App;

[spider58]

Look at this example, it works fine.

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

Code:

       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)

Code:

       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]