Hi,
I have a grid with dynamic columns and for each column I need a specific editor that should be created at run time.
How can I create custom the editor on run time and append the component to cell using Kendo grid for Angular?. Here is an example where I use Jquery :http://jsfiddle.net/falafelsoftware/yX6kg/
Thank you!
3 Answers, 1 is accepted
0
Hi Andra,
The equivalent for providing different custom column editors like in the linked example, would be to use the Grid EditTemplateDirective and provide a custom component that will represent the desired custom UI and functionality. A sample implementation is available in the following online demo:
https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-reactive-editing/
Alternatively when the Grid columns are generated dynamically by looping through a collection of Grid column configuration objects, a way to switch cell editors will be to have a predefined definition inside the cell template and to toggle their visibility based on the appropriate type. However, this approach can be further enhanced by creating a custom component, which to dynamically load the editor component instead. This approach is demonstrated in the following plunker:
http://plnkr.co/edit/mRsFSJGhg1Ck3fRegouW?p=preview
Please take a look at the CustomEditorComponent ​implementation. This component's responsibility is to create and load either a DropDownList or Numeric component and pass the configuration. A key point about dynamically creating components is that they should be present in the Module's entryComponents. Also note that in order to support FormControl the dynamic loader component should implement ControlValueAccessor. This implementation is just to pass it to the inner editor component, as they already implement the interface.
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik
The equivalent for providing different custom column editors like in the linked example, would be to use the Grid EditTemplateDirective and provide a custom component that will represent the desired custom UI and functionality. A sample implementation is available in the following online demo:
https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-reactive-editing/
Alternatively when the Grid columns are generated dynamically by looping through a collection of Grid column configuration objects, a way to switch cell editors will be to have a predefined definition inside the cell template and to toggle their visibility based on the appropriate type. However, this approach can be further enhanced by creating a custom component, which to dynamically load the editor component instead. This approach is demonstrated in the following plunker:
http://plnkr.co/edit/mRsFSJGhg1Ck3fRegouW?p=preview
Please take a look at the CustomEditorComponent ​implementation. This component's responsibility is to create and load either a DropDownList or Numeric component and pass the configuration. A key point about dynamically creating components is that they should be present in the Module's entryComponents. Also note that in order to support FormControl the dynamic loader component should implement ControlValueAccessor. This implementation is just to pass it to the inner editor component, as they already implement the interface.
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
Lee
Top achievements
Rank 1
Rank 1
answered on 19 Jul 2019, 07:17 PM
Hi, is there an answer for this post? I need to implement the same and have not been able to find any workable examples. The plunker listed in the response no longer works, and it is not loading columns dynamically. Thanks in advance.
0
Hi Lee,
The Plunker is rather outdated, but all revenant code is still working as expected when ported to a Stackblitz example, e.g.:
https://stackblitz.com/edit/angular-irnnby?file=app/app.component.ts
The project demonstrates how to create a custom directive that creates different editing UI based on the field the column is bound to, and the desired editor for this field.
This can be easily adapted to a scenario where the columns are generated dynamically by passing each column type to the directive while creating the columns via *ngFor, e.g.:
https://stackblitz.com/edit/angular-irnnby-6acrb7?file=app/app.component.ts
Alternatively, you can provide all possible cell and edit templates within the column configuration markup, and display the desired one conditionally via some property of the column configuration object.
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik
The Plunker is rather outdated, but all revenant code is still working as expected when ported to a Stackblitz example, e.g.:
https://stackblitz.com/edit/angular-irnnby?file=app/app.component.ts
The project demonstrates how to create a custom directive that creates different editing UI based on the field the column is bound to, and the desired editor for this field.
This can be easily adapted to a scenario where the columns are generated dynamically by passing each column type to the directive while creating the columns via *ngFor, e.g.:
https://stackblitz.com/edit/angular-irnnby-6acrb7?file=app/app.component.ts
Alternatively, you can provide all possible cell and edit templates within the column configuration markup, and display the desired one conditionally via some property of the column configuration object.
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik
Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.