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 :

1. Create a Kendo component.ts file that extends kendocomponent. Assign a data-role on the @Component selector and valid widget name on super .

    @Component({
   
    selector: '[data-role=menu]',
    template: '<ng-content></ng-content>'
    })
    export class KendoMenuComponent extends KendoComponent implements OnInit {
    constructor(protected differs: KeyValueDiffers, elementRef: ElementRef) {
        super(differs, elementRef, 'kendoMenu');
    }
    @Input() role: any;
   
    ngOnInit(): void {
        this.render();
    }
    }

Creating a component

We have to generate a component as usually on kendoUI folder

Take the following considerations:

1. We need to Bind the model on the HTML file

     [model]='model'

2. Bound the properties required on the HTML file

    [bound]="{
    dataSource: items,
    select: onSelect,
    visible: visible} "

3. Use bind() method on the constructor and specifies a function to run when the model changes

    constructor(private service: WebMapService) {
    super();
    this.onSelect = this.onSelect.bind(this);
    this.applyFetchdata = this.applyFetchdata.bind(this);
    this.applyVisible = this.applyVisible.bind(this);
    this.applyEnabled = this.applyEnabled.bind(this);
    }

4. Kendo component stores an array of registered functions , is important to use the registerFunction on our new component when we initialize it.

    ngOnInit(): void {
    this.dataFetchBuffer = {};
    this.toolstripEl['registerFunction']('Refresh', this.applyFetchdata);
    this.toolstripEl['registerFunction']('Visible', this.applyVisible);
    this.toolstripEl['registerFunction']('Enabled', this.applyEnabled);
    }

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.

• ToolStrip
• ListBox