Telerik Forums
Kendo UI for Angular Forum
0 answers
106 views

Hello,

I'm trying to create chart with kendo ui for angular, And I didn't find how to create a linear gradient color (linear-gradient(#85bdff, #2d74ff)) for my chart, I found only for jquery.

Is it possible to do that?

https://stackblitz.com/edit/tv7sz4--run?file=app/app.component.ts

 

Tamar
Top achievements
Rank 1
 asked on 14 Apr 2022
0 answers
109 views

Hi,

  how can I add a filter on the first example in this page https://www.telerik.com/kendo-angular-ui/components/treelist/data-binding/remote-data/ ?

 

Thanks

   Francesco

francesco
Top achievements
Rank 2
 asked on 13 Apr 2022
1 answer
148 views

Hello Team,

 

I have furnishing treeview in one componet and maintainance treeview in other componet.

I want to drag and drop element form Maintaiance treeview to furnishing.

But it is not working.

code sample:

https://stackblitz.com/edit/angular-oa3rmq?file=app/app.component.ts

Please let me know how to acheive this.

 

thank you

 

 

Svet
Telerik team
 answered on 13 Apr 2022
1 answer
116 views

Multi checker component as per this https://www.telerik.com/kendo-angular-ui/components/grid/filtering/reusable-filter/ is not working as expected. The element is not getting selected if the list of items are more but on selecting again its getting checked. Can you please check and let us know how to solve this

Valentin
Telerik team
 answered on 13 Apr 2022
1 answer
582 views

I have encountered an error while using filtering with DropDownTree.  I am currently using kendo-angular-dropdowns 5.5.1 in my project, but I have reproduced this error with 6.0.2.  Here are the conditions:

  • Use kendoDropDownTreeFlatBinding with kendoDropDownTreeExpandable directive.
  • Setup value binding and initialize the value to a child entry in the list.
  • Run and attempt to filter the dropdown.  Some searches will produce the error:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false'.

I have reproduced the error at https://angular-e7ahkr.stackblitz.io:

  • Open the console while running the example.
  • Type "nan" in the dropdown search bar.
  • I'm not certain this matters, but notice that both Nancy Davlio and Steven Buchanan are found in the results, and that Steve has child nodes.
  • Now press "c" to make the filter "nanc" and the error will occur in the console.  This will also cause focus to be removed from the search bar.

Is there anything I can do to work around this?  Here is the code for app.component.ts in case the StackBlitz doesn't work:

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  styles: ['.furniture { width: 250px; }'],
  template: `
       <kendo-dropdowntree
           kendoDropDownTreeExpandable
           [kendoDropDownTreeFlatBinding]="data"
           parentIdField="reportsTo"
           valueField="id"
           textField="name"
           [(ngModel)]="person"
           class="furniture"
           [filterable]="true"
           [expandOnFilter]="{ expandMatches: true}"
        >
       </kendo-dropdowntree>
   `,
})
export class AppComponent {
  public dataany[] = [
    { id: 2name: 'Andrew Fuller'reportsTo: null },
    { id: 1name: 'Nancy Davolio'reportsTo: 2 },
    { id: 3name: 'Janet Leverling'reportsTo: 2 },
    { id: 4name: 'Margaret Peacock'reportsTo: 2 },
    { id: 5name: 'Steven Buchanan'reportsTo: 2 },
    { id: 8name: 'Laura Callahan'reportsTo: 2 },
    { id: 6name: 'Michael Suyama'reportsTo: 5 },
    { id: 7name: 'Robert King'reportsTo: 5 },
    { id: 9name: 'Anne Dodsworth'reportsTo: 5 },
  ];
  public person = this.data[6];
}
Svet
Telerik team
 answered on 13 Apr 2022
0 answers
72 views

I have built and deploy the kendo angular slider pages in Google app engine

It appeared to be that the tips are not appeared properly.

 

The one in the app engine service is, the button and the ticks are not appearing properly.

In the local development, it does look perfectly working well.

The code snippet for the small slider is (no fancy) selectedYear is number and assign the value 1.

  <kendo-slider
        [showButtons]="true"
        [min]="1"
        [max]="6"
        [smallStep]="1"    
        [largeStep]="2"  
        [(ngModel)]="selectedYear"          
        class='kendoslider'        
        #timeslider2        
    ></kendo-slider>

 

Do you have any idea?

I tried and changed a lot of things like all css import, kendo slider module import and so on.

No luck yet.

 

Best Regards,

Than

Than Htet
Top achievements
Rank 1
 updated question on 12 Apr 2022
1 answer
693 views

Hi,

I use a DropDownTreeComponent with object binding to enable the user to set a property of a business object. The user can navigate through multiple business objects and the DownDownTree is updated according to the current business object.

Everything works fine, until the user updates a business object by selecting a value from tree. After the user interaction, the DropDownTreeComponent is no longer updated, when the user selects another business object - the [value] is updated but the component does not respond.

Is there a fix or a workaround?

