SPCM Lookup Component

The spcm-lookup component provides a searchable lookup functionality integrated with Kendo UI for Angular components.

Features

• Displays a searchable grid for selecting items.
• Allows customization of headers and search functionality.
• Supports event emissions for handling selection and search actions.

Component Properties

Inputs

• bindItem: Binds the item identifier.
• valueHeader: Header for the value column in the grid.
• descriptionHeader: Header for the description column in the grid.
• searchTitle: Title for the search dialog window.
• class: Custom CSS class to apply to the component.
• disableFlag: Disables/enables the component.
• description: Description for the selected item.
• gridLookupData: Array of items to populate the grid.

Outputs

• inputChange: Event emitted when the input value changes (EventEmitter<string>).
• lookupItemSelected: Event emitted when an item is selected in the grid (EventEmitter<any>).
• search: Event emitted when the search action is triggered (EventEmitter<string>).

Installation

Install spcm-lookup via npm or yarn:

npm  install  spcm-lookup

Usage

Import Component

Import SpcmLookupComponent into your Angular standalone component.

  import { SpcmLookupComponent } from  'spcm-lookup';
  
  @Component({
      selector:  'app-root',
      standalone:  true,
      imports: [
  	    RouterOutlet,
  	    CommonModule,
  	    SpcmLookupComponent
      ],
      templateUrl:  './app.component.html',
      styleUrl:  './app.component.css'
  })
  
  export  class  AppComponent { }

Use Component

In your component template, use the spcm-dropdown component:

  <spcm-lookup
      [bindItem]="bindItem"
      [valueHeader]="valueHeader"
      [descriptionHeader]="descriptionHeader"
      [searchTitle]="searchTitle"
      [disableFlag]="disableFlag"
      [description]="description"
      [gridLookupData]="gridLookupData"
      (inputChange)="handleInputChange($event)"
      (lookupItemSelected)="handleItemSelected($event)"
      (search)="handleSearch($event)">
  </spcm-lookup>
  ```