Telerik Forums
Kendo UI for Angular Forum
1 answer
165 views

I am trying to utilize the WindowService to dynamically create a Window instance from another component. The kendoWindowContainer lives in my app.component.html, but I am using the WindowService to create a window instance in a child component. 

Right now, when our app times out, and a log out is triggered, the window stays opens.

I've tried to use the WindowRef as a constructor parameter, also with the @Optional() decorator, and as a ViewChild, and window is always undefined. Not sure what I am doing wrong when trying to get the WindowRef reference.

Simeon
Telerik team
 answered on 20 Jul 2023
0 answers
132 views

Hi,
I am making a standard treelist component based on kendo treelist, and im having some problem which i dont know how to fix it. 
2. I want to allow user can add kendo treelist column and use ng-template KendoTreelistCell as `Usage code` below but it keep throw this error:
Uncaught (in promise): NullInjectorError: R3InjectorError(PMarketingModule)[OptionChangesService -> OptionChangesService -> OptionChangesService -> OptionChangesService]: 
  NullInjectorError: No provider for OptionChangesService!
NullInjectorError: R3InjectorError(PMarketingModule)[OptionChangesService -> OptionChangesService -> OptionChangesService -> OptionChangesService]: 
 NullInjectorError: No provider for OptionChangesService!
https://stackblitz.com/edit/angular-keazja?file=src%2Fapp%2Fapp.component.ts
My component treelist:

export class PKendoTreelistComponent<T> implements OnInit, AfterViewInit {
  //Retrive input with many type of input array
  @Input() rootData: Subject<T[]> = new Subject<T[]>();
  @Input() hasChildrenFn: (item: T) => boolean;
  @Input() fetchChildrenFn: (item: T) => T[];
  @ViewChild('customTreeList') public customTreelist: TreeListComponent;
  @ViewChild('treelistContent', { static: true }) treelistContent!: TemplateRef<any>;
  @ContentChildren(PKendoTreeListColumnComponent) columns;
  @ContentChildren(ColumnGroupComponent) columnGroups;
  constructor() {}
  ngOnInit(): void {
    console.log(this.treelistContent);
  }
  ngAfterViewInit(): void {
      this.customTreelist.columns.reset([
        this.customTreelist.columns.toArray()[0],
        this.columnGroups.toArray(),
        this.customTreelist.columns.toArray().slice(1)
      ])
  }
}
<kendo-treelist
    #customTreeList
    kendoTreeListExpandable
    [data]="rootData | async"
    [fetchChildren]="fetchChildrenFn"
    [hasChildren]="hasChildrenFn"
    [height]="400"
    >
    <ng-content></ng-content>
</kendo-treelist>


@Component({
  selector: 'app-p-kendo-treelist-column',
  template: `<kendo-treelist-column
  #CustomTreelistColumn
  [field]="field"
  [title]="title"
  [width]="width"
  [expandable]="expandable"
  >
</kendo-treelist-column>`
})
export class PKendoTreeListColumnComponent {
  @ViewChild(ColumnComponent) public realColumn: ColumnComponent;
  @Input() field: string = '';
  @Input() title: string = '';
  @Input() width: number = 0;
  @Input() expandable: boolean = false;
  constructor() { }
  ngAfterViewInit() {
    console.log(this.realColumn)
  }
}



Usage:

      <app-p-kendo-treelist
      [rootData]="listGroupWebTreeList"
      [hasChildrenFn]="hasChildren"
      [fetchChildrenFn]="fetchChildren"
    >
      <kendo-treelist-column [expandable]="true" class="d-flex">
        <ng-template kendoTreeListCellTemplate let-dataItem>
          {{dataItem.VNGroupName}}
        </ng-template>
      </kendo-treelist-column>
      </app-p-kendo-treelist>


Regards,
Hnaul

Huynh
Top achievements
Rank 1
 updated question on 19 Jul 2023
1 answer
177 views

 

For the "Filter Component", is there any way to use the template to add an 'DropdownTree' before the first column?(Blue marked on the image)


Thanks

Yanmario
Telerik team
 answered on 18 Jul 2023
0 answers
850 views

Greetings

I am using the Kendo buttons and the Kendo utils, among others in our application. Recently, I was updating to later angular versions, namely from v11 to v16, as we have fallen too much behind. The packages for the Angular versions 6-11 do not have problems when building. The above packages, from angular v14-16, both the v8.2.2 and the v13.1.0 for buttons and the utils since the first have the following problem:

