JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › Custom "Add Column Window"
Tagged: datagrid ui, grid, react datagrid add column
- This topic has 11 replies, 3 voices, and was last updated 3 years, 2 months ago by YavorDashev.
-
AuthorPosts
-
September 11, 2021 at 6:13 pm #102197tristan.bergstra94Member
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.September 13, 2021 at 9:08 am #102198YavorDashevMemberHi 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/September 18, 2021 at 3:04 pm #102228tristan.bergstra94MemberAre you able to tell me how I can intercept/handle the “openColumnDialog” event?
September 18, 2021 at 3:58 pm #102229adminKeymasterHi 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/September 18, 2021 at 4:30 pm #102231tristan.bergstra94Memberhey 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?September 18, 2021 at 4:56 pm #102232adminKeymasterHi Trist B,
Where exactly did you read this? There are no such events.
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/September 18, 2021 at 4:59 pm #102233tristan.bergstra94Memberhttps://www.htmlelements.com/react/demos/grid/add-new-column/
columns: dynamic columnsSeptember 18, 2021 at 5:08 pm #102234adminKeymasterHi 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/September 18, 2021 at 9:05 pm #102235tristan.bergstra94MemberWould you be able to provide an example of it’s use? I was trying earlier and was struggling a bit.
September 20, 2021 at 6:04 am #102236YavorDashevMemberHi 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/September 22, 2021 at 6:09 pm #102284tristan.bergstra94Memberhey 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?September 23, 2021 at 12:13 pm #102293YavorDashevMemberHi 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/ -
AuthorPosts
- You must be logged in to reply to this topic.