Reply To: Custom Command Column in React

[nichol88]

Thanks for your reply. I don’t believe using let is the proper way to use React hooks. Regardless, I did try and got the same result.
I have since converted to a class component as in the example, with also the same result. However I have some interesting observations.
I started with the code in the example provided, then began adding my code to find where it starts to break. Without changing anything, I get the following error when clicking on a cell or row. Luckily it does not crash the page:
Uncaught TypeError: Cannot read property 'disabled' of undefined
Note: I believe there is an error in your example, <div class="demo-description"> should use “className”
So by changing as little code as possible from the example, I believe the following code should at least log the ID of the row, but all I get is the error mentioned above. Here is the full component with dummy data:

import React from "react";
// import ReactDOM from "react-dom";
import { Grid } from 'smart-webcomponents-react/grid';
// import { GetData } from './common/data';
class ProductWarehouseList extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      showWarehouseId: 0
    }
  }
	dataSource = new window.Smart.DataAdapter({
		dataSource: [
      {id: 1, name: 'Test Warehouse1', warehouse_type: "Physical", location: 'Test Location'},
      {id: 2, name: 'Test Warehouse2', warehouse_type: "Physical", location: 'Test Location'},
      {id: 3, name: 'Test Warehouse3', warehouse_type: "Physical", location: 'Test Location'},
    ],
		dataFields: [
			'id: number',
			'name: string',
			'location: string',
			'warehouse_type: string',
		]
	});
	editing = {
		enabled: true,
		action: 'none',
		mode: 'row',
		commandColumn: {
			visible: true,
			displayMode: 'label',
			dataSource: {
				'commandColumnDelete': {
					visible: false
        },
        'commandColumnEdit': {
          visible: false
        },
				'commandColumnCustom': {
					command: 'commandColumnCustomCommand',
					visible: true,
					label: 'Text'
				}
			}
		}
	};
	columns = [
  {
    label: 'ID',
    dataField: 'id',
    width: 50
  },
  {
		label: 'Name',
		dataField: 'name'
	},
	{
		label: 'Warehouse Type',
		dataField: 'warehouse_type'
	},
	{
		label: 'Location',
		dataField: 'location',
	}
	];
	init() {
		window.commandColumnCustomCommand = function (row) {
      this.setState({showWarehouseId: row.data.id}, () => {
        console.log(this.state.showWarehouseId)
      })
		};
	}
	componentDidMount() {
		this.init();
	}
	render() {
		return (
			<div>
				<Grid id="grid"
					dataSource={this.dataSource}
					editing={this.editing}
					columns={this.columns}></Grid>
			</div>
		);
	}
}
export default ProductWarehouseList;