Products

[Hristofor]

Hi Aks26,
disabled property should disable the element but there seems to be an issue with it that will be fixed in the next release. May I suggest adding the following CSS to accomplish the same result in disabling user interaction for the component:

smart-gantt-chart {
    cursor: default;
    pointer-events: none;
}

You can specify the CSS selector to work only when adding the disabled attribute or something else (smart-gantt-chart[attribute-name]).
Furthermore, you can disable resizing or dragging for individual tasks via the disableResize/disableDrag attributes. You can do that in the task definition in dataSource or dynamically via the updateTask method. Here’s a demo
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi Aks26,
Setting the dataSource to a new value will re-render the GanttChart with the new data. There is also a clearTasks method that removes all tasks from the element leaving it empty. There’s also a refresh method that recalculates the size of the GanttChart.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi Aks26,
Unfortunately it is not posssible to hide the header details section of the Timeline header via the official API of the GanttChart component at this time. The header is designed to have two segments. I can only suggest that you to not set content to that section via the formentioned <b>timelineHeaderFormatFunction</b>.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi Aks26,
yes, you can customize the header of the Timeline with any content you wish via the <b>timelineHeaderFormatFunction</b>. Check out this demo on how to use it. You can read more about it in the official API document. Please note that this callback is used to customize both timeline header sections where the third argument in the function indicates whether it is the header details ( top level header segment) or header section that you are currently customizing.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi ctstrist,
thank you for the feedback. There’s an issue with the ComboBox that we will fix in the next release of the elements. Regarding your approach, clearing the items after every operation is recommended. If you don’t clear the items they will be present in the ComboBox’s dataSource and if you enter the same value, the element will not create a new item for it, because it’s already present and calling select on the last item might select something completely different.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi edwardsmarkf,
currently there’s no way to determine what was clicked from the details of the event.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi edwardsmarkf,
when a token is clicked the drop down opens and ensures the clicked item is visible, that is one of the features of the ComboBox. Unfortunately, currently there’s no way to hook to that and add custom logic. The opening event also doesn’t provide a way to determine when the event is called from a token click or not.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi edwardsmarkf,
itemClick event is what I was refering to, yes. Your example is working but keep in mind that Smart Elements will migrate to ShadowDOM by default in the near future. This means that targeting ComboBox’s internal elements via selectors will not work. Officialy there isn’t a way to achieve what you need through the API of the element ( at least for now ). That is why i didn’t suggest a solution. However there’s one more thing you can look up if you wish. There’s an opening event that you can listen to. Since clicking on a token opens the drop down by default you can somehow check if the token was clicked to determine when to call your function instead and prevent the opening of the drop down, by calling `event.preventDefault()’.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi edwardsmarkf,
thank you for you feedback.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi edwardsmarkf,
unfortunately there isn’t an event that is fired when a token inside the input is clicked. However there is an itemClicked event that is fired when an item inside the drop down is clicked if that may be helful to you. We might consider adding such an event to the ComboBox element in the future.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi olaf@xso,
The problem is that you are applying the Grid settings on the created hook while it should be during mounted. Created is called before the template is mounted.
Another issue is that you’ve missed to add the reference for the Splitter component:

import "@smarthtmlelements/smart-elements/source/styles/smart.default.css";
import "@smarthtmlelements/smart-elements/source/modules/smart.splitter.js";
import "@smarthtmlelements/smart-elements/source/modules/smart.grid.js";

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

[Hristofor]

Hi olaf@xso,
For some reason it is necessary to include a wrapper around the router-view in order to work. This should fix the problem:

<template>
  <div>
    <smart-splitter>
      <smart-splitter-item size="180">
        <router-link to="/">Home</router-link><br />
        <router-link to="/about">About</router-link>
      </smart-splitter-item>
      <smart-splitter-item>
        <div>
          <router-view :key="$route.path" />
        </div>
      </smart-splitter-item>
    </smart-splitter>
  </div>
</template>

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

[Hristofor]

Hi olaf@xso,
Add the following CSS to you CSS stylesheet and import it in your App.vue file:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

If you don’t want to fetch the icons from the web and instead use yout localy downloaded files from NPM just replace the urls in the font-face with the path to the appropriate files in your local storage.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi Matteo,
1) The timeline header can be customized using the timnelineHeaderFormatFunction. You can set a custom formatting function to that property in order to customize the text displayed in each cell inside the header. The function contains the following arguments (date, type, isHeaderDetails).

• date – the date that will be displayed inside the cell.
• type – is the view type for the date (year, month, week, day, hour)
• isHeaderDetails – a flag indicating whether this is a cell from the header details container(the first level of the header inside the timeline) or the second.

Here’s a demo on how to customize the dates in the header.
2) This feature is currently unavailable but we will include it in a future release. Currently we are working on a new major feature for the Gantt Chart – Resource management.
3) The window for task editing can be completely customized via the popupWindowCustomizationFunction. It accepts a callback with three arguments:

• target – the actual window.
• type – the type of editing ( ‘task’ or ‘connection’ are currently supported)
• taskIndex – the index of the task that is going to be edited.

Here is a demo showing how to customized the task editor.
We have a tutorial on how to create and apply settings on the elements using Vue.js. Here’s the link.
You can also customize the property editors for each task column using the customEditor property on specific taskColumns. Here’s an example on that.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi feffe,
yes, you can use the ListItem element even if it’s outside the ListBox component. May I suggest you create custom components using the Smart Library instead of the WebComponents. It’s simpler and easier to create custom elements using the Smart Framework. Smart elements also support ShadowDOM by simply settings the Smart.EnableShadowDOM flag to true. We have a complete tutorial on how to create custom elements using the Smart Framework. Here’s the link to the documentations. Here’s how the definition of the same element looks like using Smart:

	Smart('vanilla-webcomponent', class VanillaWebcomponent extends Smart.ContentElement {
	 /** Element's template. */
	 template() {
	   return '<div class="custom-element-container"><smart-list-box grouped filterable sorted selectionMode=”zeroOrOne”>' +
                       '<smart-list-item>Washington, Connecticut</smart-list-item>' +
                       '<smart-list-item>Washington, Iowa</smart-list-item>' +
                   '</smart-list-box></div>';
	 }
	 });

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

[Author]

Posts