Products

[Hristofor]

Hi ggavrilut,
Gantt Chart projects with tasks attribute can only be initialized through the dataSource property or via the insertTask method. Setting the tasks attribute of a project dynamically (after initialization) will not affect the element. Here is an example on how to add a new Project with two child tasks to the end of the task list ( or at index 99 there are many items present) dynamically via the insertTask method:

document.querySelector('smart-gantt-chart').insertTask(99, {
label: 'New Parent Project',
dateStart: '2020-02-17',
dateEnd: '2020-05-04',
tasks: [
{
label: 'SubTask 1',
dateStart: '2020-03-17',
dateEnd: '2020-04-25'
},
{
label: 'SubTask 2',
dateStart: '2020-04-17',
dateEnd: '2020-06-25'
}
]
})

Another approach is to directly set a new project/task structure to the dataSource property with the changes that you want to make. In order to do so, first get the current dataSource by calling ganttChart.dataSource. This will return the current structure of the GanttChart tasks and projects. Then modify the dataSource by adding new tasks/projects and re-set it again as the new dataSource – ganttChart.dataSource = newDataSource.
Regarding your approach:
There seems to be an issue with the addTask method by not removing the task before it is added to the new project. However that method will not be part of the API of the new upcoming GanttChart major update this month.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi Jozef,
The closedItems property of the Smart.DockingLayout returns the instances of the LayoutPanels that have been closed. A LayoutPanel is one of the main structural components of the Smart.DockingLayout and represents a Smart.TabsWindow component that contains TabItems. When clicking the close button of a TabItem you are closing a single TabItem inside the LayoutPanel and a close event is fired. The close event is also fired when a LayoutPanel is closed so you need to check the even.target to determine the cause for the event. The close event that is fired when a TabItem is clicked comes from the Smart.Tabs component which is part of the LayoutPanel and contains a event.detail object that holds the tab item index of the closed item.
Since the LayoutPanels are actually Smart.TabsWindow components they provide the same API as Smart.Tabs component for Tab items modification. For example you can add/remove/update any TabItem inside the LayoutPanel via the following syntax:

const dockingLayout = document.querySelector('smart-docking-layout'),
layoutPanels = dockingLayout.items,
firstPanel = layoutPanels[0];
//If the first panel has more than one tab item you can close one of them
const tabItems = firstPanel.items;
firstPanel.close(tabItems[0]);
//or insert a new tab item
firstPanel.insert(1, { label: 'New Tab item', content: 'Content ...' });

You can read more about Smart.TabsWindow API in the following tutorial.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi Walter,
Thank you for the report. Synchronized projects calculate their duration based on the working time of their tasks. However in the current version of the Smart.GanttChart this does not happen when loading a dataSource. Instead the validation occurs on other occasions, for example after a project’s task has been dragged or resized. This will be fixed in our next release. As a workaround I can suggest switching the GanttChart to ‘resource’ view and then back to ‘week’. Switching to ‘resource’ view will trigger the synchronized projects validation.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi Walter,
Thank you for the feedback. The autoSchedule feature in the current version works only if the connection.target points to the index of a task not it’s id. This will be updated in order to support task ids as well in our next release. The connectionEnd event should return the indexes of the start and end tasks in the event.detail but it doesn’t which will also be fixed in our next release. As a solution may I suggest using the getTaskIndex( task: GanttChartTask) in order to get the index of the target task. The method accepts Smart.GanttChart task object or a direct DOM reference to the HTMLElement corresponding to the task id.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi MilesGibson,
the Smart.Scheduler supports one resource item per event. That means that you can have any number of resources and an event can have any number of resources assigned but only one resource item per event. For example if you have a resource called employees its dataSource can contain a list of items where each item is a separate employee. You can assign one employee to an event since all employees are part of the same resource. However if you create the employees as separate resources instead you will be able to set multiple resources(employees) to an event, for example:

dataSource = [
 {
        label: 'Website Re-Design Plan',
        dateStart: new Date(year, month, date, 9, 30),
        dateEnd: new Date(year, month, date, 11, 30),
        andrew: 1,
        brian: 1,
        steven: 1
  }
];
resources = [
                {
                    label: 'andrew',
                    value: 'andrew',
                    dataSource: [
                        {
                            label: 'Andrew Olsen',
                            id: 1
                        }
                    ]
                },
                {
                    label: 'brian',
                    value: 'brian',
                    dataSource: [
                        {
                            label: 'Brian Reed',
                            id: 1
                        }
                    ]
                },
                {
                    label: 'steven',
                    value: 'steven',
                    dataSource: [
                        {
                            label: 'Steven Shields',
                            id: 1
                        }
                    ]
                }
            ];

Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi MilesGibson,
Here’s a demo that shows how to set two resources to each Scheduler event. Clicking on the radio buttons in the options area of the demo changes the order of the resources which determines the color of the events in the Scheduler. Resources are assigned to the events as key:value pairs, for example:

priorityId: 2,
employeeId: 2,

where the key represents the value of the resource and the value in the pair represents the id of the item from the resource dataSource property. Assigning resources to an event can also be done via the Window editor by double clicking on an event. You can read more about Scheduler Resources in the following dedicated topic.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi Walter,
The dateStart and dateEnd property determine the timeline duration. By default if not set, they are automatically calculated depending on the tasks of the Smart.GanttChart. Changing the dateEnd property to a different date will update the timeline. Here’s more information on the dateEnd property from the API.
If you want to lear more, here’s is a dedicated topic on the Timeline features of the Smart.GanttChart.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi Walter,
Your code is correct, however the ‘week’ view of the Smart.GanttChart shows the weeks of the month on the first header row and the days on the second. This means that the cells for the days are aligned according to the weeks since that is the view. In ‘week’ view, months are not displayed. Changing the labels of the header does not change the cell rendering logic for the view. It only changes the label. So to you avoid the confusion you could include the week range(e.g. first date of week – last day of week) instead of only the year and monh name. We have a similar example that shows how to display the first and last days of the week for ‘month’ view. When customizing the cells for ‘week’ view the date argument of the timelineHeaderFormatFunction contains the first date of the week.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi edwardsmarkf,
Changing the position of the Smart.Window while minimized is not possible via the API of the element at the moment. The default position of the window when minimized is the bottom left corner of the viewport. Every other minimized window will be positioned right next to it. The minimize event should not be used to change the position of the minimized window.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com
Tags:
web components, web component, custom element, smart elements, smart framework

