Questions on Kendo UI for Angular Forum

1 answer

123 views

Kendo Filter generating form inputs -> how to get Autocomplete inputs??

Hello,

Currently I have a Kendo Filter in which I'm passing in a CompositeFilterDescriptor (dslFilter) as a value, as such:

<kendo-filter
      #filter
      [filters]="filters"
      [value]="dslFilter" // <=== THIS ONE
      (valueChange)="onFilterChange($event)"
    >
...

As I understand it, the filter will turn a CompositeFilterDescriptor into a bunch of generated input forms, such as this:

Problem is, I implemented Kendo Autocomplete in those fields (full HTML below), but the generated input forms aren't generated as Autocomplete input forms. I only get Autocomplete forms if I (1) edit the field in one of the forms, or (2) I add a filter. In both cases, the input form will have to deviate from the generated (from the CompositeFilterDescriptor) form in order to become Autocomplete. Otherwise, it's just a textbox.

How do I get the generated input forms to be Autocomplete? Edit: A more general question, how can I modify the generated input forms? Say if I want the generated textbox to be wider...

Full HTML is below:

  <div>
    <kendo-filter
      #filter
      [filters]="filters"
      [value]="dslFilter"
      (valueChange)="onFilterChange($event)"
    >
      <ng-container *ngFor="let fl of filters">
        <kendo-filter-field [field]="fl.field" [editor]="fl.editor">
          <ng-template kendoFilterValueEditorTemplate let-currentItem>
            <ng-container *ngFor="let field of autocompleteFields">
              <ng-container *ngIf="currentItem.field === field">
                <kendo-autocomplete
                  [data]="getUniqueValues(currentItem.field)"
                  [value]="currentItem.value"
                  [suggest]="true"
                  [virtual]="{itemHeight: 28}"
                  (valueChange)="editorValueChange($event, currentItem, filter.value)"
                >
                </kendo-autocomplete>
              </ng-container>
            </ng-container>

          </ng-template>
        </kendo-filter-field>
      </ng-container>
    </kendo-filter>
  </div>

AutoComplete

Filter

answered on 15 Apr 2024

0 answers

121 views

How do I create heirarchical drawer in Angular (HTML/Markup) and not the ts file?

I am trying to create a heirarchial drawer, I have pasted her my html, ts and scss files as they are.

I have set up the items for the drawer in the ts file and used id and parent id. If I don't use template in html then they all appear fine and nested as they should be but I am unable to apply mouse over or active/selected css styles to the drawer items. If I use template then I am able to apply css mouse over and active styles but then I don't know how to get the drawer subitems to work. Can you please help me with this? The help online shows only setting up in ts file and does not show, how you can apply mouse over etc to custom svg icons or the text. This is very urgent.

Regards,

Adeel

This is my html:

<kendo-drawer-container class="side-bar-container-drawer-container">

<kendo-drawer #drawer [items]="drawerItems" [mini]="isV6Enabled" mode="push" [autoCollapse]="false"

[(expanded)]="expanded" (select)="onSelect($event)" [isItemExpanded]="isItemExpanded">

<ng-template kendoDrawerItemTemplate let-item let-level="level" let-hasChildren="hasChildren"

let-isItemExpeanded="isItemExpanded">

<ng-container>

<kendo-svgicon [icon]="item.svgIcon"></kendo-svgicon>

<span class="drawerspan">{{ item.text }}</span>

</ng-container>

</ng-template>

</kendo-drawer>

<kendo-drawer-content>

<router-outlet></router-outlet>

</kendo-drawer-content>

</kendo-drawer-container>

and this imy ts file:

export class SideBarComponent implements AfterViewInit {

public expandedIndices = [0];

public selected = "Home";

public drawerItems: Array<DrawerItem> = [

{text: "Home", svgIcon: DrawerHome, cssClass: "drawerspan", selected: true, id: 0 },

{text: "Monitor", svgIcon: bellIcon, cssClass: "drawerspan", id: 1 },

{text: "Review", svgIcon: calendarIcon, cssClass: "svg-icon-hover", id: 2 },

{text: "Analyse", svgIcon: envelopeLinkIcon, cssClass: "drawerspan", id: 3 },

{text: "Line Operations", id: 4, parentId: 3},

{text: "Line Engineering", id: 5, parentId: 3 },

{text: "Site Operations", id: 6, parentId: 3 },

{text: "Site Engineering", id: 7, parentId: 3 },

{text: "Planning", id: 8, parentId: 3 },

{text: "Waste", id: 9, parentId: 3 },

{text: "KPIs", id: 10, parentId: 3 },

{text: "Activity", svgIcon: starOutlineIcon, id: 11 },

{text: "Search", svgIcon: envelopeLinkIcon, id: 12 },

{text: "Help", svgIcon: starOutlineIcon, id: 13 },

]

@Input() items: MenuItemModel[];

@Input() isV6Enabled: boolean;

@Input() expanded: boolean;

@Input() autoCollapse: boolean;

@Input() updateBadgeVisibility$: BehaviorSubject<boolean>;

@Input() refreshDefaultPage$: BehaviorSubject<boolean>;

@Input() toggleDrawer$ : BehaviorSubject<boolean>;

@Input() userIsAuthenticated: boolean;

@Input() logo: string;

@ViewChild('drawer') public drawer: DrawerComponent;

selectedItem: any;

constructor(private route: ActivatedRoute,

private router: Router) {

}

ngAfterViewInit(): void {

this.toggleDrawer$?.subscribe(result => {

if (result) {

this.drawer.toggle();

}

});

}

public isItemExpanded: DrawerItemExpandedFn = (item): boolean => {

return this.expandedIndices.indexOf(item.id) >= 0;

};

isSelected(item: any): boolean {

return this.selectedItem === item;

}

getIconClasses(level: number, item: any): any {

const classes = {};

classes['k-level-' + level] = !this.isSelected(item);

classes['k-level-' + level + '-selected'] = this.isSelected(item);

return classes;

}

getItemIcon(item: any, isItemExpanded: boolean): string {

const iconMap: { [key: string]: string } = {

'traceability': 'categorizeIcon',

'lineview admin': 'gearsIcon',

'customer admin': 'userIcon'

};

const lowerCaseText = item.text.toLowerCase();

if (iconMap.hasOwnProperty(lowerCaseText)) {

return iconMap[lowerCaseText];

} if (isItemExpanded) {

return 'folderOpenIcon';

} else if (!isItemExpanded) {

return 'folderIcon';

} else {

return item.icon;

}

}

public refreshDefaultPage() {

this.refreshDefaultPage$?.next(true);

}

public onMouseOver(ev: DrawerSelectEvent): void {

ev.item.svgIcon = bellIcon;

}

public onSelect(ev: DrawerSelectEvent): void {

this.selected = ev.item.text;

const current = ev.item.id;

if (ev.item.id == 0)

{

ev.item.svgIcon = DrawerHomeActive;

}

else {

this.drawerItems[0].svgIcon = DrawerHome;

}

if (this.expandedIndices.indexOf(current) >=0)

{

this.expandedIndices = this.expandedIndices.filter(

(id) => id !== current);

}

else

{

this.expandedIndices.push(current);

}

}

}

and this is my page scss:

.side-bar-container {

width: 100%;

&-appbar {

width: 80px;

float: left

}

&-drawer {

width: 1700;

margin-left: 80px;

&-container {

height:900px

}

}

}

.k-drawer-wrapper {

width: 243px !important;

}

.k-i-menu {

font-size: 25px;

}

.k-level-0 {

font-size: 20px;

padding-left: 10px;

filter: brightness(0%);

&:hover{

filter: invert(48%) sepia(88%) saturate(1265%) hue-rotate(347deg) brightness(98%) contrast(94%);

}

}

.k-level-0-selected {

font-size: 20px;

padding-left: 10px;

filter: invert(48%) sepia(88%) saturate(1265%) hue-rotate(347deg) brightness(98%) contrast(94%);

//filter: invert(0.5) sepia(1);

}

.k-level-1 {

padding-left: 20px;

filter: brightness(0%);

&:hover{

filter: invert(48%) sepia(88%) saturate(1265%) hue-rotate(347deg) brightness(98%) contrast(94%);

}

}

.k-level-1-selected {

padding-left: 20px;

filter: invert(48%) sepia(88%) saturate(1265%) hue-rotate(347deg) brightness(98%) contrast(94%);

}

$image-height: 30px;

.image-logo {

height: $image-height;

}

.image-logo img {

height: $image-height;

}

$mat-card-header-size: 40px !default;

.image-avatar {

height: $mat-card-header-size;

width: $mat-card-header-size;

border-radius: 50%;

flex-shrink: 0;

// Makes `<img>` tags behave like `background-size: cover`. Not supported

// in IE, but we're using it as a progressive enhancement.

object-fit: cover;

}

.k-level-2 {

padding-left: 40px;

}

.k-level-2 {

padding-left: 60px;

&:hover{

fill: red !important;

}

}

.theme-slider {

border-right: 1px solid rgba(255, 255, 255, 0.12);

padding-right: 15px;

}

::ng-deep .select-flags {

position: inherit !important;

}

.hamburger-button {

padding: 0 !important;

margin: 0 !important;

}

.item-selected {

color: var(--tb-kendo-primary-100);

filter: invert(48%) sepia(88%) saturate(1265%) hue-rotate(347deg) brightness(98%) contrast(94%);

}

kendo-svgicon {

filter: invert(0.5) sepia(1);

}

kendo-svgicon:hover {

filter: invert(48%) sepia(88%) saturate(1265%) hue-rotate(347deg) brightness(98%) contrast(94%);

}

.drawerspan{

color: white;

}

.drawerspan:hover {

filter: invert(48%) sepia(88%) saturate(1265%) hue-rotate(347deg) brightness(98%) contrast(94%);

}

Drawer

asked on 14 Apr 2024

1 answer

90 views

The checkbox in @ progress/kendo angular treeview in Angular 17.2.0 cannot be used

Why is the checkbox in @ progress/kendo angular treeview not available in Angular 17.2.0 version

TreeView

answered on 12 Apr 2024

1 answer

80 views

LoadMoreDirective for MultiSelectTree?

I am presently utilizing a MultiSelectTree to display an extensive hierarchical dataset. Despite employing load on demand, performance suffers notably when a single level contains numerous elements.

I have come across a solution tailored for the TreeView to address this concern, wherein a limit for elements per level can be set, accompanied by a "load more" button once the limit is reached.

Is there a way to adapt this solution for the MultiSelectTree? Alternatively, are there other remedies available for optimizing performance with the MultiSelectTree?

MultiSelect

TreeView

answered on 12 Apr 2024

1 answer

214 views

Disable checked checkbox

  <kendo-window title="Select Item" [width]="800" [height]="500" *ngIf="opened" (close)="windowClose()">
        <kendo-grid
          kendoGridSelectBy="id"
          [kendoGridBinding]="KendoWindowData$ | async"
          [filterable]="true"
          [sortable]="true"
          [height]="400"
          [selectable]="selectableSettings"
          (selectionChange)="onSelectionChange($event, grid)"
          [(selectedKeys)]="mySelection">
          <ng-template kendoGridToolbarTemplate>
            <kendo-grid-checkbox-column [showSelectAll]="true" [width]="40"></kendo-grid-checkbox-column>
          </ng-template>
          <kendo-grid-column [width]="40"> </kendo-grid-column>
          <kendo-grid-column field="innerCode" title="შიდა კოდი" [width]="250" [filterable]="true"></kendo-grid-column>
          <kendo-grid-column field="name" title="სახელი" [width]="250" [filterable]="true"></kendo-grid-column>
          <kendo-grid-column field="barcode" title="Barcode" [width]="250" [filterable]="true"></kendo-grid-column>
        </kendo-grid>
        <button (click)="confirmSelection(grid)" kendoButton>Confirm Selection</button>
      </kendo-window> on here how to disable checked checkbox if it possible ?

CheckBox

Grid

answered on 11 Apr 2024

1 answer

114 views

Render Form PDF on PDF Viewer

Hi Team,

Is there a possibility to render form PDF on a PDF Viewer. Also Need a option to do digital signature on the PDF form

Regards,
Christo

PDFViewer

Signature

answered on 11 Apr 2024

1 answer

56 views

Persisting columns chosen with tree list

Hello everyone

I would like to persist the selection of columns in a kendo treelist, such that when a user reloads the page their selection of columns remains the same.

Is there a way of hooking into the events that take place when a selection is applied?

For example, in the picture attached, if the user were to select to display 'Description Two' and hit apply, then I would like for all three columns to be displayed on next reload. Likewise if a user were to hide both Description columns, then only the 'Name' column would be displayed on next reload. All three would still show up in the column chooser in this example, just that two of them would be turned off.

What might I do to achieve this in Angular15?

Best regards

TreeList

answered on 11 Apr 2024

1 answer

72 views

kendoComboBoxNoDataTemplate Can we customized and add kendotextarea which is resizable="both"

@Component({
selector: 'my-app',
template: `
 <kendo-combobox [data]="listItems">
   <ng-template kendoComboBoxNoDataTemplate>
     <h4>No data!</h4>
   </ng-template>
 </kendo-combobox>
`
})
class AppComponent {
  public listItems: Array<string> = [];
}

 



<ng-template kendoComboBoxNoDataTemplate>
                            <kendo-textarea  placeholder="Enter text here." [rows]="4"  resizable="both"
                                formControlName="name">
                            </kendo-textarea>
                        </ng-template>

but showing like this. is this kendo-textarea can we show properly in this template.

ComboBox

TextArea

answered on 10 Apr 2024

7 answers

2.1K+ views

Passing a custom variable to ToolTip template

I have seen following example https://www.telerik.com/kendo-angular-ui/components/tooltip/templates/ which shows how to use a template to render custom content for a tooltip, however it only shows very basic example of passing an "anchor" to the template, I would like to pass in a variable to the template, how do I do that?

In below example, I would like to pass the dataItem from within a ngFor to the template so that I can render custom tooltip content based on the data in dataItem,

<ng-template #approvalColTooltipContentTemplate let-dataItem>

{{dataItem | json}}

</ng-template>

<div *ngFor="let dataItem of dataItems">

<div kendoTooltip filter=".gridTooltip" [ tooltipTemplate]="approvalColTooltipContentTemplate">

<span class="gridTooltip"><span class="k-icon warningGreen"></span></span>

<span class="gridTooltip"><span class="k-icon warningOrange"></span></span

<span class="gridTooltip"><span class="k-icon k-i-warning"></span></span>

</div>

Thanks

Tooltip

answered on 05 Apr 2024

0 answers

213 views

npm_package error in Kendo Pdf Viewer

Hi All,

We are using angular kendo ui pdf viewer version "13.2.0"

Angular version "15.0.4"

we are getting this error when we run ng serve or ng build

Error: node_modules/pdfjs-dist/types/src/display/text_layer.d.ts:119:41 - error

TS2552: Cannot find name 'OffScreenCanvasRenderingContext2D'. Did you mean 'Canv

asRenderingContext2D'?



119         ctx: CanvasRenderingContext2D | OffScreenCanvasRenderingContext2D |

null;

                                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



  node_modules/typescript/lib/lib.dom.d.ts:3495:13

    3495 declare var CanvasRenderingContext2D: {

                  ~~~~~~~~~~~~~~~~~~~~~~~~

    'CanvasRenderingContext2D' is declared here.

Also attaching the error snapshot and also attaching the projects package.json file

Here is the package.json file as well for your reference.

{
  "name": "test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "serve": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.4",
    "@angular/cdk": "^14.0.3",
    "@angular/common": "^15.0.4",
    "@angular/compiler": "^15.0.4",
    "@angular/core": "^15.0.4",
    "@angular/forms": "^15.0.4",
    "@angular/localize": "^15.0.4",
    "@angular/material": "^14.0.3",
    "@angular/platform-browser": "^15.0.4",
    "@angular/platform-browser-dynamic": "^15.0.4",
    "@angular/router": "^15.0.4",
    "@angular/service-worker": "^15.0.4",
    "@metismenu/angular": "0.0.2",
    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@popperjs/core": "^2.11.5",
    "@progress/kendo-angular-buttons": "^13.2.0",
    "@progress/kendo-angular-charts": "^13.2.0",
    "@progress/kendo-angular-common": "^13.2.0",
    "@progress/kendo-angular-dateinputs": "^13.2.0",
    "@progress/kendo-angular-dialog": "^13.2.0",
    "@progress/kendo-angular-dropdowns": "^13.2.0",
    "@progress/kendo-angular-editor": "^13.2.0",
    "@progress/kendo-angular-excel-export": "^13.2.0",
    "@progress/kendo-angular-grid": "^13.2.0",
    "@progress/kendo-angular-icons": "^13.2.0",
    "@progress/kendo-angular-indicators": "^13.2.0",
    "@progress/kendo-angular-inputs": "^13.2.0",
    "@progress/kendo-angular-intl": "^13.2.0",
    "@progress/kendo-angular-l10n": "^13.2.0",
    "@progress/kendo-angular-label": "^13.2.0",
    "@progress/kendo-angular-layout": "^13.2.0",
    "@progress/kendo-angular-listbox": "^13.2.0",
    "@progress/kendo-angular-listview": "^13.2.0",
    "@progress/kendo-angular-menu": "^13.2.0",
    "@progress/kendo-angular-navigation": "^13.2.0",
    "@progress/kendo-angular-pager": "^13.2.0",
    "@progress/kendo-angular-pdf-export": "^13.2.0",
    "@progress/kendo-angular-pdfviewer": "^13.2.0",
    "@progress/kendo-angular-popup": "^13.2.0",
    "@progress/kendo-angular-progressbar": "^13.2.0",
    "@progress/kendo-angular-scheduler": "^13.2.0",
    "@progress/kendo-angular-sortable": "^13.2.0",
    "@progress/kendo-angular-toolbar": "^13.2.0",
    "@progress/kendo-angular-tooltip": "^13.2.0",
    "@progress/kendo-angular-treelist": "^13.2.0",
    "@progress/kendo-angular-treeview": "^13.2.0",
    "@progress/kendo-angular-upload": "^13.2.0",
    "@progress/kendo-angular-utils": "^13.2.0",
    "@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.17.5",
    "@progress/kendo-font-icons": "^1.8.0",
    "@progress/kendo-licensing": "^1.3.5",
    "@progress/kendo-svg-icons": "^1.8.0",
    "@progress/kendo-theme-bootstrap": "^6.6.0",
    "@progress/kendo-theme-material": "^6.6.0",
    "@types/xml2js": "^0.4.11",
    "angular-material-sidenav": "^0.1.1",
    "bn-ng-idle": "^2.0.1",
    "bootstrap": "^5.1.3",
    "copy-image-clipboard": "^2.1.2",
    "exceljs": "^4.3.0",
    "file-saver": "^2.0.5",
    "hammerjs": "^2.0.0",
    "html2canvas": "^1.4.1",
    "i": "^0.3.7",
    "moment": "^2.29.3",
    "ng-recaptcha": "^8.0.1",
    "ngx-nestable": "^0.9.4",
    "ngx-perfect-scrollbar": "^10.1.1",
    "ngx-spinner": "^13.1.1",
    "npm": "^8.13.2",
    "rxjs": "~7.5.0",
    "stimulsoft-reports-js": "^2023.2.3",
    "timers": "^0.1.1",
    "tslib": "^2.3.0",
    "xml2js": "^0.4.23",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.4",
    "@angular/cli": "^15.0.4",
    "@angular/compiler-cli": "^15.0.4",
    "@types/file-saver": "^2.0.5",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.8.4"
  }
}

PDFViewer

updated question on 04 Apr 2024