Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #102197
    Up
    0
    Down

    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.

    #102198
    YavorDashev
    Member
    Up
    0
    Down

    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/

    #102228
    Up
    0
    Down

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

    #102229
    admin
    Keymaster
    Up
    0
    Down

    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/

    #102231
    Up
    0
    Down

    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?

    #102232
    admin
    Keymaster
    Up
    0
    Down

    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/

    #102233
    #102234
    admin
    Keymaster
    Up
    0
    Down

    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/

    #102235
    Up
    0
    Down

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

    #102236
    YavorDashev
    Member
    Up
    0
    Down

    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/

    #102284
    Up
    0
    Down

    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?

    #102293
    YavorDashev
    Member
    Up
    0
    Down

    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/

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.