[Hristofor]

Hi edwardsmarkf,
The window is moving because it is positioned via CSS to always be in the center of the page. When you are zooming on/out you are changing the size of the page thus the window is also repositioning to be in the center. If the Smart.Window hasn’t been resized or dragged ( static window ) it’s size and position can be set via CSS. If it has been manipulated then via inline Javascript. By default Smart.Window component is positioned to be in the center via the following CSS styles:

 top: calc(50% - var(--smart-window-default-height)/ 2);
 left: calc(50% - var(--smart-window-default-width)/ 2);
 width: var(--smart-window-default-width);
 height: var(--smart-window-default-height);

The following CSS variables: --smart-window-default-width and --smart-window-default-height are used to set the default width and height of the Smart.Window component.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi edwardsmarkf,
By default the Smart.Window component is positioned via CSS using the top/left CSS properties. However if the Window has been resized/dragged you will have to set the top/left inline in order to take precedence. So initially it is correct to style it via CSS top/left properties.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi vinci goh,
After following your steps in order to create a test demo, we didn’t encounter any issues whatsoever. So I will share the full code for the demo so you can have a look at how to implement the input/output parent-child behavior in your working scenario:
Here’s the HTML of the ‘child-component.component.html’:

<smart-grid #grid></smart-grid>

Here’s the ‘child-component.component.ts’:

import { Component, ViewChild, AfterViewInit, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
import { GridComponent, GridColumn, DataAdapter, Smart, GridCell } from 'smart-webcomponents-angular/grid';
import { GetData } from '../../../common/data'
@Component({
	selector: 'app-child-component',
	templateUrl: './child-component.component.html',
	styleUrls: ['child-component.component.css'],
	encapsulation: ViewEncapsulation.None
})
export class ChildComponent implements AfterViewInit {
	@ViewChild("grid", { read: GridComponent, static: false }) grid: GridComponent;
	@Output() myClicked: EventEmitter<any> = new EventEmitter<any>();
	ngAfterViewInit(): void {
		const that = this;
		that.grid.dataSource = new Smart.DataAdapter(
			<DataAdapter>{
				dataSource: GetData(500),
				dataFields:
					[
						'id: number',
						'firstName: string',
						'lastName: string',
						'productName: string',
						'quantity: number',
						'price: number',
						'total: number'
					]
			});
		that.grid.columns =
			<GridColumn[]>[
				{ label: 'First Name', dataField: 'firstName', columnGroup: 'name' },
				{ label: 'Last Name', dataField: 'lastName', columnGroup: 'name' },
				{ label: 'Product', dataField: 'productName', columnGroup: 'order' },
				{ label: 'Quantity', dataField: 'quantity', columnGroup: 'order' },
				{ label: 'Unit Price', dataField: 'price', cellsFormat: 'c2', columnGroup: 'order' },
				{ label: 'Total', dataField: 'total', cellsFormat: 'c2', columnGroup: 'order' }
			];
		that.grid.paging.enabled = true;
		that.grid.pager.visible = true;
		that.grid.selection = {
			enabled: true,
			allowCellSelection: true,
			allowRowHeaderSelection: true,
			allowColumnHeaderSelection: true,
			mode: 'extended'
		};
		that.grid.addEventListener('cellClick', function (event: CustomEvent) {
			const gridCell = <GridCell>event.detail.cell;
			that.myClicked.emit(gridCell.element);
		});
	}
}

Here’s the ‘app.component.html’:

<app-child-component (myClicked)="log($event)"></app-child-component>

Here’s the ‘app.component.ts’:

import { Component, ViewChild, AfterViewInit, ViewEncapsulation, Input } from '@angular/core';
@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['app.component.css'],
	encapsulation: ViewEncapsulation.None
})
export class AppComponent implements AfterViewInit {
	log(gridCell: any) {
		console.log(gridCell);
	}
}

The example shows how to emit the clicked grid cell element to the parent component but you can replace that with any details for the cell you need. If you need further assistance or have any questions feel free to ask.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi Ivan,
There are two ways to add a new tab item to a panel:
1) Via the update method of the Smart.DockingLayout. You can read more about it here. You can also modify existing tab items via this method by passing it the index of the target item. For example, dockingLayout.update(dockingLayout.items[0], { items: [ { index: 1, label: 'New Tab item' }] });.
2)Via the insert method of the panel itself. You can get a list of all panels of the Smart.DockingLayut via the items getter and then call the insert method of the panel. For example, panel.insert(1, { label: 'New Tab item' });.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi anna,
Unfortunately, at the moment it is not possible to modify the logical operators of the Smart.QueryBuilder.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi anna,
you can customize the operations list with custom operations and set custom editors for each operation but the Property field can not be changed. It is always a drop down list that allows to select an operation. Here’s a demo that illustrates how to create custom operations with custom editors.
With the label attribute of each field object in the fields property of the Smart.QueryBuilder you can customize the label that will appear in the drop down list item for the property. The filterOperations attribute defines the list of operations that will be available for selection via the operations drop down list.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Author]

Posts