Hi,

I using TAB component on react.

I have some TAB pages and i want to select last tab page as "selected"

i tried below code

Code:

this.mytabs.map ((tab, index) => {

     return index == this.mytabs.length() ? <TabPanel selected index...... id..... key ..........><TabContainer>bla</TabContainer></TabPanel> :
<TabPanel index...... id..... key ..........><TabContainer>bla</TabContainer></TabPanel>
                          

})

As you can see i only add SELECTED into last TAB. But unfortunatelly first tab is beling selected on program startup.

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;

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.

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

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

Please pass the 'row' to your clicking handler function.

Code:

<a href="javascript:void(0)" onClick={() => this.getSelectedRow(row)}>click me</a>

hi.

Thanks for answer

i tried already

Code:

getSelectedRow(row) {
    this.setState({ selection: row})
    console.log(this.state.selection);
}

still getting previous row data

But i can access row data with row. i will use row not use state 

and another question

how can i use methods such as (toggleRow)

hi,

I have a button column which has 4 buttons and i want to get clicked buttons row data.

onselectionchanged event i am getting selectedrow but buttons click event  fired before selection changed event.

after program start first click on button selection is null. second or the other clicks selection will become previous row because click code firing before selection changed event.



Button column click code

Code:

render={({ row }) => (
              <div>
                         <a href="javascript:void(0)" onClick={() => this.getSelectedRow(this)}>click me</a>
              </div>
            )}

function

Code:

getSelectedRow() {
    console.log(this.state.selection);
}

grid selection code

Code:

<DataGrid data={this.state.data} style={{ height: 250 }}
          selectionMode="single"
          selection={this.state.selection}
          onSelectionChange={(selection) => this.setState({ selection: selection })}
        >

And i have second question

How can i access datagrid object for use methods such as "toggleRow"

Thanks

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]

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.

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.

Please use this code instead.

Code:

<Slider
	style={{ width: 100 }}
	showTip
	value = {1}
	min={0}
	max={1}
/>

Thanks.  Worked

But i want to define step as 0.1.  I tried "0.1" and {0.1}. Doesn't worked.

Or i think i can define max=10, min=0 and step = 1 and divide value to 10 when i need to use.

Hi.

I added a slider with below code

Code:

<div>
          <Slider
            style={{ width: 100 }}
            showTip
            value = "1"
            min="0"
            max="1"
          />
        </div>

But slider handle button is doesn't stop when reached start or end of slider. I can move slider handler button to any where in Y axis.

when i look developer tools console (F12) seeing below error mesage

Uncaught TypeError: (o + ((e * a) * (i - o).toFixed is not a function
         ad t.value (rc-easy-ui-min.js:23)
     

and has hundreds of this error code. (generating for every move with mouse)

Please update to the newest version.

Thanks. problem solved.

This is the Dialog examples.
https://www.jeasyui.com/demo-react/main/index.php?plugin=Dialog&theme=material-teal&dir=ltr&pitem=&sort=asc

thanks. sorry for inconvenience but i'm new on react. 

Hi,

Is there any plan in future versions for window object for react?