@yavordashev

@yavordashev

Forum Replies Created

Viewing 15 posts - 16 through 30 (of 34 total)
  • Author
    Posts
  • in reply to: Scheduler delete button in a repeat event #102241
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Custom "Add Column Window" #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/

    in reply to: Esc button does not close tabbed window #102217
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Questions about cell editing #102216
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: How to force column headers to wrap #102215
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: MultiComboInput #102213
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Custom "Add Column Window" #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/

    in reply to: Grid Column Width Based on value of the column #102194
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Blazor data grid not showing data #102185
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Programmatically adding elements to GanttChart #102183
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Remove Gantt chart check boxes #102182
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: Kanban column visibility #102168
    YavorDashev
    Member
    Up
    0
    Down

    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/

    in reply to: artefact in Grid for 'growAndShrink' #102145
    YavorDashev
    Member
    Up
    0
    Down

    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
    Member
    Up
    0
    Down

    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/

    in reply to: don't work a wrap for virtual Tree-grid #102142
    YavorDashev
    Member
    Up
    0
    Down

    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/

Viewing 15 posts - 16 through 30 (of 34 total)