Telerik Forums
Kendo UI for Angular Forum
0 answers
359 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.5K+ 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
137 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
0 answers
106 views

Hello,

I want to mark the same date in all years. For example 1 January or 23 April to be marked in all years. Can you help me please? 

 

Thank you!

  public baseData: any[] = [
    {
      Id:1,
      Title: "23 Nisan Ulusal Egemenlik ve Çocuk Bayramı",
      Start: "2022-04-23T00:00:00.000Z", //all year
      End: "2022-04-23T00:00:00.000Z", //all year
 
    },

]

Cansu
Top achievements
Rank 1
 asked on 08 Apr 2022
1 answer
504 views

How to change dates (click and drag corner of box) or move boxes (click and drag middle of box) in gantt chart if I am using kendo for Angular?

I know that it is possible with jQuery but didn't find how to do it for Angular.

Martin Bechev
Telerik team
 answered on 08 Apr 2022
1 answer
373 views
I have a Scroll view component displaying a lot of images one by one (whenever you click the next or previous button the image changes) and i've been wondering : Is it possible to Force Scrolling to a Selected Element without clicking on the next/previuos button . I mean i can create a button (not related to the Kendo Scroll but related to one of the images) and whenever i click, it will scrolll automatically to that image. It is possible with Kendo for JQUERY when Handling the change event but i haven't found anything for angular.
Valentin
Telerik team
 answered on 08 Apr 2022
1 answer
2.5K+ views

HI

This demo shows that you can only insert one row at a time

https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-template-forms/

My case is diffrent.

I have a component that displys a grid for the currencies.

above the girid is "add" button. this is the senario :

1- the user should press add button to create new row in the grid

2- the user enter the name of the currency and all other attributes

3- then the user press add button once again to insert new row , and the repeat step 2 ,and repeat step 1 again

at the end, the user press "Save" button only one time to save all the records that he insered in the grid

IS this possible in kendo grid component

if yes, do you have any demo for this

 

thank you

Martin Bechev
Telerik team
 answered on 07 Apr 2022
1 answer
450 views

How do you right align input when displayed, and left align input on focus? 

Hetali
Telerik team
 answered on 05 Apr 2022
0 answers
106 views

Hello All,

We are using a kendo grid and which is having few locked columns and a few which are not locked. Since there is a constraint the width needs to be set for each column if there is a locked column, we are setting the width for each column, Which makes the grid header not look good in bigger displays. You can see in the below screenshot that after the last column, there is some empty space. In smaller screens, this won't occur since the width we set exceeds the viewport width. Is there a way we can make this responsive?

Nidhin
Top achievements
Rank 1
 asked on 05 Apr 2022
1 answer
953 views

I have preloaded tree View and add node button. I have one text box to enter node name and tree drop down to select the parent node.

After entering node name and parent node, I will click on add node button. On click event it should add newly entered node under specific parent node.

Please let me know how to achieve this.

 

Hetali
Telerik team
 answered on 04 Apr 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
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?