Hi,

My React Datagrid sample column code below

Code:

{
    field: "name",
    title: "Name",
    render: ({row}) => (
       
               formatrow(row.name);

   )

}

formatrow = (name) => {
     console.log(name);
}

As you can see i'm calling  formatrow function when rendering column.

I'm seeing at F12 Developer tools grid is re rendering always when mouse is over or click or expand or etc.

This is weird. How can i prevent re rendering?

thanks

After install the 'rc-easyui', the package will be installed in 'node_modules/rc-easyui' directory. You can put this lines to the 'index.css' file that is in your project.

Code:

@import '~rc-easyui/dist/themes/material-teal/easyui.css';
@import '~rc-easyui/dist/themes/icon.css';
@import '~rc-easyui/dist/themes/react.css';

And then import the 'index.css' file in your 'index.js'.

Code:

import './index.css';

thanks. i tried it but getting invalid character "@" error. I think something wrong with my webpack.

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>"
               }
        }
]

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.

Try this code instead.

Code:

@import '~rc-easyui/dist/themes/default/easyui.css';
@import '~rc-easyui/dist/themes/icon.css';
@import '~rc-easyui/dist/themes/react.css';

Doesn't worked.

my.main.css is in css folder. This is my folder structure. I seeing css files loaded without any problem with my codes (at F12 developer tools). But can't apply theme.


dist
     css
          easyui
              themes
              .
              .
              .
           my.main.css
index.html

Hi,

Code:

@import 'easyui/themes/default/easyui.css';
@import 'easyui/themes/icon.css';
@import 'easyui/themes/react.css';

Is there any thing to do for theme define? because  i can't see themed objects

Please look at this example https://www.jeasyui.com/demo-react/main/index.php?plugin=DataGrid&theme=material-teal&dir=ltr&pitem=Nested%20SubGrid&sort=asc

is there any sample code for get data from ajax request?

Please look at this example https://www.jeasyui.com/demo-react/main/index.php?plugin=DataGrid&theme=material-teal&dir=ltr&pitem=Nested%20SubGrid&sort=asc

Oh. Thank you. 

Hi

I want to create a nested subgrid.

Is there any way to do this with react and easyui?

Please update to a newer version.

Thanks for answer. I already using  newer version. But solved when i re run npm install. thanks.

Hello.

I made a react easyui layout which has west-center-east columns.

I want to define East column as splitted and resizable (with center)

How can i do that

Below code does not working.  I can see layout as unresizable

Code:

          <Layout style={{ width: "100%", height: "100%" }}>
          <LayoutPanel region="north" className="p-top">
            <div>North Region</div>
          </LayoutPanel>
          <LayoutPanel region="west" className="p-left">
            <div >West Region</div>
          </LayoutPanel>
          <LayoutPanel region="east" split="true" className="p-right">
            <div>East Region</div>
          </LayoutPanel>
          <LayoutPanel region="center" className="p-center">
            <div>Center Region</div>
          </LayoutPanel>
        </Layout>

Want window objects to have different colors depending upon usage/state.

What would be the best way to do this dynamically?

Thanks!

I need same feature. Is there anybody has an idea?

Thanks

Hello.

Is there ayway to show slider-tip while slider value changing with mouse. After mouse button up  slider-tip must be invisible.

And also can we change slider-tip position? I can do that with css rules, but i think that maybe some codes can be ready there for this

Perfect Thank you.

Please refer to the code below:

Code:

$('#dg').datagrid({
  columns: [[
    {
      field: 'a',
      title: 'Şeffaflık',
      width: 120,
      align: 'center',
      formatter: function(value, row, index) {
        if (row.editing) {} else {
          return '<div class="row-slider"></div>'
        }
      }
    }
  ]],
  data:data,
  onLoadSuccess: function(){
    $(this).datagrid('getPanel').find('.row-slider').slider({
      width: 100,
      mode: "h",
      showTip: true,
      value: 1,
      min: 0,
      max: 1,
      step: 0.1
    })
  }
})