Questions on Kendo UI for Angular Forum

1 answer

162 views

Prevent Kendo combobox event bubbling to Kendo treelist in Angular

Hi team,

I am working on a simple UI where kendo combo-box is a column of a kendo tree-list. The problem is, the opening and closing of kendo combo-box also expands and collapses the kendo tree-list's row.

I think the event of kendo-combo-box is bubbled to treelist. Is this a bug or am I missing something? Here's my Stackblitz example for reproducing the issue (Link: https://stackblitz.com/edit/angular-18guak?file=src/app/app.component.ts)

Thanks,

Deepak

ComboBox

TreeList

answered on 20 Nov 2022

0 answers

114 views

Im trying to include the multiselect component to my code, but it doesnt bind correctly.

The data is charged correctly, and the selected values are added correctly into the list.

It binds correctly when the values are already selected, but when you try to add more doesnt work. Like this:

The code is down below.

MultiSelect

asked on 18 Nov 2022

0 answers

149 views

How to get checked values of TreeViewComponent with multi select check boxes.

I have used the kendo tree view component with multi select check boxes.

and when I check them it will return the position of the node tree item. like below image.

My problem is how can I get the text of the selected items instead of this checked keys.

Here is my code

  <div class="example-config">Checked keys: {{ checkedKeys.join(",") }}</div>
    <kendo-treeview
         textField="moduleName"
         [nodes]="nodes"
         [children]="children"
         [hasChildren]="hasChildren"
         kendoTreeViewExpandable
         kendoTreeViewCheckable
         class="k-treeview"
         [(checkedKeys)]="checkedKeys"
         (checkedChange)="checked(checkedKeys)"
     >
    
     <ng-template kendoTreeViewNodeTemplate let-dataItem>
            {{dataItem.moduleName || dataItem.featureName}}
        </ng-template>
     </kendo-treeview>

 public checkedKeys: any[] = [];
  public nodes: any[] = [
    {
      moduleId: 1,
      moduleName: 'Home',
      features: [
        {
          featureId: 2,
          featureName: 'Orgonization',
          subFeatures: [
            {
              featureId: 4,
              featureName: 'Group Activity Solution',
              subFeatures: [
                {
                  featureId: 10,
                  featureName: 'Test',
                  subFeatures: [{
                    featureId: 8,
                    featureName: '8888888888',
                    subFeatures: []
                  }]
                },
                {
                  featureId: 11,
                  featureName: 'New',
                  subFeatures: []
                },
              ]
            },
            {
              featureId: 4,
              featureName: 'Office of the CIO',
              subFeatures: []
            },
          ]
        },
        {
          featureId: 3,
          featureName: 'Planing',
          subFeatures: [
            {
              featureId: 4,
              featureName: 'Group Activity Solution',
              subFeatures: []
            },
            {
              featureId: 4,
              featureName: 'Office of the CIO',
              subFeatures: []
            },
          ]
        },
      ],
    },
  ];

  /**
   * A function that returns an observable instance which contains the
   * [child nodes](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-children)
   * for a given parent node.
   */
  public children = (dataitem: any): Observable<any[]> =>
    of(dataitem.features || dataitem.subFeatures);

  /**
   * A function that determines whether a given node
   * [has children](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-haschildren).
   */
  public hasChildren = (dataitem: any): boolean =>
    !!dataitem.features || !!dataitem.subFeatures;

CheckBox

MultiSelect

TreeView

asked on 17 Nov 2022

0 answers

173 views

How to get checked values of TreeViewComponent with multi select check boxes.

I have used the kendo tree view component with multi select check boxes.

and when I check them it will return the position of the node tree item. like below image.

My problem is how can I get the text of the selected items instead of this checked keys.

Here is my code

  <div class="example-config">Checked keys: {{ checkedKeys.join(",") }}</div>
    <kendo-treeview
         textField="moduleName"
         [nodes]="nodes"
         [children]="children"
         [hasChildren]="hasChildren"
         kendoTreeViewExpandable
         kendoTreeViewCheckable
         class="k-treeview"
         [(checkedKeys)]="checkedKeys"
         (checkedChange)="checked(checkedKeys)"
     >
    
     <ng-template kendoTreeViewNodeTemplate let-dataItem>
            {{dataItem.moduleName || dataItem.featureName}}
        </ng-template>
     </kendo-treeview>

 public checkedKeys: any[] = [];
  public nodes: any[] = [
    {
      moduleId: 1,
      moduleName: 'Home',
      features: [
        {
          featureId: 2,
          featureName: 'Orgonization',
          subFeatures: [
            {
              featureId: 4,
              featureName: 'Group Activity Solution',
              subFeatures: [
                {
                  featureId: 10,
                  featureName: 'Test',
                  subFeatures: [{
                    featureId: 8,
                    featureName: '8888888888',
                    subFeatures: []
                  }]
                },
                {
                  featureId: 11,
                  featureName: 'New',
                  subFeatures: []
                },
              ]
            },
            {
              featureId: 4,
              featureName: 'Office of the CIO',
              subFeatures: []
            },
          ]
        },
        {
          featureId: 3,
          featureName: 'Planing',
          subFeatures: [
            {
              featureId: 4,
              featureName: 'Group Activity Solution',
              subFeatures: []
            },
            {
              featureId: 4,
              featureName: 'Office of the CIO',
              subFeatures: []
            },
          ]
        },
      ],
    },
  ];

  /**
   * A function that returns an observable instance which contains the
   * [child nodes](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-children)
   * for a given parent node.
   */
  public children = (dataitem: any): Observable<any[]> =>
    of(dataitem.features || dataitem.subFeatures);

  /**
   * A function that determines whether a given node
   * [has children](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-haschildren).
   */
  public hasChildren = (dataitem: any): boolean =>
    !!dataitem.features || !!dataitem.subFeatures;

