Products

[admin]

Hi edvardsmarkff,

For styling Grid cells, please refer to https://www.htmlelements.com/docs/grid-styling-cells/ and for applying templates look at https://www.htmlelements.com/demos/grid/column-dynamic-template-with-components/. You can see in the example, that the “template” is a function. We check whether there is a template. If there is not a template, we set it. Next, when the cell is re-rendered, we have a template and just update it instead of creating new html elements which will affect the performance.

Regards,
Markov

Smart UI
https://www.htmlelements.com/

[admin]

Hi Ferris,

As mentioned in the article, you can apply styles dynamically, too by using a callback function cellsClassName

cellsClassName: (index, dataField, value, rowData, row) => {
                if (value < 3) {
                    return 'cell-class-2';
                }

                if (index < 5) {
                    return 'cell-class-1';
                }

                if (index >= 5) {
                    return 'cell-class-3';
                }
            }
        },

The custom CSS class may or may not include borders. However, this would not remove the Grid’s default cell borders, they will be inside the cell.

Regards,
Markov

Smart UI
https://www.htmlelements.com/

[admin]

Hi Ferris,

The approach you’re using will not work, because Cells are reused while scrolling which means that this CSS class is applied to a physical cell html element which will be the same one when you scroll up/down or left/right. The good news are that we have API for styling cells. Please, look at https://www.htmlelements.com/docs/grid-styling-cells/. The help article shows how to style cells in the Grid.

Regards,
Markov

Smart UI
https://www.htmlelements.com/

[admin]

Hi Loick,

Unfortunately, that is not possible. I will create a work item for adding this feature in some of the next releases of the Scheduler component.

Regards,
Peter

[admin]

Hi Daniz,

The templates define a specific cell rendering. The rowSpan functionality is supported for cells with standard rendering. The feature cannot be applied for template cells.

Regards,
Peter

[admin]

Hi Loick,

You can define the first day of week by using the ‘firstDayOfWeek’ property. For monday, it should be 1.
As for start hour, you can define which hours per day are available and you can interact with them by using a property called ‘available’.
For example, to make the available hours from 5 to 18, you can use available: [{ start: 5, end: 18 }]

Hope this helps.

Regards,
Peter

[admin]

Hi,

Have you checked https://www.htmlelements.com/docs/router/ which shows how to configure the router?

[admin]

Hi ygenin,

The reported issue is confirmed and resolved in the latest version of our software. Thank you for the feedback!

Regards,
Boyko

[admin]

Ok, Thank you for the suggestion.

[admin]

Thank you for the feedback. We will check the provided details. If there is an issue on our side, it will be resolved in a future version of our product.

[admin]

Hi Oliver,

Create a Hidden Column with dataField = your Display Field and your column with the Display Field will work

Regards,
Peter

[admin]

Hi Oliver,

The workaround is valid for any use case. Adding a hidden column is possible in any app using a Grid.

Regards,
Peter

[admin]

We offered a workaround. A fix will come in a future version.

[admin]

As a workaround, you can create a column which is hidden and has its DataField = DisplayName

[admin]

Hi,

The thing is that the add new tab button adds an empty tab. It does not add a new tab with the template structure you added in the template i.e the new tab does not have ng-container in it. For that purpose we can use ng-template. Please, take a look at the updated code below

import { Component, AfterViewInit, ViewChildren, QueryList, ViewChild, ComponentRef, ChangeDetectorRef, ViewContainerRef } from '@angular/core';
import { TabItem, TabItemComponent, TabsComponent } from 'smart-webcomponents-angular/tabs';
import { ThingComponent } from './thing.component';
import { ViewRefAnchorDirective } from './view-ref-anchor.directive';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  // I am expecting this list to be updated when new tabs are added.
  smartItems: TabItem[] = [];

  @ViewChildren(ViewRefAnchorDirective) anchors = new QueryList();

  @ViewChild('tabs', {read: TabsComponent, static: false}) tabs!: TabsComponent;
  @ViewChild('dynamic', { read: ViewContainerRef })

  viewRef!: ViewContainerRef;

  numTabs = 0;

  ngAfterViewInit(): void {
    this.tabs.getTabs().then(tabs => {
      this.numTabs = tabs.length;
    });

    this.anchors.forEach(tab => this.loadComponent(tab as any));
 	this.smartItems = Array.from(document.querySelectorAll('smart-tab-item'));
	 }

  onAddNewTabClick(event: Event) {
    this.tabs.getTabs().then(tabs => {
      this.numTabs = tabs.length;

      	// create a new dynamic component.
		const container = document.createElement('div');
		const componentRef: ComponentRef<ThingComponent> =  this.viewRef.createComponent(ThingComponent);
	
		// dynamically add the component to a new container host element.
		container.appendChild(componentRef.location.nativeElement);
		// update tabs.
		this.tabs.update(tabs.length-1, 'Updated Tab', container);
		
		
		this.smartItems = Array.from(document.querySelectorAll('smart-tab-item'));
					
    });
  }

  loadComponent(viewRefAnchor: ViewRefAnchorDirective) {
    viewRefAnchor.viewContainerRef.clear();
    return viewRefAnchor.viewContainerRef.createComponent(ThingComponent);
  }
}

Hope this helps.

Regards,
Peter

[Author]

Posts