Best regards,
Thomas

Thomas
Top achievements
Rank 2
Iron
 answered on 11 Apr 2022
0 answers
326 views

Hi,

I have a MultiSelect which has default values set. User should not deselect these default values. itemDisabled only disables the items in the selection list but not tag list. removeTag event can be used to prevent tag item from being removed. But the default tag items still showing as normal tags, just nothing happens when clicking it. This is confusing users. Is there any way I can set a tag item to "disabled" so user can tell it's not clickable from UI directly. Or other suggestions?

Thanks in advance,

Randy

Randy
Top achievements
Rank 1
 asked on 11 Apr 2022
1 answer
1.3K+ views

Hello,

I am trying kendo angular and so far it's a great product.
I would like to do a sidebar like on the image bellow, that follow user scrolling :
image

Do you know how I can achieve this ? Do you have a any component for ?

Hetali
Telerik team
 updated answer on 08 Apr 2022
1 answer
112 views

Hello everyone, I'm currently working on a complex TreeView, with a flat data binding, and I have the necessity to pass to the backend the whole tree ordered "as is" after a drag and drop operation is performed:

I prepared a starting StackBlitz at: https://stackblitz.com/edit/angular-w8t3pg?file=app/app.component.ts

Here's what I'd like to happen:

1) user drags C above A, create an array (or modify the existing one (nodes)) like this:

[
    { id: 3, name: 'C', parent: null, isfather: true },
    { id: 5, name: 'D', parent: 3, isfather: true },
    { id: 6, name: 'E', parent: 5, isfather: false},
    { id: 4, name: 'F', parent: 5, isfather: false },
    { id: 2, name: 'A', parent: null, isfather: true },
    { id: 1, name: 'B', parent: 2, isfather: false },
    { id: 7, name: 'G', parent: null, isfather: true },
    { id: 8, name: 'H', parent: 7, isfather: false },
    { id: 9, name: 'J', parent: 7, isfather: false },
  ];

2) then, the user moves B inside E (E sees its flag isfather changed to true, whereas A to false since it doesn't have any child anymore)

[
    { id: 3, name: 'C', parent: null, isfather: true },
    { id: 5, name: 'D', parent: 3, isfather: true },
    { id: 6, name: 'E', parent: 5, isfather: true },
    { id: 1, name: 'B', parent: 5, isfather: false },
    { id: 4, name: 'F', parent: 5, isfather: false },
    { id: 2, name: 'A', parent: null, isfather: false },
    { id: 7, name: 'G', parent: null, isfather: true },
    { id: 8, name: 'H', parent: 7, isfather: false },
    { id: 9, name: 'J', parent: 7, isfather: false },
];
And so on. The only operation not permitted is for a parent to be dragged inside one of his children.

Is it possible to do so? At the moment I'm trying with this solution (using my code and not the one in the example):
 <kendo-treeview
      #tree
      gdArea="checklisttree"
      [navigable]="false"

      [nodes]="nodes"
      kendoTreeViewFlatDataBinding
      textField="id"
      idField="id"
      parentIdField="idlink"

      kendoTreeViewExpandable
      [expandedKeys]="expandedKeys"
      expandBy="id"

      kendoTreeViewDragAndDrop
      kendoTreeViewDragAndDropEditing
      (nodeDrop)="getNodesInOrder($event)"
      (addItem)="log('addItem', $event)"
      (removeItem)="log('removeItem', $event)"

      kendoTreeViewSelectable
      [(selectedKeys)]="selectedKeys"
      (selectionChange)="nodeSelectionChangeHandler($event)"
    >
      <ng-template kendoTreeViewNodeTemplate let-dataItem>
        {{ '(id = ' + dataItem.id + '), (title = ' + dataItem.title + ' )' }}
      </ng-template>
      <ng-template
        kendoTreeViewDragClueTemplate
        let-action="action"
        let-sourceItem="sourceItem"
        let-destinationItem="destinationItem"
        let-text="text"
      >
        <span class="k-drag-status k-icon" [ngClass]="getDragStatus(action, sourceItem, destinationItem)"></span>
        <span>{{ text }}</span>
      </ng-template>
    </kendo-treeview>

With the idea of using the arrays inside the editService like this:
  getNodesInOrder($ev? TreeitemDragEvent): void {
    const rootNodes: any[] = (this.tree as any).editService.flatBinding.filterData; //list of the root elements
    const nodes = []; // I'd like to use this to push the various children in order I miss how to do this with recursive function
    rootNodes.forEach(node => {
      node.dataItem.isfather = node.children.length > 0;
      nodes.push(node.dataItem);
      // recursive call here?
    })
    console.log(nodes);
  }
I fear that this could break in future versions of the TreeView since it's not part of the API (editService only has add and remove if I don't cast it to any)

Here's how the editService.flatBinding.filterData looks like:



Feel free to edit the stackblitz to make me understand how to do this... Thanks in advance
Georgi
Telerik team
 answered on 08 Apr 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?