EasyUI Forum

General Category => EasyUI for React => Topic started by: spider58 on December 04, 2018, 07:42:11 AM



Title: Need Documentation create element with javascript and react
Post by: spider58 on December 04, 2018, 07:42:11 AM
Hi,

I'm creating elements with javascript in react.

For example i need to modify a datagrid with,

hidden column
frozen column
button column
slider column

Some examples here but most of examples with no javascript.

for example;

how can i hide a column, (i tried hidden: true doesn't worked)
how can i add a slider in column

with javascript and react?

Thanks.


Title: Re: Need Documentation create element with javascript and react
Post by: jarry on December 04, 2018, 07:24:04 PM
With this code you can create a DataGrid dynamically. Reset the 'columns' state to re-render the DataGrid.
Code:
<DataGrid data={this.state.data} style={{height:250}}>
  {
    this.state.columns.map((col,index) => (
      <GridColumn key={index} {...col}></GridColumn>
    ))
  }
</DataGrid>


Title: Re: Need Documentation create element with javascript and react
Post by: spider58 on December 04, 2018, 11:16:34 PM
With this code you can create a DataGrid dynamically. Reset the 'columns' state to re-render the DataGrid.
Code:
<DataGrid data={this.state.data} style={{height:250}}>
  {
    this.state.columns.map((col,index) => (
      <GridColumn key={index} {...col}></GridColumn>
    ))
  }
</DataGrid>

Thanks for reply. Yes i already using this code i got it from sample react nested grid code.

defining columns in state

Code:
columns: [
      {
               field: 'id',
               title: 'userid',
               hidden: true ----------->>>> doesnt worked
        }
      {
               field: 'name',
               title: 'username',
               width: 200,
               formatter: function(value) { --------------------------------->>> formatter doesnt worked
                         return "<button>value</button>"
               }
        }
]



Title: Re: Need Documentation create element with javascript and react
Post by: jarry on December 05, 2018, 12:07:18 AM
The GridColumn has no 'hidden' and 'formatter' properties. Please define the 'render' function to render the body cell.
Code:
{field:'name',title:'Name',width:100,
  render: ({row})=>(
    <button>{row.name}</button>
  )
},

To hide a column, you must remove it from the 'columns' state.

The GridColumn documentation is available from https://www.jeasyui.com/documentation5/GridColumn.php


Title: Re: Need Documentation create element with javascript and react
Post by: spider58 on December 06, 2018, 04:49:07 AM
thanks