Products

[YavorDashev]

Hi Javi Navarrete,
I would like to answer your questions in a convenient way:
1. Repeating event occurances are treated as date occurrences of the event instead of being separate events. Each occurrence has a unique date that the event repeats on. An occurrence can be modified. When modified it is treated as an exception of the repeating Event, that is why in the context menu the ‘Delete’ option is displayed too.
More info about this you can find in the API docs of the Scheduler component: https://www.htmlelements.com/docs/scheduler-events/
2. For this I have created a code snippet which will enable you to have this type of functionality:

window.onload= function () {
    const scheduler = document.getElementById('scheduler');
    scheduler.addEventListener('editDialogOpening', (event) => {
        const eventDetails = event.detail;
        if (eventDetails.type === 'confirm') {
            setTimeout(() => {
                const dialogButtons= eventDetails.target.querySelectorAll('.smart-scheduler-window-button');
                for( let i= 0; i < dialogButtons.length; i++ ) {
                    dialogButtons[i].addEventListener('click', () => {
                        console.log('dialog button clicked');
                    })
                }
            }, 100);
        }
    });
}

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/

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

[YavorDashev]

Hi Jozef,
This is the expected behavior of the DockingLayout, but we may consider this functionality for future development.
In the mean time I have created a workaround how to have this functionality:

 dockingLayout.addEventListener('keyup', (event) => {
        const tabComponent = document.activeElement;
        if(event.key === 'Escape' && tabComponent.classList.contains('smart-tabs')) {
            tabComponent.parents[3].close();
        }
    });

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/

[YavorDashev]

Hi aconley,
I would like to answer your questions in a convenient way:
1. You can set the column properties like in the following code snippet so that when Tab key is pressed the editing of the cell is initialized and when typing a value it will open the dropdown list.
Code:

	columns: GridColumn[] =
	[
	  { label: 'Beverage Type', dataField: 'type', width: 250,
        editor: {
            template: 'autoComplete',
            dropDownButtonPosition: 'right',
            autoOpen: true
            }
        },
	  { label: 'Calories', dataField: 'calories', width: 180 },
	  { label: 'Total Fat', dataField: 'totalfat', width: 'auto', allowResize: false},
	  { label: 'Protein', dataField: 'protein' }
	]

2. For this scenario I have added a work item for it, because this is not expected behavior.
For your last inquiry regarding the typing I wasn’t able to reproduce it and I was able to set the ‘dblClick’ value like so:

	editAction:GridEditingAction = "dblClick";
	sorting = {
		enabled: true,
        action: this.editAction
	}

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

[YavorDashev]

Hi aconley,
I have created a quick code snippet using CSS so that it will showcase/guide you to how to have this functionality.
CSS code snippet:

smart-grid-column[data-field='name'],
smart-grid-column[data-field='name'] .smart-label {
	line-height: initial!important;
	white-space: pre-line;
	text-overflow: initial!important;
}

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/

[YavorDashev]

Hi xyzzy,
I have created a quick code snippet so that I can showcase you how to have the functionality that you need.

div @ref="divRef" style="height:1000px">
 <MultiComboInput DropDownButtonPosition="DropDownButtonPosition.Right" OnChange="@ChangeEmit" DataSource="@summaries"></MultiComboInput>
