JQuery Web Components
The implementation of Kendo JQuery comes from the need to bring support to those components which they don't have a Kendo UI for Angular Component yet. Is important to mention that this is a temporary solution meanwhile the components are supported by Telerik Kendo UI for Angular.
We have a little structure in order to integrate these components, in this case Angular framework.
Kendo Component
The kendo component is the main structure for all widgets, is used to manage general things that all WebMap's JQuery components must implement. On it, main properties stand out:
element: Has the native element of the widget element reference.
kWidget: k-widget reference.
widget: Widget reference.
boundValue: It controls the bound value for the current component.
modelValue: It controls the model value for the current component.
prefix: Is used to set a prefix for a function of the current component.
isViewInitialized: Boolean view value for the current component.
eventQueue: This property contains an array of all the events registered to this component.
differences: Is used to check if the model changes.
Kendo Component Methods
Method
Supported
Details
render: void
Yes
This method is the one in charge to set a reference of k-widget and widget.
registerFunction: void
Yes
This function is a merge between a component property and a function, you have to use registerFunction when you need to execute a function after some property change.
applyChanges: void
Yes
This method apply changes when any action in the model is updated.
updateComponent: void
Yes
This function builds a registered function and push it to eventQueue array.
normalizeName: void
Yes
This function sets the proper structure to a property name string.
Life Cycle Hook
Kendo Component implements Life cycle managed by Angular and the following methods are customized:
ngDoCheck: Notifies when model changes and send to applyChanges() method the changes.
ngAfterViewInit: Is the one in charge to process the eventQueue array where the view is initialized.
ngOnDestroy: Gets the native element reference and destroy its widget.
JQuery Component Implementation
In order to successfully implement new JQuery component, we need to :
Create a Kendo
component.ts
file that extendskendocomponent
. Assign a data-role on the @Componentselector
and valid widget name onsuper
.
Creating a component
We have to generate a component as usually on kendoUI folder
Take the following considerations:
We need to Bind the model on the
HTML
fileBound the properties required on the
HTML
fileUse bind() method on the constructor and specifies a function to run when the model changes
Kendo component stores an array of registered functions , is important to use the registerFunction on our new component when we initialize it.
WinForms Components using Kendo UI for JQuery
This is the set of components that supports the System.Windows.Forms and are implemented using Kendo UI for JQuery.
Last updated