CheckBox

MultiSelect

TreeView

asked on 17 Nov 2022

0 answers

154 views

How to clone/copy scheduler events in Telerik Kendo UI for angular ?

I am using Kendo UI timeline view for scheduling events in a day.

I want to provide a feature where user can clone (create a copy of) existing events and edit them as required in order to minimize their work.

I found this concept in jQuery where they are cloning events using keyboard shortcuts(https://docs.telerik.com/kendo-ui/knowledge-base/clone-events-on-ctrl-and-click) but there is no way available to do the same in Angular.

Kindly help in achieving this feature as I am new to Telerik UI.

Scheduler

asked on 16 Nov 2022

1 answer

428 views

How to programmatically insert nodes into a treeview with remote data

My treeview is defined as follows:

<kendo-treeview
#treeView
kendoTreeViewExpandable
kendoTreeViewSelectable
(selectionChange)="edit($event)"
[(expandedKeys)]="expandedKeys"
textField="text"
[filter]="filterTerm"
[nodes]="keyValues$ | async"
[children]="fetchChildren"
[hasChildren]="hasChildren"
>

As the screen is opened I set the expandedKeys so that some of my nodes are by default opened, and the data is automatically loaded in.

However certain nodes have children which I would also like to load when their parent is opened, and to further complicate the matter, a different call to the server is required than the one defined in fetchChildren for fetching this data.

Is there any way I can independently load this data, not using fetchChildren and then programmatically insert it into the tree? It seems as though there isn't a way to perform a hybrid approach to data loading...

TreeView

answered on 16 Nov 2022

0 answers

257 views

Angular Hierarchical Drawer Expand/collapse all items

Hello,

I'm using the Angular Hierarchical Drawer and I added a toggle button to expand/ collapse all items.

How can I expand/ collapse the items in the drawer using this toggle button?

Thanks

Drawer

asked on 15 Nov 2022

1 answer

484 views

Filter component (kendo-filter) - how to control Add Group button behaviour

I have a use case for this component where I don't wish the user to be able to create nested expressions. Is there any way to control the enabling / disabling of the Add Group button. Or show / hide it depending on nesting level?

Filter

General Discussions

answered on 14 Nov 2022

0 answers

265 views

Angular Grid, Allow wrapping of column header text upon resizing only

For the Angular Data Grid, I use the autoFitColumn property as below to expand all the columns to take the maximum width of the column. I have large column names and default is set to not wrap hence column widths are as per the column names and not the content. This is desired behavior on initial rendering. However upon user resizing of columns, I would like column names to wrap, I am not able to figure this one out.
If I set the css property as below to normal then on initial rendering, it will wrap column name and I do not want that

Also how to add a tooltip to the column name. This helps with resizing which cuts the header with ellipsis

public ngAfterViewInit() {

if (this.grid && this.grid.columns) {
this.grid.columns.forEach((item, index) => {
if (!this.isColumnWidthSet(item.field))
this.grid.autoFitColumn(item);
});
}

}

css property to use

.k-column-title
{
white-space:normal;
}

Grid

asked on 11 Nov 2022

0 answers

1.0K+ views

Activate Kendo License before build in YAML causes error "License key signature is not valid"

Hi together,

On my local environment my license activation works well - I use the license key file there. But during deployment, I have a problem with the license activation - I need it because I call ng build there. I use an environment variable there.

This is how I do the license activation during deployment with Azure DevOps and YAML script:

I've added a variable inside my DevOps library named KENDO_UI_LICENSE. The value of the variable is the content of my local license key file. The variable is a secret variable, but I have the same problem, if it is a normal text variable
In my YAML file I do the following steps:

- task: Npm@1
        displayName: Install Packages for Angular Client
        inputs:
          command: ci
          workingDir: '<my working dir>'

- script: 'npx kendo-ui-license activate'
        displayName: Activate Kendo UI License
        workingDirectory: '<my working dir>'
        env:
          KENDO_UI_LICENSE: $(KENDO_UI_LICENSE)

- task: Npm@1
        displayName: Build Angular Client
        inputs:
          command: custom
          workingDir: '<my working dir>'
          customCommand: 'run build'

Everything works well except the "Activate Kendo UI License" script, there I get the error "License key signature is not valid". I think there is a problem with the environment variable.

Here is the output of the DevOps Pipeline console:

For 'npm ci':

> @progress/kendo-licensing@1.2.2 postinstall D:\agent\_work\1\s\DSO.Isys.Web.Client\IsysApp\node_modules\@progress\kendo-licensing

> node ./bin/kendo-ui-license.js activate --ignore-no-license

(INFO) Kendo UI: KENDO_UI_LICENSE environment variable not set

For 'npx kendo-ui-license activate':

Skriptinhalte:

npx kendo-ui-license activate

========================== Starting Command Output ===========================

"C:\Windows\system32\cmd.exe" /D /E:ON /V:OFF /S /C "CALL "D:\agent\_work\_temp\ed2dfcbf-634f-43e2-8232-208b8ca7e658.cmd""

(INFO) Kendo UI: Reading license from KENDO_UI_LICENSE environment variable...

(ERROR) Kendo UI: License key signature is not valid. Please, download a new copy of the license and try again.