EasyUI Forum

General Category => EasyUI for React => Topic started by: spider58 on December 10, 2018, 11:06:49 PM



Title: Datagrid Object colums doesn't affect by sort.
Post by: spider58 on December 10, 2018, 11:06:49 PM
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.


Title: Re: Datagrid Object colums doesn't affect by sort.
Post by: stworthy on December 10, 2018, 11:40:02 PM
Please show an example to demonstrate your issue.


Title: Re: Datagrid Object colums doesn't affect by sort.
Post by: spider58 on December 11, 2018, 12:29:34 AM
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.


Title: Re: Datagrid Object colums doesn't affect by sort.
Post by: stworthy on December 11, 2018, 01:32:24 AM
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;


Title: Re: Datagrid Object colums doesn't affect by sort.
Post by: spider58 on December 11, 2018, 04:29:02 AM
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]