Using formBuilder to create a reactive form when I noticed that it turns array properties in to the first object in the array. This is breaking my multiselect drop down as it is expecting an array.

I create a stack blitz demonstration. 

https://stackblitz.com/edit/angular-bnet6z?file=src%2Fapp%2Fapp.component.ts

This is based off of you https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/forms/#toc-reactive-forms demonstration where I changed the form building to use the form builder.

Multiselect then reports these errors.

Hey everyone, 

Hope this message finds you well. 

I'm creating a grid table with Add/Edit/Delete features. Currently running into a blocker when clicking on a checkbox during an Add procedure. This action completely resets the values from the dropdown menus I've previously selected from. Any ideas as to why this behavior might be occurring? Thanks! 

TS: 

------------------------------

HTML:

Hello,
I am generating a template that contains a dynamic button panel, and I need to assign a click event to an <a> element within a dynamically generated <li> list. I get the values ​​from a Json object.
The function value of each element of the list comes from a Json object value (fieldChildren.action), but when trying to assign the event (click)="fieldchildren.action", it is not being created correctly.
Please help me with some indication in this regard.
I am using kendo multistep form with angular 15

I'm struggling to access this kendo-switch ID (in this case it should be A1) being passed to the generateSubscriptionArray function it seems to return undefined no matter what variation of attempts to access it I try, it also doesn't seem to show up on the $event if I try to pass this to the function.

Any assistance regarding this would be really beneficial the switch is returning the relevant true/false boolean

HTML

 
<kendo-switch
    onLabel=" "
    offLabel=" "
    formControlName="A1"
    id="A1"
    (click)="generateSubscriptionArray(userPreferenceForm.controls.A1.value,
             formcontrol id as string in this case A1 should be passed here)"
    ></kendo-switch>

TypeScript:

exportclass UserPreferencesComponent implements OnInit {
    userPreferenceForm: FormGroup;
    email_address: FormControl;

    constructor() {}

    ngOnInit(): void {
        this.userPreferenceForm = new FormGroup({
            email_address: new FormControl('', Validators.required),
            A1: new FormControl(false),
        });
    }
generateSubscriptionArray = (subscription: boolean, alertID: string): void => {
        if (subscription === true) {
            console.log(subscription, alertID);
        } else {
            console.log(subscription, alertID);
        }
    };
 

I am new at Kendo UI. Already I add the date module normally as a quick cli setup. But when I want to add another module this trough an error. 

Example:

Unable to load package information from the registry: Response timeout while trying to fetch https://registry.npmjs.org/@progress%2fkendo-angular-inputs (over 300000ms)

[RESOLVED]

Hello,

I have integrated kendo grid with some details-grid using the KendoGridDetailTemplate. 
Everything works great, but I can't find a way of hiding the [+] sign when there is nothing to show in the details component. 

I am already using the [KendoGridDetailTemplateShowIf]="ShowDetailsCondition" but the problem i'm facing is that when the directive is called, I don't have access to the methods in my component, since "this" changes and represents the directive itself. 

here is my condition function: 

error : "this.hasHeaders is not a function" => I guess it's because "this" represent now the Directive and not my component

How could I use custom methods/function from my component into my condition function without have it returning an error ?

Thanks you!
Audric 

Hi,

I have a template driven form and use some kendo elements (e.g. DatePicker or Dropdownlist). The error is the same for all the Kendo widgets, I'll describe it here only for the DatePicker:

In my component 1, there's my form and I call my sub-component where the datepicker is in it:

<form #form="ngForm" novalidate="novalidate">

<my-datepicker [(property)]="myProperty" [parentctrl]="this"></my-datepicker>

...

</form>

In my sub-component there is the kendo DatePicker:

<kendo-datepicker #datePicker
                      calendarType="classic"
                      [attr.name]="datePickerName"
                      [(ngModel)]="dateVal"
                      [format]="'dd.MM.yyyy'"
                      (ngModelChange)="datePickerChanged()"></kendo-datepicker>

The name of the DatePicker is set dynamically via [attr.name]. The value is inside the component:

@Component({
  selector: 'my-datepicker',
  templateUrl: './my-datepicker.component.html',
  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
  styleUrls: ['./my-datetimepicker.component.less']
})
export class MyDatepickerComponent {

public datePickerName: string = "myName";

}

When I check this.parentctrl.form.form.controls[this.datePickerName], there is no form control for my datepicker. Also, when I replace it with <kendo-datepicker name="{{datePickerName}}". This problem only exists, when I set the DatePicker name dynamically. When I use a static name (<kendo-datepicker name="myName"), I can find the datePicker in the form.controls array.

I need access to the form.controls array for validation purposes, but I need to set the name attribute dynamically from component code.

With normal html5 elements (like input) it works. But with Kendo elements (DatePicker, Dropdownlistm ...) there is the problem in the form.controls array.

Do you have any idea how to "refresh" the form controls array after setting the name dynamically?

Thanks,

Katharina