gwt-kendo-controls

A custom Angular library that wraps Kendo UI for Angular components with custom GWT-prefixed selectors and additional functionality.

Installation

npm install gwt-kendo-controls

Required Peer Dependencies

You'll also need to install the following Kendo UI packages:

npm install @progress/kendo-angular-buttons @progress/kendo-angular-dropdowns @progress/kendo-angular-inputs @progress/kendo-angular-layout @progress/kendo-angular-navigation @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-angular-common @progress/kendo-angular-popup @progress/kendo-angular-icons @progress/kendo-svg-icons @progress/kendo-licensing @progress/kendo-theme-default @angular/localize

Quick Start

1. Add Kendo UI theme to your src/styles.css:

@import "@progress/kendo-theme-default/dist/all.css";

2. Add localize polyfill to your angular.json:

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "polyfills": [
              "zone.js",
              "@angular/localize/init"
            ]
          }
        }
      }
    }
  }
}

3. Import and use the components:

import { Component } from '@angular/core';
import { KendoTextboxComponent } from 'gwt-kendo-controls';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  imports: [KendoTextboxComponent, FormsModule],
  template: `
    <gwt-kendo-textbox 
      placeholder="Enter text..." 
      [(ngModel)]="textValue">
    </gwt-kendo-textbox>
    <p>Value: {{ textValue }}</p>
  `
})
export class AppComponent {
  textValue = '';
}

Available Components

KendoTextboxComponent

Selector: <gwt-kendo-textbox></gwt-kendo-textbox>

Properties:

• value: any - Input value
• placeholder: string - Placeholder text
• disabled: boolean - Disabled state
• readonly: boolean - Readonly state
• type: InputType - Input type (text, password)
• maxlength: number - Maximum length
• minlength: number - Minimum length
• clearButton: boolean - Show clear button
• isInvalid: boolean - Invalid state styling

Events:

• onInputChange: EventEmitter<string> - Value change event

Example:

<gwt-kendo-textbox 
  placeholder="Enter text..."
  [maxlength]="50"
  [clearButton]="true"
  [(ngModel)]="textValue"
  (onInputChange)="onTextChange($event)">
</gwt-kendo-textbox>

Module Usage

You can also import the full module:

import { KendoControlsModule } from 'gwt-kendo-controls';

@NgModule({
  imports: [KendoControlsModule],
  // ...
})
export class YourModule { }

License

MIT

Support

For issues and feature requests, please visit: https://github.com/yourusername/gwt-kendo-controls/issues