Telerik Forums
Kendo UI for Angular Forum
0 answers
477 views

Hi,

In the previous release we did not have a circle over the delete button in the kendo multi select dropdown. Here is the image.

Previous release of kendo-multiselect.

 

 

In the current release, there is a circle around the X.  We have a requirement that no dark circle should be shown around the 'X'.

 

I tried looking at the document and even extended the service and that doesn't work. Any suggestions?

 

Here is my class extending the IconSettingsService . But it never hits this service.

import { Injectable } from '@angular/core';
import { IconSettingsService } from '@progress/kendo-angular-icons';
import { SVGIcon } from '@progress/kendo-svg-icons';
import * as allSVGIcons from'@progress/kendo-svg-icons';

@Injectable()
export class MultiDropdownIconService extends IconSettingsService {
    private svgDictionary: { [key: string]: SVGIcon } = {
        "xCircle": allSVGIcons.xIcon
    };

    public getSvgIcon(svgIconName: string): SVGIcon {
        return this.svgDictionary[svgIconName] || super.getSvgIcon(svgIconName);
    }
}

 

In the latest release I see that kendo is using svg.

Jyothi
Top achievements
Rank 1
Iron
Iron
Veteran
 asked on 26 Jul 2023
0 answers
124 views

Hello kendo team.

Q: Is there a way in current or future versions to configure the visibility for hit (preview) element while dragging an item?

It seems that sortable has an hint: ElementRef; but no starlight forward way to configure its visibility.

Currently the following approach was used, but maybe there is a better way. 

<kendo-sortable [activeItemClass]="'sortable-active-item'">
</kendo-sortable>
.sortable-active-item {
  display: none;
}

.sortable-active-item[kendodraggable] {
  display: block;
}

ps. The project is tied to the old version of kendo ( "@progress/kendo-angular-sortable": "^3.0.3") and cannot update the package now

Br

Evgeniy
Top achievements
Rank 1
 asked on 26 Jul 2023
1 answer
261 views

We are using remote data to create treeview, so our tree data type is

public treedata: Observable<any>;

So in search function we are getting exception

Argument of type 'Observable<any>' is not assignable to parameter of type 'any[]'.

How we apply a filter on remote async data?

Shubham
Top achievements
Rank 1
Iron
 answered on 26 Jul 2023
0 answers
136 views

According to https://www.telerik.com/kendo-angular-ui/components/editor/styling/#toc-setting-the-height I can customize the size of the editor area. Is it possible to make it fill all available space?

height: 100%;
does not accomplish that unfortunately. 
Ewgenij
Top achievements
Rank 1
Veteran
 asked on 24 Jul 2023
1 answer
383 views

HI,

Is there a way to enable multiselect capability in kendo listBox? this is one of our requirement to select multiple records and be able to move to the right and vice versa.

 

Regards,

Jyothi

Yanmario
Telerik team
 answered on 21 Jul 2023
0 answers
153 views

We have this code (it's way stripped down) and when I have focus on the last field during editing, I want to be able TAB from it to the Cancel button in the command column. This currently does not work. TABing instead takes me to the next focusable elements outside the Grid.

Any suggestions appreciated.

<!-- we dynamically generate columns and user our own component to render the field when editing -->
<ng-container *ngFor="let columnDef of this.GridColumnDefs; let iColIndex=index">
            <kendo-grid-column  field="{{columnDef.name}}"
                               title="{{columnDef.displayName}}">
                <ng-template kendoGridCellTemplate let-dataItem>
                    . . .
                </ng-template>
                <ng-template kendoGridEditTemplate>
                    <app-form-field-wrapper ...etc...><app-form-field-wrapper> <!-- this is our own component -->
                </ng-template>
            </kendo-grid-column>
        </ng-container>

        <kendo-grid-command-column [width]="180">
            <ng-template kendoGridCellTemplate>
                <button kendoGridCancelCommand kendoGridFocusable>Cancel</button>
            </ng-template>
        </kendo-grid-command-column>
        . . .    


Paul
Top achievements
Rank 1
 asked on 20 Jul 2023
1 answer
286 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
218 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
220 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
1.2K+ 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?