Kendo support seems partly outdated: broken layout

[JohanHeyvaert]

Hi,

When using Formly with the current version of Kendo UI, there is something wrong with the form field layout: the entire form contents (fields, labels, buttons) is just flowing horizontally.

Just compare the examples on formly.dev with the versions on Stackblitz and you see the difference.

• https://formly.dev/ui/kendo
  
  vs
• https://stackblitz.com/angular/yaxlayxnxkg
  

The problem doesn't just apply to the label / control but to the entire form contents.
Example:

I don't know if this is the cause but the html generated by Formly (in all cases; on examples on formly.dev and stackblitz) is totally different than the html on the documentation of Kendo UI.
E.g.

• generated by formly:

<formly-field>
	<formly-wrapper-kendo-form-field>
		<label class="k-form-field" for="formly_6_input_basic_0">
			<span> First name </span>
			<formly-field-kendo-input>
				<input class="k-textbox ng-pristine ng-valid ng-touched" id="formly_6_input_basic_0" type="text">
			</formly-field-kendo-input>
		</label>
	</formly-wrapper-kendo-form-field>
</formly-field>

• generated by Kendo UI:

<kendo-formfield class="k-form-field k-form-field-error" dir="ltr">
	<kendo-label text="First Name" dir="ltr">
		<label class="k-label">First Name</label>
	</kendo-label>
	<div>
		<input formcontrolname="firstName" kendotextbox="" required="" class="ng-pristine ng-invalid k-textbox ng-touched" aria-describedby="kendo-hint-0 kendo-error-0">
		<kendo-formhint class="k-form-hint k-text-start" id="kendo-hint-0">Your first name</kendo-formhint>
	</div>
</kendo-formfield>

I guess this is due to a version issue?

This problem makes Formly virtually unusable to us. Unless we rewrite all field and wrapper templates ourselves.

[aitboudad]

So if I understood you're looking for a horizontal layout which can be done by overriding the default form-field kendo wrapper

You may check bootstrap example https://formly.dev/examples/bootstrap-specific/bootstrap-horizontal and to apply the layout globally use form-field as name:

    FormlyModule.forRoot({
      wrappers: [{
-        name: 'form-field-horizontal',
+        name: 'form-field',
         component: FormlyHorizontalWrapper
      }],
    }),

[JohanHeyvaert]

Ehm, are you responding to a different question? :-)

No, I don't want an horizontal layout, and I don't want to use Bootstrap. I want to use the default Kendo templates but they don't have the expected result. They are suppossed to render a "vertical" form but instead everything flows horizontally.

It's not just in my code, the official formly examples on Stackblitz have the same problem. But there it's less evident as the examples only show one field at once. But you can see there is a problem because the label appears next to the input instead of above it. And if you add other fields they too are added horizontally.

So I think the current formly version isn't compatible anymore with the latest Kendo UI version?
As I wrote, the outputted html is totally different than that of Kendo UI's latest version.

[aitboudad]

Well if the layout from Kendo has been changed we may consider it as a Feature that can be only implemented in a major version due to BC.
So in your case, the solution is to use the above solution (bootstrap is just an example that shows you how to implement the same with Kendo).

[JohanHeyvaert]

Ok, thanks.
I'm trying to solve it by implementing our own templates, but I have a problem with my new custom wrapper:

<kendo-formfield>
  <kendo-label [for]="to.id" [text]="to.label"></kendo-label>
  <kendo-datepicker [formControl]="formControl" [formlyAttributes]="field"></kendo-datepicker>
  <ng-template #fieldComponent></ng-template>
  <kendo-formhint>{{ to.description }}</kendo-formhint>
  <formly-validation-message *ngIf="showError" class="k-field-info k-required" [field]="field">
  </formly-validation-message>
</kendo-formfield>

It seems like kendo-formfield doesn't allow to inject a ng-template. When I run the code, it throws an exception:
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.
at FormFieldComponent.validateFormControl (index.js:9682)
at FormFieldComponent.set formControls [as formControls] (index.js:9643)
at Object.FormFieldComponent_ContentQueries [as contentQueries] (index.js:9766)
at refreshContentQueries (core.js:7101)
at renderView (core.js:7270)
at renderComponent (core.js:8501)
at renderChildComponents (core.js:7115)
at renderView (core.js:7281)
at ComponentFactory$1.create (core.js:22290)
at ViewContainerRef.createComponent (core.js:10246)

I've also tried with ng-content instead of ng-template.

Do you know by any chance an easy solution for this?

[aitboudad]

Well in that case the easy solution is to define each type separately without the wrapper as the new implementation is quite similar to the material UI which we've solved in a hacky way.

[tomvanoost]

Are there plans to get this fixed? Formly+Kendo integration doesn't seem to work well at all.

[aitboudad]

@tomvanoost not sure what doesn't seem to work 🤔 , for newer version please check https://github.com/ngx-formly/ngx-formly/releases/tag/v6.0.0-next.4 https://main.formly.dev/ui/kendo

[tomvanoost]

The layout has serious issues.
Thank you @aitboudad, I will take a look at that.

[tomvanoost]

@aitboudad The Kendo controls used in the examples/pages that you send me are very much outdated.
When you upgrade them the layout will break. And I had issues that they don't keep their state.

[aitboudad]

we may check them once time allows but PR is welcomed 🙏 https://github.com/ngx-formly/ngx-formly/tree/main/src/ui/kendo

[aitboudad]

This issue has been fixed and released as part of v6.0.0-next.9 release.

Please let us know, in case you are still encountering a similar issue/problem.
Thank you!