When I'm trying to import anything from @progress/kendo-angular-grid/utils and the button.service from @progress\kendo-angular-buttons, the IDE recognizes correctly the folder address and imports everything automatically without problems. When I'm trying to build or serve the application, though, it cannot find the packages under no circumstances. I tried to modify the path in the IDE, prefixed with 'node_modules', no result. I have discarded the node_modules folder and cleared the npm cache many times, again no result. I also uninstalled and reinstalled everything from the kendo libraries and any dependencies, again no result. 

I built a new project in angular 16, as well, where the said packages work correctly. I cannot find for any reason which dependencies or anything else is causing the problem, so I'm asking you if you have any idea why. I am attaching below the package.json in a text file to see which other packages we are using and a screenshot of the errors, as well.

Thanks in advance

devnb
Top achievements
Rank 1
 asked on 14 Jul 2023
0 answers
115 views

Hi,

I have an array of ColumnDefinition objects which I am using to populate kendo-grid-columns.

Some columns have a custom row filter, using ng-template and kendoGridFilterCellTemplate.

My users have the ability to change their grid layout, in which case the ColumnDefinitions are updated, re-rendering the kendo-grid-columns. If this happens, any filters in the custom template are lost.

It appears that the 'let-filter' in the ng-template isn't re-binding to the existing column's filter. Is there a way to force this to rebind?

<ng-container *ngFor="let column of columnDefinitions">
    <kendo-grid-column
      *ngIf="column.isReadOnly"
      field="{{ column.systemName }}"
      title="{{ column.displayName }}"
      format="{{ column.format }}"
      [filter]="column.type"
      [width]="column.width"
      [hidden]="column.isHidden"
    >
      <ng-template
        kendoGridFilterCellTemplate
        let-filter
        *ngIf="column.hasFilterList"
      >
        <app-multi-select-filter-component
          [data]="getColumnFilterListValues(column.systemName)"
          [filter]="filter"
          [columnName]="column.systemName"
        ></app-multi-select-filter-component>
      </ng-template>
    </kendo-grid-column>

The column menu filter retains the previously selected value as seen in the attached screenshots.

n/a
Top achievements
Rank 1
 asked on 12 Jul 2023
1 answer
401 views

Hi,

I'm having problem retaining the scroll position when my observable refreshes.

What I have is when a refresh of the observable is triggered the grid is refreshed but jumps to another place in the grid.

This is due to a detail template that I'm using to show data (I expand all the details when the data is loaded). 

If I remove the detail template the scroll position stays at the same position.  But when the detail template is present it looks like the scroll position is set to where the current row would be positioned without a detail template.

Do you have a clue what I'm doing wrong?

Regards,

 

Bram

 

Martin Bechev
Telerik team
 updated answer on 12 Jul 2023
2 answers
1.7K+ views

I have been using the kendo-textarea component, and I saw that it had the functionality to set a default row height, and autosize depending on its contents: https://www.telerik.com/kendo-angular-ui/components/inputs/textarea/sizing/

 

However, I wish to do both. That is, I would like to set my default row height so that row=5, and autosize depending on the contents of the textarea. Is this possible? I tried it out with both my code and editing your autosize example using Stackblitz, however, it doesn't seem to be able to do both:

 

 

Is it possible to do both? Please advise.

 

Many thanks,

Hazel

Hans-Werner
Top achievements
Rank 1
Iron
 answered on 12 Jul 2023
1 answer
89 views

Hello,

Which figma assets fits best as material design kit to design a front made with Kendo web ui for angular?

 

BR/

Mikael

Yanmario
Telerik team
 answered on 11 Jul 2023
0 answers
141 views
According to https://www.telerik.com/kendo-angular-ui/components/editor/styling/#toc-setting-the-height I have to set the [iframe] property to false and disable the ViewEncapsulation. The second one I don't understand. According to https://angular.io/guide/view-encapsulation ViewEncapsulation guarantees that the styles I apply to my component would not propagate to the rest of my application. So in my understanding, if it is enabled, the styles I apply to the Kendo-Angular-Editor inside my component would not propagate beyond that component, that's all. So why do I need to disable it then if I don't care about possible propagation?
Ewgenij
Top achievements
Rank 1
Veteran
 updated question on 10 Jul 2023
0 answers
89 views
Hello everyone, I would like to know how to decrease the separation space between the labels and the graphics (as seen in the image in blue color) It is for not having so much separation between the information and reducing the space that you have


Camilo
Top achievements
Rank 1
Iron
 asked on 07 Jul 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?