Questions on Kendo UI for Angular Forum

2 answers

81 views

I am trying to make drag drop work between two treeviews. My second treeview is under an *ngIf and does not always exist.

I have included 'dropZoneTreeViews' in both tree layouts. '(nodeDrop)' event does not fire on the second tree when visible.

I have a work around: If I add a '@ViewChild' to the component for the second 'TreeViewComponent' then events fire, but Angular throws an 'ExpressionChangedAfterItHasBeenCheckedError' error.

Can you advise any Help?

Brad

Drag and Drop

TreeView

answered on 12 Jan 2023

0 answers

91 views

kendo treelist excel arraylist, fild does not receive array?

I have the following situation, a component with treelist where the column receives an array by ngTemplate referencing the field.

 <kendo-treelist-column
    *ngIf="!isHidden('progress')"
    field="progress"
    title="Progress"
    [width]="320">
    <ng-template kendoTreeListCellTemplate let-dataItem let-group="cellContext">
      <app-okrprogress-bar
        [showButtonOk]="true"
        [value]="dataItem.progress.slice(-1)[0].value"
        [valuePercentagel]="dataItem.progress.slice(-1)[0].value"
        [showSlider]="!dataItem.contents ? true : false"
        [showValue]="dataItem.typeProgress == 'Values' ? true : false"
        [showChecbox]="dataItem.typeProgress == 'Boolean' ? true : false"
        [stepSlider]="dataItem.typeProgress"
        [viewValue]="dataItem?.values"
        (newPercentageActive)="
          changePercentage($event, group.viewItem.parent.data, dataItem)
        "></app-okrprogress-bar>
    </ng-template>
  </kendo-treelist-column>

Now I have to export this column in excel, but the field only waits for a simple variable or objects.

  <kendo-treelist-excel>
    <kendo-excelexport-column fild="keyName" title="Objective"></kendo-excelexport-column>
    <kendo-excelexport-column fild="progress.slice(-1)[0].value" title="Progress"></kendo-excelexport-column>
    <kendo-excelexport-column fild="status.status" title="Status"></kendo-excelexport-column>
  </kendo-treelist-excel>

I did some tests of different calling modes but none of the results were effective.

This is the interface:

interface ObjectiveResult {
  keyName: string;
  progress: Progress[];
  status?: Status;
}

interface Progress {
  value: number;
  date: Date;
}

interface Status {
  name: string;
  color: string;
}

Current results:

Excel Export

Grid

TreeList

asked on 12 Jan 2023

0 answers

93 views

Kendo UI for Angular scheduler timeline view multiple departments but not same attendees

Hi,

We are working with Kendo UI for Angular and having scheduler timeline view as one of the component. We have below query related to Kendo:

We have two sections on the Y-axis: department & attendees. As shown in the screenshot below, under Mechanics three names are there: Alex, Bob, Charlie.

Similarly, we want to have multiple departments but not same attendees will be there in all departments.

We want different or same attendees under different departments based on the business need.

Kindly clarify if it is possible to have this with angular & how?

Scheduler

asked on 12 Jan 2023

0 answers

109 views

Drag and Drop hintTemplate position

Hi.

I'm using the Drag and Drop functionality (https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/) and I have an issue with the hintTemplate.

I'd like to be able to reposition the drag hintTemplate. Currently, if the element you are trying to drag was first outside the viewport (for example, you want to drag an element in a scrollable list and the item is at the bottom of the list), the drag hintTemplate will be created at that position. Is there a simple way to position the hintTemplate at the cursor position?

Thanks!

Drag and Drop

asked on 11 Jan 2023

1 answer

377 views

Error installing Indicators

I have been trying to install the indicators

When installing I get the following: NPM install @progress/kendo-angular-indicators

While resolving: kendo-angular-app@0.0.0
Found: @progress/kendo-angular-common@2.0.3
node_modules/@progress/kendo-angular-common
  @progress/kendo-angular-common@"^2.0.3" from the root project

Could not resolve dependency:
peer @progress/kendo-angular-common@"^3.0.0" from @progress/kendo-angular-indicators@2.0.0
node_modules/@progress/kendo-angular-indicators
  @progress/kendo-angular-indicators@"^2.0.0" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Below is my package.json

