Custom Command Column in React

[nichol88]

Hello, I am trying to use the command column to change state in my component. I am displaying a list of warehouses, and I want to click the button and set state to the ID of that row. It seems to almost work – it does change the state, but immediately after clicking, I get the following error:
Uncaught (in promise) RangeError: Maximum call stack size exceeded
at Array.slice (<anonymous>)
at HTMLElement.get (smart.grid.js:64073)
at HTMLElement.value (smart.grid.js:63678)
at HTMLElement.value (smart.grid.js:63743)
at e.value (smart.grid.js:48369) ……
Here are the options I have configured:

editing: {
      enabled: true,
      action: 'none',
      mode: 'row',
      commandColumn: {
        visible: true,
        displayMode: 'label',
        dataSource: {
          'commandColumnEdit': { visible: false },
          'commandColumnDelete': { visible: false },
          'commandColumnCustom': { command: 'onClickViewWarehouse', visible: true, label: 'View Warehouse' },
        },
      },
    }

The function I am calling is defined when the component mounts like so:

  useEffect(() => {
    window.onClickViewWarehouse = (row) => {
      setShowWarehouseId(row.data.id)
    }
  }, [])

The function setShowWarehouseId is a React hook, defined like so:
const [showWarehouseId, setShowWarehouseId] = useState(0)
I imagine the window object doesn’t have access to the hook? Is there a way to accomplish this? Thank you!

[hristojqwidgets]

Hello Brian Nicholls,
It seems the binding to this happens at an inappropriate time.
I would like to suggest you look at this demo:
https://www.htmlelements.com/react/demos/grid/editing-command-column-custom/
You could try to use this approach for your case.
Also, I would like to suggest you try to change declaration from const to let option only to try:
let [showWarehouseId, setShowWarehouseId] = useState(0);
Best Regards,
Hristo Hristov
jQWidgets team
https://www.jqwidgets.com

[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;

[admin]

Hi Brian,
Inside the custom command function ‘this’ is in the context of the function. It should be Ok if you define it like that:

		const that = this;
		window.commandColumnCustomCommand = function (row) {
			that.setState({showWarehouseId: row.data.id}, () => {
			console.log(that.state.showWarehouseId)
		})};

Regarding the ‘class’ and ‘className’, you are right. Using class instead of className produces warnings and in strict mode errors. We will update the samples.
Hope this helps.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts