Custom "Add Column Window"

[tristan.bergstra94]

hello,
We are currently using a smart grid to represent a data structure in our db. As a result, when we add a new column, we reflect that in our database.
However, sometimes when we create a new column, we need to define additional data points for that column.
Is it possible to override or customize the “New Column” window to include additional form fields?
Alternatively, is it possible to override the “Add Column” button to open up a new custom window of my own design?
 
We are currently using the react library.

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

[tristan.bergstra94]

Are you able to tell me how I can intercept/handle the “openColumnDialog” event?

[admin]

Hi Trist B,
There is no openColumnDialog event in our DataGrid component. My colleague prepared an example which shows how to open a custom window when a column is clicked so basically you decide when you open and close that custom window and what action is will perform – add column or something else based on your web application needs.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[tristan.bergstra94]

hey Peter, thanks for your response.
I read the following in the grid documentation
“DataGrid has built-in UI for Dynamically Adding a New Column. To enable it, you need to set the ‘editing.addNewColumn.visible’ property to true.
Press the ‘+’ button to open the ‘New Column Dialog’. On open and close, the ‘openColumnDialog’ and ‘closeColumnDialog’ events are fired.”
How can I listen to those events?

[admin]

Hi Trist B,
Where exactly did you read this? There are no such events.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[tristan.bergstra94]

https://www.htmlelements.com/react/demos/grid/add-new-column/
columns: dynamic columns

[admin]

Hi Trist B,
Ok, the event is missing from the Grid API and we will add it. You can bind to this event as a normal Javascript event by using addEventListener.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[tristan.bergstra94]

Would you be able to provide an example of it’s use? I was trying earlier and was struggling a bit.

[YavorDashev]

Hi Trist B,
I have create a quick code snippet showcasing how to add the event listeners so that it may simulate the ‘closeColumnDialog’ and ‘openColumnDialog’ events.

	 componentDidMount() {
			const addColumnButton = document.querySelector('.smart-add-new-column');
			addColumnButton.addEventListener('click', () => {
				console.log('opening column dialog');
				setTimeout( () => {
					let dialogWindow = document.querySelector('.smart-window'),
						closeButtons = dialogWindow.querySelectorAll('.smart-cancel-button');
						for(let i=0; i< closeButtons.length; i++) {
							closeButtons[i].addEventListener('click', () => {
								console.log('closing dialog')
							});
						}
				},100)
			});
	 }

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

[tristan.bergstra94]

hey Yavor,
Thank you for this example. I noticed your example does not explicitly use or listen to the closeColumnDialog and openColumnDialog events. Are those events actually available for listening?
Also, in your example, will thank override the existing onclick logic that handles the opening of the default column dialog window?

[YavorDashev]

Hi Trist B,
These events are not yet available and the code example that I have sent you does not overwrite the default functionality of default column dialog window event.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts