Questions on Kendo UI for Angular Forum

1 answer

16 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

23 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

21 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

12 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

11 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

11 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

1.2K+ 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

31 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

1 answer

24 views

Hi, How to retain the values selected in kendo multiselect in the first page of the two form pages upon going to second page

I had two page form in which in first page using kendo multiselect and after selecting the options in the first page and going to second page and then returning back to previous page i.e first page where I have selected options is getting blank how to retain the values??

General Discussions

MultiSelect

answered on 03 Apr 2024

0 answers

12 views

Disabling the row except a specific column in grid.

I want to disable the row based on condition where one particular column/cell will be exempted, when I tried to use rowClass it disables whole row.
after disabling the row it should show text as already added to user

Update: Solved

Grid