Hi, how I can select multiple cell selection by mouse hold then move / draging selection/select entire cell
 and then the cell get selected?
just like on easyui-jquery we can use extension regional select.

i only can find click the cell one by one.

thanks for the update EasyUI React Team 

I create cell edit in datagrid, make Combobox on the cell.
After click select data of combobox, it seems cursor not focused inside combobox again.

how to set focus cursor to Combobox, when onclick data? i can do it in jquery, but how to do it in react easyui?

Code:

editor={({ row }) => (
          <div onKeyDown={event => this.handleKeyDown(event)}>
                 <ComboBox
                         data={listProduct}
                         value={row.product}
                         valueField='id' textField='name'
                         onSelectionChange={ setFocushere? }
                 ></ComboBox>
              </div>
     )}

[type_3]

I encounter a problem when create datagrid with GridColumnGroup, GridHeaderRow and colspan.
Here the code I made:

Code:

  <GridColumnGroup frozen align="left" width="570px">
                     <GridHeaderRow>
                         <GridColumn title={ReactHtmlParser("POKEMON <br>NAME")} field="name" rowspan='2' width="50px" key='grd2' ></GridColumn>
                         <GridColumn title={ReactHtmlParser("DESCRIPTION <br>OF POKEMON")} field="description" rowspan='2' header={this.styleHeader.bind(this)} width="90px" key='grd3' ></GridColumn>
                     </GridHeaderRow>
                     <GridHeaderRow>
                     </GridHeaderRow>
                 </GridColumnGroup>

                 <GridColumnGroup>
                     <GridHeaderRow>
                         <GridColumn title={ReactHtmlParser("TYPE ADVANTAGES - <br> FOR ATTACKING ENEMY ")} colspan="5" key='grd21' ></GridColumn>
                         <GridColumn title="LAST BATTLE" field="last_battle" rowspan="2" width="150px" key='grd16' ></GridColumn>
                         <GridColumn title="LAST BATTLE TIME" field="last_battletime" rowspan="2" width="150px" key='grd17' ></GridColumn>
                     </GridHeaderRow>
                     <GridHeaderRow>
                         <GridColumn title="Type 1" field="type_1" width="100px" key='kiye1' ></GridColumn>
                         <GridColumn title="Type 2" field="type_2" width="80px" colspan="1" key='kiye2' ></GridColumn>
                         <GridColumn title="Type 3" field="type_3" width="80px" colspan="1" key='kiye3' ></GridColumn>
                         <GridColumn title="Type 4" field="type_4" width="80px" colspan="1" key='kiye4'></GridColumn>
                         <GridColumn title="Type 5" field="type_5" width="200px" colspan="1" key='kiye5' ></GridColumn>
                     </GridHeaderRow>
                 </GridColumnGroup>

then the output is inconsistent, title and field+width is not match (see attachment)
also the data is not match

Code:

constructor(props) {
    super(props);

    this.state = {
      data : [
          {type_3:' type 3', type_4: 'type 4', type_5: 'type 5'},
      ],
    };
  }

the order of field,data,width, is different from the title.
Data of type_3 show on Type 5
type_4 show on LAST BATTLE
type_5 show on LAST BATTLE TIME

What I missed here?

Thanks, your sample code works   

Hi,

Is there any way to catch onKeypress from cell editor. I want to end the datagrid by pressing enter, and may be another function like tab for switching to the next editor.

Code:

<GridColumn key='inikey3' title="DESCRIPTION" field="description" rowspan="2"  width="300px"
     editable
     editor={({ row }) => (
          <TextBox
              ref={this.textInput}
              value={row.description}
              onKeyPress={this.handleKeyHere.bind(this)}
          ></TextBox>
 )}
></GridColumn>

//we want to to like this
handleKeyHere(event) {
  if(event.keyCode === 13) {
    this.datagrid.endEdit();
  }
}

Thanks.

Thanks mate, solved

we miss the curly bracket, didn't realize it one parameter as an object, and tried with 3 parameter.


 

Hi,

I'm trying easyui ract, previously i already use the jquery version for couple of my project.

One of the function that i still havent find a way to implement in react version, is to show context menu when user do right click on datagrid cell.

I already check the documentation, get find this event listed on GridBase component

Code:

onCellContextMenu	{row, column, originalEvent}

But when i tried to catch that event, i can only get the row & column parameter, and originalEvent parameter is always null.

I believe this originalEvent is the one that i can use to get the x & y coordinate so I can show the context menu on the area near the cell.

Anyone ever tried this?
Or is it possible to get the x&y axis from datagrid component with column & row information?



Thanks