I am creating an application that allows you to create forms dynamically using JSON. I have most of it running but am having a problem with Kendo RadioButtons. I have narrowed my problem down to the template references in your example that I found here: 

https://www.telerik.com/kendo-angular-ui/components/inputs/radiobutton/

I am looking at the FormField Association example. In my template I have a *ngFor to loop through the values for the options that I am reading from the JSON file. The problem is that I cannot add the template reference dynamically (I have been told that this is a problem with Angular) which means that I cannot use FormField as shown in your example as the template references are hard coded.

Attached is my try (I am quite new to Angular) - I added a templateReference field to my options that is just a string eg. #one that I wanted to add to the input tag...

the above code gives me the error:

The `kendo-formfield` component should contain only one control of type NgControl with a formControlName(https://angular.io/api/forms/FormControlName)or an ngModel(https://angular.io/api/forms/NgModel) binding.

which I do understand and can remove if I do not surround everything in a FormField. I would like to keep the FormField though as it gives me the hints and error fields that I really like.

I could, I suppose, create 20 HTML entries and use *ngIf to hide the ones I am not using... this seams a bit heavy handed though! 

I guess my question is therefore how would I go about adding the template reference dynamically for the RadioButton in Kendo?  

Edit: removed some of the test code I left in in the HTML above

Hi,

According to your documentation "The latest versions of the packages are compatible with the Active and LTS versions of Angular. "

But when upgrading from Angular 10 to 11 and Angular 11 to 12, I get the following errors:

$ ng update @angular/core@12 @angular/cli@12
Installing a temporary version to perform the update.
Installing packages for tooling via yarn.
Installed packages for tooling via yarn.
Using package manager: 'yarn'
Collecting installed dependencies...
Found 76 dependencies.
Fetching dependency metadata from registry...
                  Package "@progress/kendo-angular-layout" has an incompatible peer dependency to "@angular/animations" (requires "6 - 9" (extended), would install "12.2.1").
                  Package "@progress/kendo-angular-layout" has an incompatible peer dependency to "@angular/common" (requires "6 - 9" (extended), would install "12.2.1").
                  Package "@progress/kendo-angular-layout" has an incompatible peer dependency to "@angular/core" (requires "6 - 9" (extended), would install "12.2.1").
                  Package "@progress/kendo-angular-upload" has an incompatible peer dependency to "@angular/forms" (requires "6 - 9" (extended), would install "12.2.1").
× Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.
  See "C:\Users\YANNIC~1.GEE\AppData\Local\Temp\ng-zkqy3o\angular-errors.log" for further details.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Hello, 

Hope that everyone is safe and well. 

I am developing an "Operations Dashboard", which consumes Kendo UI for Angular chart components to create different visualizations (bar charts, treemaps, data grid, KPIs).

All the visualizations need to retrieve the data from the same service, which at some point will be an internal API. For now, I am using a mock-up JSON file. 

Which is the best way to build this service? Can I use Kendo for jQuery DataSource? It will be compatible with my angular application and the Kendo UI charts?

Or should I explore other options for Angular?

Thanks!

Hi,

I could loading my datas in treeview with checkbox, but how could i force checked some records ?

Regards

Hi i am wondering someone can help me with linking a chart component/any kendo UI angular component to another page etc. 

There is no visual indication of any sort to show which of the tabs you are currently viewing.  This can be seen on your tabstrip demo page where it's not easy to tell when you click a city if that click actually worked or which city you are looking at when the page loads.

Getting Started - TabStrip - Kendo UI for Angular (telerik.com) 

This is in contrast with the material design spec examples for tabs seen at the link below where the selected tab is underlined and has a distinct font color.

Tabs - Material Design

Hi all,

I want horizontal scrolling for grids because my users can dynamically add columns and work with data before exporting to Excel for further analysis.  This also gets me round the problem of wide grids on a small screen.
I DO NOT want vertical scrolling as my users scroll with the browser and grid scrolling has caused no end of confusion when I have installed it.
I therefore set up my grid as follows:

The grid header is now rendered with 16px padding which throws out the alignment of all columns with the header.  It looks like the padding has been added by flex and I am unable to overwrite.  I can manually modify right padding to 0px in the console and all is great.

I DO NOT want to set a height for my grid and force a scroll bar so the content lines up by having a scroll bar.
I have tried setting a maxHeight in the hope that if the max height was not met the grid would remove the padding because it was not applying the scroll bar.  No luck.  Setting a max height implements padding and throws column alignment out when it does not apply a scroll bar (go figure)...

I have tried various bits of CSS to remove the padding to no avail.

This would be a global setting as this is how I want all of my grids to behave.
The following global settings are defined in styles.css (I implement a grid wrapper and spinner across all grids).

How do I remove the padding to align my columns when I do not want vertical scrolling?

Cheers,
Bob

Hi, 

Im looking for a list control with

1. Drag & Drop
2. Selection (On selecting a list item, i should be able to perform some operations from common (menu) buttons)
3. Inline-Edit

I was using ListView for AngularJS earlier (without inline edit) earlier. Now we have moved to Angular. As per documentation, Angular ListView does not have Drag & Drop, inline-edit(just by clicking on the item) & Selection (e.g. to perform delete). Am I right? 

Then I looked into Sortable control. It has Drag & Drop, but not Selection & Inline Edit. Am I right or missing something?

The finally I narrowed down on TreeView which all the required functionalities, but have to prevent drag & drop of one node into another as my requirement is a list, not hierarchical structure.

Am I missing anything? Is TreeView the right choice for my requirement?

Thanks

Hi

How subscribe event in Scheduler when date change from an other date compoment like permanent calendar or datePicker ?

Regards

Hello. I want to scroll the grid horizontally by using the mouse wheel. I also want this to be enabled only when no vertical scroll is shown. Is there any way of achieving this by using grid settings?

If not, I am trying to handle this by manipulating the ".k-grid-content" element. But I am trying to access this element inside a directive with:

  ngAfterViewInit(): void {
    console.log(this.el.nativeElement.querySelectorAll('.k-grid-content'));
  }

Or with Renderer2:

this.renderer2.listen('.k-grid-content', 'wheel', (event) => {
      console.log('WHEEL: ', event);
});

But it is not working. Is it possible to access that element inside my directive?

Thank you.