{
  "name": "kendo-angular-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --ssl --ssl-key c:\\certificates\\localhost.key  --ssl-cert c:\\certificates\\localhost.crt",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^13.1.3",
    "@angular/cdk": "^13.3.9",
    "@angular/common": "^13.1.3",
    "@angular/compiler": "^13.1.3",
    "@angular/core": "^13.1.3",
    "@angular/forms": "^13.1.3",
    "@angular/localize": "^13.3.11",
    "@angular/material": "^13.3.9",
    "@angular/platform-browser": "^13.1.3",
    "@angular/platform-browser-dynamic": "^13.1.3",
    "@angular/router": "^13.1.3",
    "@progress/kendo-angular-buttons": "^7.0.6",
    "@progress/kendo-angular-common": "^2.0.3",
    "@progress/kendo-angular-dateinputs": "^6.0.3",
    "@progress/kendo-angular-dialog": "^6.0.2",
    "@progress/kendo-angular-dropdowns": "^6.0.2",
    "@progress/kendo-angular-excel-export": "^4.0.4",
    "@progress/kendo-angular-filter": "^1.0.0",
    "@progress/kendo-angular-grid": "^6.1.3",
    "@progress/kendo-angular-icons": "^2.0.1",
    "@progress/kendo-angular-indicators": "^2.0.0",
    "@progress/kendo-angular-inputs": "^8.0.9",
    "@progress/kendo-angular-intl": "^3.1.3",
    "@progress/kendo-angular-l10n": "^3.0.4",
    "@progress/kendo-angular-label": "^3.1.3",
    "@progress/kendo-angular-menu": "^4.0.2",
    "@progress/kendo-angular-notification": "^3.0.5",
    "@progress/kendo-angular-pdf-export": "^3.0.4",
    "@progress/kendo-angular-popup": "^4.0.6",
    "@progress/kendo-angular-tooltip": "^4.0.3",
    "@progress/kendo-angular-treeview": "^6.0.2",
    "@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.17.1",
    "@progress/kendo-licensing": "^1.2.2",
    "@progress/kendo-theme-default": "^5.8.1",
    "@progress/kendo-theme-material": "^5.8.1",
    "bootstrap": "^5.2.1",
    "lodash": "^4.17.21",
    "rxjs": "~7.4.0",
    "tslib": "^2.4.0",
    "zone.js": "^0.11.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.1.4",
    "@angular/cli": "^13.1.4",
    "@angular/compiler-cli": "^13.1.3",
    "@types/jasmine": "^3.10.6",
    "@types/lodash": "^4.14.185",
    "@types/node": "^12.20.55",
    "jasmine-core": "~3.10.0",
    "karma": "^6.3.20",
    "karma-chrome-launcher": "^3.1.1",
    "karma-coverage": "^2.1.1",
    "karma-jasmine": "^4.0.2",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "^4.6.2"
  }
}

Loader

answered on 11 Jan 2023

1 answer

211 views

KendoUI compatibility with Angular15

Is KendoUI Angular compatible with Angular 15 ?

General Discussions

answered on 10 Jan 2023

1 answer

368 views

Try to disable dates from kendo scheduler

Hi Team,

We have used one of your feature called Kendo Scheduler. Please find this link where we have refer the code to implement the kendo scheduler: https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/views.workdays.

We have one business requirement, in that user want to see only scheduled days from kendo scheduler calendar as shown below screenshot. In this example our scheduled dates range is 5th January to 12th January we want to hide or disable all dates which is not lie in this scheduled date range.

Waiting for your reply.

Thanks in advance..!

Scheduler

answered on 06 Jan 2023

0 answers

168 views

Have to press Tab twice in the kendo combo box to focus the next input element

Hi,

We recently upgrade kendo-dropdown to 7.0 version from 5.0 version. After the upgrade we see an issue with the kendo-combo box .

We have to tab twice in the kendo combo box to move to the next input.

From developers tool I see that it is removing the k-focus class from the kendo-combobox, but still the focus remains in the combo box .

While searching the web I came across this bug below. IS there a resolution to this issue?

Any insight into this is greatly appreciated.

Tab problem Combobox · Issue #189 · telerik/kendo-angular · GitHub
Jan 17, 2017 ... Plunkr: http://plnkr.co/edit/G47seNBR8WEaMfEh4CWt?p=preview Have to press Tab twice to focus the next Combobox.
https://github.com/telerik/kendo-angular/issues/189

ComboBox

asked on 06 Jan 2023

0 answers

321 views

Kendo Grid Header Not Rendering Column Menu Icon

I have configured my Kendo Grid to use a column menu and it "works" except for not rendering the SVG Icon for k-i-more-vertical.

Here's the component template:

<kendo-grid gridDataBinding [selectable]="selectableSettings" [pageSize]="10" [pageable]="pagerSettings"
    [columnMenu]="columnMenuSettings" 
    #grid >
    <kendo-grid-column field="id" title="D" [class]="'k-text-center'" ></kendo-grid-column> 
    <!-- rest of columns -->
    <kendo-grid-command-column title="Actions">
        <ng-template kendoGridCellTemplate let-dataItem>
            <button kendoButton icon="plus" class="k-primary" (click)="onDoSomething()">Do Something</button>
        </ng-template>
    </kendo-grid-command-column>
    <ng-template kendoGridNoRecordsTemplate>No records found</ng-template>
</kendo-grid>

Here's the relevant part of the component:

@Component({
  selector: 'my-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css'],
})
exportclass GridComponent implements OnInit {

  public columnMenuSettings : ColumnMenuSettings;

  constructor() {
    this.columnMenuSettings = {
      filter: true,
      sort: true,
    };
  }
// etc. Data binding. Event handlers. Etc.
}

Here's a grab of what's rendered. Note there's a section for the menu, but no icon. Clicking here does display the menu. Looking at this in dev tools almost looked like the next column was covering something up.

Here's what I've tried to troubleshoot:

Upgraded all installed Kendo components to newest version via npm
Installed both IconsModule and SvgIconsMenu (and ensured it's exported in the module)
Put in a <kendo-icon icon="more-vertical"></kendo-icon> to ensure the graphic was installed. It was.

Help would be greatly appreciated.

Grid

updated question on 30 Dec 2022

2 answers

1.0K+ views

Expanded node when async loading of hierachical treeview

I want to create the tree with expanded static first level node.

I have an array with one object defined manually like: [{text: 'All Items', level: 0, link: '...', count: 0, items: [] }].

On ngOnInit I received data from Selector (async data source) and placed it to items[] for second level, refreshed count.

After that I want to load next levels data from another Selectors (async data source).

my function getChildren looks like:

if (expandedLevel === 0) => return array of items from manually created root node.

else => return (async data) from endpoint according needed level.

But I can't to expand the first level programmatically via [expandedKeys]="['All Items']" and [expandBy]="'text'"

Can you help me please.

Regards.

TreeView

answered on 29 Dec 2022

Tab problem Combobox · Issue #189 · telerik/kendo-angular · GitHub