Reply To: Custom "Add Column Window"

[YavorDashev]

Hi Trist B,
For your scenario it will be best to create a new column which will handle the adding the adding of the new column, because the add column doesn’t support customizing the window by default, but we may consider it for future development.
However I have create a basic example how to create a column which will simulate the add column functionality which will open a window component, and in it you can create a custom form with the fields that you need for your new column and handle the logic from there on.

import React from "react";
import ReactDOM from "react-dom";
import 'smart-webcomponents-react/source/styles/smart.default.css';
import './App.css';
import { Smart, Grid } from 'smart-webcomponents-react/grid';
import { Button } from 'smart-webcomponents-react/button';
import { Window } from 'smart-webcomponents-react/window';
class App extends React.Component {
	constructor(props) {
		super(props);
		this.grid = React.createRef();
		this.addColumnWindow = React.createRef();
	}
	behavior = {
		columnResizeMode: 'growAndShrink'
	}
	appearance = {
		alternationCount: 2,
		showRowHeader: true,
		showRowHeaderSelectIcon: true,
		showRowHeaderFocusIcon: true
	}
	paging = {
		enabled: true
	}
	editing = {
		enabled: true,
		addNewColumn: {
			visible: true
		},
	};
	filtering = {
		enabled: true
	};
	dataSource = new Smart.DataAdapter({
		dataSource: [
			{ "firstName": "Beate", "lastName": "Wilson", "productName": "Caramel Latte" },
			{ "firstName": "Ian", "lastName": "Nodier", "productName": "Caramel Latte" },
			{ "firstName": "Petra", "lastName": "Vileid", "productName": "Green Tea" },
			{ "firstName": "Mayumi", "lastName": "Ohno", "productName": "Caramel Latte" },
			{ "firstName": "Mayumi", "lastName": "Saylor", "productName": "Espresso con Panna" },
			{ "firstName": "Regina", "lastName": "Fuller", "productName": "Caffe Americano" },
			{ "firstName": "Regina", "lastName": "Burke", "productName": "Caramel Latte" },
			{ "firstName": "Andrew", "lastName": "Petersen", "productName": "Caffe Americano" },
			{ "firstName": "Martin", "lastName": "Ohno", "productName": "Espresso con Panna" },
			{ "firstName": "Beate", "lastName": "Devling", "productName": "Green Tea" },
			{ "firstName": "Sven", "lastName": "Devling", "productName": "Espresso Truffle" },
			{ "firstName": "Petra", "lastName": "Burke", "productName": "Peppermint Mocha Twist" },
			{ "firstName": "Marco", "lastName": "Johnes", "productName": "Caffe Mocha" }
		],
		dataFields: [
			'firstName: string',
			'lastName: string',
			'productName: string'
		]
	})
	columns = [{
		label: 'First Name',
		dataField: 'firstName'
	},
	{
		label: 'Last Name',
		dataField: 'lastName'
	},
	{
		label: 'Product',
		dataField: 'productName'
	},
	{
		label: 'Add New Column',
		dataField: 'addColumn',
		allowSort: false,
		allowFilter: false,
		showIcon: false,
		showActionButton: false,
		width:100
	}
	]
	handleColumnClick = (event) => {
		const detail = event.detail,
			column = detail.column;
		console.log(this)
		if( column.dataField === 'addColumn' ) {
			this.addColumnWindow.current.open();
		}
	};
	init() {
		const template = document.createElement('template');
		template.id = 'footerTemplate';
		template.innerHTML = '<div id="buttonContainer"></div>';
		document.body.appendChild(template);
		this.addColumnWindow.current.footerTemplate = template.id;
	}
	handleReady() {
		ReactDOM.render(<section>
			<Button className="cancel" onClick={this.cancelHandler.bind(this)}>Cancel</Button>
			<Button className="agree" onClick={this.agreeHandler.bind(this)}>Add Column</Button>
		</section>, document.querySelector("#buttonContainer"));
	}
	agreeHandler(event) {
		const target = event.target,
			formWindow = this.addColumnWindow.current,
			columnsList = this.columns,
			columns = this.grid.current.columns;
		for (let i = 0; i < columnsList.length; i++) {
			let alreadyAdded = false;
			for (let j = 0; j < columnsList.length; j++) {
				const columnsList = columns[j];
				if (columnsList && columnsList.label === columnsList[i]) {
					alreadyAdded = true;
					break;
				};
			}
			if (alreadyAdded) {
				continue;
			}
			const newColumn = new window.Smart.Grid.Column({
				label: columnsList[i],
				dataField: columnsList[i]
			});
			columns.push(newColumn);
			break;
		}
		formWindow.close();
	}
	cancelHandler(event) {
		const target = event.target,
			formWindow = this.addColumnWindow.current;
			formWindow.close();
	}
	componentDidMount() {
		this.init();
	}
	render() {
		return (
			<div>
				<div>
				<Window ref={this.addColumnWindow} windowParent="body" modal id="formWindow" onReady={this.handleReady.bind(this)} label="Add column window" >
					<div id="article">
						<section>
							<form>
								Your Form fields
							</form>
						</section>
					</div>
				</Window>
					<Grid
						dataSource={this.dataSource}
						columns={this.columns}
						appearance={this.appearance}
						behavior={this.behavior}
						paging={this.paging}
						filtering={this.filtering}
						editing={this.editing}
						ref={this.grid}
						onColumnClick={this.handleColumnClick}
					>
					</Grid>
				</div>
			</div>
				);
	}
}
ReactDOM.render(<App />, document.querySelector("#root"));
export default App;

Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/