</div>
@code {
    private void ChangeEmit (Event EventObj)
    {
        var detail = EventObj["detail"];
        Console.WriteLine(detail);
    }

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/

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

[YavorDashev]

Hi Ronak,
If you set the width property of a column to ‘auto’ and the allowResize(disables changing the width of the column) property to false this way when you have large value the GridColumn width will adjust so that the value inside the cell will not overflow it.
I have prepared a quick code snippet how to set your column:

	behavior = {
        columnResizeMode: 'growAndShrink'
         };
	columns: GridColumn[] =
	[
	  { label: 'Name', dataField: 'name', width: 250 },
	  { label: 'Beverage Type', dataField: 'type', width: 250 },
	  { label: 'Calories', dataField: 'calories', width: 180 },
	  { label: 'Total Fat', dataField: 'totalfat', width: 'auto', allowResize: false},
	  { label: 'Protein', dataField: 'protein' }
	];

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/

[YavorDashev]

Hi aconley,
With the definition of the Grid component is normal to have empty cells, because instead of ‘Field’ property you have to use the ‘DataField’ in order to bind the column with the corresponding data.
I have modified your code example in order to showcase you how to set up your Grid properly.

@using Smart.Blazor
<div>
    <Grid DataSource="data">
        <Columns>
            <Column DataField="RowId" Label="Row Id" />
            <Column DataField="RowType" Label="Row Type" />
        </Columns>
    </Grid>
</div>
@code {
    private  List<object> data;
    public class Thing
    {
        public int RowId { get; set; }
        public string RowType { get; set; }
    }
    protected override void OnInitialized()
    {
        base.OnInitialized();
        data=new List<object> ()
        {
            new Thing {RowId = 1, RowType = "Test 1"},
            new Thing {RowId = 2, RowType = "Test 2"}
        };
        Console.WriteLine(data.First());
    }
}

Also we are aware that the documentation can be a little hard to comprehend sometimes, but we try to improve it constantly!
Link to one of the demos:https://www.htmlelements.com/blazor/blazor-ui/demos/blazor-grid?id=basic
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/

[YavorDashev]

Hi Maserati,
I have tried the RemoveTask method and it works as intended, also as Peter shared a code example which also demonstrates this method.
Maybe if you share a bit more context/code example then we will be able to evaluate your issue and be able to assist 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/

[YavorDashev]

Hi Maserati,
By default the GanttChart doesn’t support single selection, but I have created a JavaScript workaround for your scenario which enables you to have such functionality.
JavaScript part:

   const ganttChart = document.querySelector('smart-gantt-chart');
    let selectedTasks;
    ganttChart.addEventListener('change', (event) => {
        selectedTasks= ganttChart.getSelectedTasks();
        if ( selectedTasks.length >= 1 ) {
            ganttChart.classList.add('disabled-selection');
        }
        else {
            ganttChart.classList.remove('disabled-selection');
        }
    });

Also some necessary CSS:

.smart-gantt-chart.disabled-selection .smart-table-select-row{
    pointer-events: none;
}
.smart-gantt-chart.disabled-selection .smart-table-select-row.selected {
    pointer-events: initial;
}

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/

[YavorDashev]

Hi Mehran,
By default the Kanban component doesn’t support this functionality, but I have created a quick ‘workaround’ on how to achieve the functionality you need.
In your JS file:

window.onload = function () {
    const kanbanColumns = document.querySelectorAll('.smart-kanban-column');
    kanbanColumns[0].style.visibility = 'hidden';
}

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
SmartUI Team
https://www.htmlelements.com/

[YavorDashev]

Hi Oleg Ilin,
I have tested this use case in the most major browsers and it appears this behavior to occur only on our website.
If you test it https://www.htmlelements.com/demos/grid/row-resize/index.htm that the issue will not be present.
We will fix it as soon as possible.
I also would like to thank you for your cooperation and reporting this issue!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[YavorDashev]

Hi davout,
I have prepared a quick code snippet using the input-group element(https://www.htmlelements.com/demos/input-group/with-custom-elements/) for a base for the snippet:

    <div class="input-group">
        <smart-input class="form-control" placeholder="Recipient's username"></smart-input>
        <div class="input-group-append">
            <smart-button type="button">X</smart-button>
        </div>
    </div>

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/

[YavorDashev]

Hi Oleg Ilin,
I was able to reproduce the issue as you do and this behavior is definitely is a bug and I have added a work item for this.
We will work to fix it as soon as we are able to!
I also would like to thank you for reporting this scenario as it helps us improve our products constantly!
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