I'm trying to load a hierarchical treeview from an external source, but I'm having difficulties loading the first node childs and most likey the inner childs aswell (but this I don't know yet..).

The data is loaded through axios, so the RxJS Observable methods won't work. I tried may different things but when I'm expanding the first node the spinner just keeps on spinning until eternity.

Some of the points that I have tried

- Tried to assign the parent node with the childeren
- Tried an async modifier
- Tried many different things with hasChilderen function

console keeps on printing: TypeError: this.childeren(...).pipe is not a function

Hopefully someone can point me in the right direction.

My code:

location.model.ts

location.service.ts

tree.component.ts

tree.component.html

When there is no data for a GridView, a message reading "No records available." appears as the only row in the grid view and I need to show something similar for TreeView.

I can add an arbitrary element to the tree with the display name of "No records available." when there aren't any records but is there a cleaner way do do that through the TreeView API?

Need to look at a wizard-like ui feature for capturing user input.  Possibly wire something together with tabstrip?

Looking for suggestions.

Is there a way to select generated aggregates on dynamic columns.  I have verified that my code creating the totals is working but I am unable to utilize them in the HTML.  

Component code:

// Creating the aggregates

    this.operationalReportDataService.getVolumeTrend(this.choice)
    .pipe(
      finalize(() => this.grid.loading = false)
    )
    .subscribe((data: VolumeTrend) => {
      this.gridView = data.gridData;
      this.colSettings = data.dateColumns;
      data.dateColumns.forEach(x => this.aggregates.push({ field: x.field, aggregate: 'sum' }));
    });

// Generating the values

  private setAverageAndTotals(data: any[]) {
    // tslint:disable-next-line:max-line-length
    this.totalsAndAverages = aggregateBy(data, this.aggregates);
  }

HTML:

<kendo-grid-column
    *ngFor="let col of this.colSettings"
      field="{{col.field}}"
      title="{{col.title}}"
      format="{{col.format}}" width="40" [footerClass]="{'grid-footer': true}">
      <ng-template
        kendoGridFooterTemplate *ngIf="this.totalsAndAverages && this.lastPage"
        let-column="column">Total {{column.title}}: {{totalsAndAverages["{column.title}"].sum}}
      </ng-template>
  </kendo-grid-column>

It seems the exported content is too big and only exports to a single page.  So the issue is that when you open in Adobe and print you have to scale the content down in order to fit the schedule onto a single sheet of paper.  When you do this you lose a lot of quality in the print out where grid lines start disappearing.  I have tested this with the demo app on the documentation and attached a screenshot of what happens to my print view

https://www.telerik.com/kendo-angular-ui/components/scheduler/pdf-export/

what are the options available to make these exports more printer friendly?  I noticed on the PDF-Export Component there are alot more options available but on the kendo-scheduler-pdf component many of those options are not available.  It's seems that allowing the PDF to span multiple pages would solve most of the issues as such drastic scaling wouldn't be necessary but I don't see any way to do that with the current kendo-scheduler-pdf component.

Hi,

     I've created a panel bar similar to the demo in the below url. The panel bar have icons.

          https://www.telerik.com/kendo-angular-ui/components/layout/panelbar/

     I've a (MindFusion diagram) canvas in the same page in my application.

     I want to drag and drop the icon from the panel bar (in the right side) and create a diagram node in the canvas (in the left side) in the dropped location.

     May I know how to do that?

Regards,

Gk

As soon as I add the following lines to my component (having first imported "of" from rxjs.

I get the folllowing error:

How do I implement the children and hasChildren properties?

Hello,

When I am using kendoGridRemoveCommand (or kendoGridEditCommand etc.) directives, the k-button class is added to the element automatically. How can I avoid that because I don't want any styles coming from that.

I am aware of some possible work around such as removing the class by JQuery or writing another class to override the css styles of k-button, but isn't there a better solution?

Regards.

Hi,

here: https://stackblitz.com/edit/angular-k3ifma-sth4cf

i've implemented the following:

When dragging and dropping, the if will never be true, the values of index and oldIndex are nearly always the same.

Why? Is this a bug?

Kind regards

I can't seem to handle a click event inside of a sortable object. Is this possible? My code looks like:

            <kendo-sortable [kendoSortableBinding]="selectedColumns" [animation]='true' (dragEnd)='onDragEnd($event)' >
                <ng-template let-column="item">
                    <div class="selected-column">
                        <span draggable="true" class="k-icon k-i-handler-drag"></span>
                        <span style="flex-grow: 1">{{ column.displayName }}</span>
                        <span (click)="removeSelectedColumn(column)" class="k-icon k-i-close" style="cursor: pointer;"></span>
                    </div>
                </ng-template>
            </kendo-sortable>

The remove span click event never fires. What's the workaround?