概要

コンボ(GcComboBox)コントロールは、複数列(マルチカラム)のリスト表示機能やスピンボタンによる入力機能など、標準のコンボボックス(セレクトボックス)にはない豊富な機能を備えています。また、テキストエリアへの値の直接入力に対応しており、入力された値に合致する項目を自動的に表示するオートフィルタ機能なども提供しています。
import './styles.css'; import '@grapecity/inputman/CSS/gc.inputman-js.css'; import { Component, enableProdMode } from '@angular/core'; import GC from "@grapecity/inputman"; @Component({ selector: 'app-component', templateUrl: './src/app.component.html', }) export class AppComponent { public products = ['果汁100%オレンジ', '果汁100%グレープ', '果汁100%レモン', '果汁100%ピーチ', 'コーヒーマイルド', 'コーヒービター']; public orders = [ { id: 15, product: 'ピュアデミグラスソース', date: '2017/01/10', price: 200, amount: 30 }, { id: 17, product: 'だしこんぶ', date: '2017/01/08', price: 290, amount: 50 }, { id: 18, product: 'ピリカラタバスコ', date: '2017/01/12', price: 200, amount: 20 }, { id: 84, product: 'なまわさび', date: '2017/01/21', price: 200, amount: 40 }, { id: 85, product: 'なまからし', date: '2017/01/13', price: 200, amount: 40 }, { id: 86, product: 'なましょうが', date: '2017/01/20', price: 200, amount: 40 }, ]; public gcProducts = [ { logo: 'img/AR.png', name: 'ActiveReports', category: '帳票・レポート', description: '日本仕様の帳票開発に必要な機能を搭載したコンポーネント' }, { logo: 'img/SP.png', name: 'SPREAD', category: '表計算・グリッド', description: 'Excel風のビューと表計算機能を実現するUIコンポーネント' }, { logo: 'img/C1.png', name: 'ComponentOne', category: 'コンポーネントセット', description: 'Visual Studioで利用する.NET Framework用コンポーネント' }, { logo: 'img/IM.png', name: 'InputMan', category: '入力支援', description: '快適な入力を実現する日本仕様入力コンポーネントセット' }, { logo: 'img/MR.png', name: 'MultiRow', category: '多段明細', description: '1レコード複数行&日付表示に最適なグリッドコンポーネント' }, { logo: 'img/DD.png', name: 'DioDocs', category: 'ドキュメントAPI', description: 'ドキュメントを生成、更新するAPIライブラリ' }, ]; public itemTemplate = `<div class="template-item"> <div class="image"><img src="{!logo}"></div> <div class="names"><div class="name">{!name}</div><div class="category">{!category}</div></div> <div class="description">{!description}</div> </div>`; public generatingItem(args: GC.InputMan.IItemGeneratingArgs) { args.item.classList.add(args.index % 2 ? 'odd' : 'even'); } } enableProdMode();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>コンボコントロール - 概要</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Polyfills --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.min.js"></script> <!-- SystemJS --> <script src="node_modules/systemjs/dist/system.js"></script> <script src="systemjs.config.js"></script> <script> // workaround to load 'rxjs/operators' from the rxjs bundle System.import('rxjs').then(function (m) { System.set(SystemJS.resolveSync('rxjs/operators'), System.newModule(m.operators)); System.import('./src/app.component.module'); }); </script> </head> <body> <app-component></app-component> </body> </html>
<div class="flexbox"> <div> 単純なリスト<br> <gc-combo-box [items]="products"></gc-combo-box> </div> <div> 複数列<br> <gc-combo-box [items]="orders" [displayMemberPath]="'product'" [valueMemberPath]="'product'" [dropDownWidth]="'auto'"> <gc-combo-box-column [name]="'id'" [label]="'商品コード'" [width]="80" [clickSort]="true"></gc-combo-box-column> <gc-combo-box-column [name]="'product'" [label]="'商品名'" [width]="200"></gc-combo-box-column> <gc-combo-box-column [name]="'date'" [label]="'受注日'" [width]="120" [clickSort]="true"></gc-combo-box-column> <gc-combo-box-column [name]="'price'" [label]="'単価'" [width]="80" [clickSort]="true"></gc-combo-box-column> <gc-combo-box-column [name]="'amount'" [label]="'数量'" [width]="80" [clickSort]="true"></gc-combo-box-column> </gc-combo-box> </div> <div> テンプレート<br> <gc-combo-box [items]="gcProducts" [itemHeight]="50" [displayMemberPath]="'name'" [valueMemberPath]="'name'" [itemTemplate]="itemTemplate" [dropDownWidth]="'auto'" [generatingItem]="generatingItem.bind(this)"> </gc-combo-box> </div> </div>
import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { InputManModule } from "@grapecity/inputman.angular"; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ InputManModule, BrowserModule, FormsModule, ], providers: [], bootstrap: [AppComponent], schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ] }) export class AppModule { } // Bootstrap application with hash style navigation and global services. platformBrowserDynamic().bootstrapModule(AppModule);
body { min-height: 350px; } .viewport { line-height: 1.3; } .template-item { height: 50px; display: flex; justify-content: center; align-items: center; } .template-item > * { margin: 0 5px; } .image { width: 40px; height: 40px; } .image img { width: 40px; } .names { width: 150px; } .name { font-size: 16px; font-weight: bold; color: #2676c0; } .category { font-size: 12px; color: green; } .description { width: 210px; white-space: normal; } .list-item[selected="true"] .name, .list-item[selected="true"] .category { color: white; } .odd { background: aliceblue; }
(function (global) { System.config({ transpiler: 'ts', typescriptOptions: { tsconfig: true }, meta: { 'typescript': { "exports": "ts" }, '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'core-js': 'npm:core-js/client/shim.min.js', 'zone': 'npm:zone.js/dist/zone.min.js', //'reflect-metadata': 'npm:reflect-metadata/Reflect.js', 'rxjs': 'npm:rxjs/bundles/rxjs.umd.min.js', //'rxjs': 'npm:rxjs', //'rxjs/operators': 'npm:rxjs/operators', '@angular/core': 'npm:@angular/core/bundles/core.umd.min.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.min.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.min.js', '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.min.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.min.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js', '@grapecity/inputman': 'npm:@grapecity/inputman/index.js', '@grapecity/inputman.angular': 'npm:@grapecity/inputman.angular/bundles/grapecity-inputman.angular.umd.js', '@grapecity/inputman/CSS': 'npm:@grapecity/inputman/CSS', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'jszip': 'npm:jszip/dist/jszip.min.js', 'typescript': 'npm:typescript/lib/typescript.js', 'ts': 'npm:plugin-typescript/lib/plugin.js', 'css': 'npm:systemjs-plugin-css/css.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'ts' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, "@grapecity/inputman": { defaultExtension: 'js' } } }); })(this);