# 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` .

   ```typescript
    @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

   ```typescript
     [model]='model'
   ```
2. Bound the properties required on the `HTML` file

   ```typescript
    [bound]="{
    dataSource: items,
    select: onSelect,
    visible: visible} "
   ```
3. Use bind() method on the constructor and specifies a function to run when the model changes

   ```typescript
    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.

   ```typescript
    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](/webmap/general/frontend/documentation/winforms-angular-components/web-components/kendoui-components/toolstrip.md)
* [ListBox](/webmap/general/frontend/documentation/winforms-angular-components/web-components/kendoui-components/listbox.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gapvelocity.ai/webmap/general/frontend/documentation/winforms-angular-components/web-components/jquery-web-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.