[]
var select = document.getElementById('select');
var config = {
visibleItems: 5,
dropDownWidth: 300,
itemHeight: 30,
colHeaderHeight: 25,
items: [
{id: 0, name: 'item0'},
{id: 1, name: 'item1'},
{id: 2, name: 'item2'},
{id: 3, name: 'item3'},
{id: 4, name: 'item4'},
{id: 5, name: 'item5'},
{id: 6, name: 'item6'},
{id: 7, name: 'item7'},
],
columns: [
{name: 'id', label: 'ID', width: 70, isValuePath: true, visible: true, clickSort: true},
{name: 'name', label: 'Name', width: 70, visible: true, clickSort: true},
],
allowResize: true,
virtualMode: true,
overflow: GC.InputMan.ScrollBars.Both,
formatItem: function(args){
args.itemObject.id = "ID : " + args.itemObject.id;
},
generatingItem: function(args){
args.item.classList.add(args.index % 2 ? "odd" : "even");
}
};
var combo = new GC.InputMan.GcComboBox(select, config);
indicate GcComboBox settings.
文字列をコピー、切り取り、および貼り付けるときに改行コード(CrLf文字)をどのように処理するかを設定または取得します。
ドロップダウンリストの列幅をユーザーが変更できるかどうかを設定または取得します。
ドロップダウンリストのリサイズを許可するかどうかを設定または取得します。
オートコンプリートで検索時の時のあいまいさを設定もしくは取得します。
オートコンプリートの実行方法を設定もしくは取得します。
コントロールがフォーカスを取得すると、自動的にドロップダウンを開くかどうかを設定または取得します。
オートフィルターの種類を設定または取得します。
テキストが入力幅から見きれてしまうときに、テキストを入力幅に合わせて縮小するかどうかを設定または取得します。
参照:setAutoScale
コンボボックスにテキストを入力したときに自動的にアイテムを選択するかどうかを設定または取得します。
チェックしたアイテムのインデックスを取得または設定します。
チェックしたアイテムを取得または設定します。
alueMemberPathを使用してチェックされたアイテム値の配列を取得または設定します。
コンポーネント名('GcComboBox')を取得します。
コントロールを配置しているコンテナを設定または取得します。コントロールの下部にドロップダウンを表示するために十分なスペースがあるかどうかをチェックし、ドロップダウンを反転してコントロールの上部に表示するかどうかを決定します。
参照:setContainer
コピーボタンを押下した後にツールチップで表示するテキストを設定もしくは取得します。
コピーボタンのマウスオーバーでツールチップで表示するテキストを設定もしくは取得します。
ドロップダウンリスト項目のパスを取得します。
コンボボックスに表示されているテキストを取得します。
ドロップダウンボタンを動的に表示または非表示するかどうかの値を設定または取得します。
ドロップダウンリストのツリービューのインスタンスを取得します。
ドロップダウンリストの表示形式を取得します。
このコントロールのドロップダウンウィンドウを取得します。ドロップダウンがない場合は undefined を返し、複数のドロップダウンがある場合は最後のドロップダウンを返します。
コンボボックスのエディタを編集可能にするかどうかを設定または取得します。
参照:setEditable
コンボボックスのエディタを編集可能にするかどうかを設定または取得します。
参照:setEditable
文字列がコントロールの幅よりも長いときに、省略文字を表示するかどうかを設定または取得します。
参照:setEllipsis
コントロールに表示する省略文字を設定または取得します。
コントロールやオブジェクトを有効にするかどうかを示す値を設定または取得します。
参照:setEnabled
フォーカスの移動方法を設定または取得します。
矢印キーを使ったフォーカスの移動方法を設定または取得します。
フローティングラベルの表示位置を設定もしくは取得します。
フローティングラベルの表示テキストを設定もしくは取得します。
フローティングラベルの表示パターンを設定もしくは取得します。
フローティングラベルのフォントサイズを設定もしくは取得します。
フローティングラベルの高さを設定もしくは取得します。
ヘルプボタンのマウスオーバーでツールチップで表示するテキストを設定もしくは取得します。
コントロールがフォーカスを受け取ったときに、テキストを選択するかどうかを設定または取得します。
現在の編集モードが上書きに設定されているかどうかを取得します。
フローティングラベルの最大高を設定もしくは取得します。
フローティングラベルの最大高を設定もしくは取得します。
フローティングラベルの最小高を設定もしくは取得します。
テキストを縮小するときの最小倍率を設定または取得します。
フローティングラベルの最小幅を設定もしくは取得します。
isMultiSelectがtrueの場合の区切り文字を設定します。
コントロールを読み取り専用モードにするかどうかを取得または設定します。
参照:getReadOnly 参照:setReadOnly
選択したアイテムのインデックスを取得または設定します。
選択されたアイテムを取得または設定します。
valueMemberPathを使用して選択されたアイテムの値を取得または設定します。
クリアボタンを表示するかどうかを設定または取得します。
コピーボタンを表示するかどうかを設定もしくは取得します。
ヘルプボタンを表示するかどうかを設定もしくは取得します。
セルの内容が見切れている場合に、すべてのセルのチップを表示するかどうかを設定または取得します。
参照:setShowTip
コンボボックスにスピンボタンを設定または取得します。
マウスホイールを使用してスピン動作を許可するかどうかを設定または取得します。
参照:setSpinWheel
コントロールのtabIndexを取得または設定します。
コントロールにテキストを設定または取得します。
参照:setText
クリップボードにアクセスすることを許可するかどうかを設定または取得します。
ドロップダウンリスト値のパスを取得します。
コントロールをページに表示するかどうかを示す値を設定または取得します。
参照:setVisible
コントロールにフォーカスがなく未入力のときの代替テキストを設定または取得します。
コントロールにフォーカスがあり未入力のときの代替テキストを設定または取得します。
フローティングラベルの幅を設定もしくは取得します。
指定したイベントが発生したときに実行する処理を設定します。
イベントの種類を表す文字列(大文字と小文字を区別しません)
イベントが発生したときに実行する処理
var selectedChangedHandler = function(){
let selectedValues = combo.getSelectedValue();
console.log(selectedValues);
}
combo.addEventListener(GC.InputMan.GcComboBoxEvent.SelectedChanged, selectedChangedHandler);
ドロップダウンリストにアイテムを追加します。
追加するアイテム
リストにアイテムの配列を追加します。
アイテムの配列
コンボボックスにスピンボタンを追加します。
参照:spinButton
スピンボタンを表示する位置を指定します。Trueにすると左側に、それ以外は右側に表示されます。
テキストが入力幅から見きれてしまうときに、入力幅に合わせてテキストを調整します。
アイテムのチェックを解除します。
すべてのドロップダウンリストの項目をクリアします。
アイテムの選択を解除します。
スピン機能を使ってコントロールの値を減少します。
値の減少量。省略した場合は 1。
スピン機能を使ってコントロールの値を増加します。
値の増加量。省略した場合は 1。
フィルタ条件に合致したアイテムでドロップダウンリストをリロードします。 filterInfos が nullの場合、フィルター条件をクリアします。
var filters = [{name: 'id', comparator: FilterComparator.Equal, filterString: '3'}];
// item['id'] === '3' の条件でフィルタリングします
combobox.filter(filters);
// フィルター条件をクリアします
combobox.filter(null)
// フィルター条件を関数で定義します。
combobox.filter(function (v) {
return v.id > parseInt(input.value);
});
フィルター条件(filterInfo)の配列
指定した列で検索文字列を含む最初のアイテムを見つけます。
検索する文字列
検索を開始する位置
検索する列
検索で見つかった最初のアイテムのインデックス
指定した列で検索文字列と一致する最初のアイテムを見つけます。
検索する文字列
検索を開始する位置
検索する列
検索で見つかった最初のアイテムのインデックス
チェックしたアイテムのインデックスを取得します。
参照:checkedIndices
チェックしたアイテムのインデックスの配列
チェックしたアイテムを取得します。
参照:checkedItems
チェックしたアイテムの配列
valueMemberPathを使用してチェックされたアイテム値の配列を取得します。
参照:checkedValues
チェックしたアイテムの値の配列
コンボボックスに表示されているテキストを取得します。
参照:displayText
コンボボックスに表示されているテキスト
ドロップダウンリストの特定の列の幅を取得します。
const gcComboBox = new GC.InputMan.GcComboBox(document.getElementById("combobox1"), {
items: [
{
id: 1,
name: 'Jenny'
},
{
id: 2,
name: 'Mike'
}],
columns: [
{
"name": "id",
"width": 80,
},
{
"name": "name",
width: 200
}],
displayMemberPath: 'name',
width: 200,
height: 30,
dropDownWidth: 300
});
// ドロップダウンリストの特定の列の幅を取得します。
const width = gcComboBox.getDropDownColumnWidth('name');
列名
このコントロールのドロップダウンウィンドウを取得します。ドロップダウンがない場合は undefined を返し、複数のドロップダウンがある場合は最後のものを返します。
参照:dropDownWindow
このコントロールのドロップダウンウィンドウを取得します。
現在の編集モードが上書きに設定されているかどうかを取得します。
参照:isOverwrite
上書きモードはtrue、挿入モードはfalse。
ドロップダウンリストのアイテムを含む配列データを取得します。
参照:items
アイテムの配列
コントロールを読み取り専用モードにするかどうかを取得します。
参照:readOnly
読み取り専用の場合はtrue、それ以外はfalse。
選択したアイテムのインデックスを取得します。
参照:selectedIndex
選択したアイテムのインデックス
選択されたアイテムを取得します。
参照:selectedItem
選択されたアイテム
valueMemberPathを使用して選択されたアイテムの値を取得します。
参照:selectedValue
選択されたアイテムの値
ドロップダウンリストの指定した位置にアイテムを挿入します。
挿入するアイテム
アイテムを挿入するインデックス位置
ドロップダウンリストの指定した位置に複数のアイテムを挿入します。
挿入するアイテム
アイテムを挿入するインデックス位置
addEventListenerで登録したイベントを削除します。
イベントの種類を表す文字列(大文字と小文字を区別しません)
コントロールから削除するイベント処理
combo.removeEventListener(GC.InputMan.GcComboBoxEvent.SelectedChanged, selectedChangedHandler);
文字列をコピー、切り取り、および貼り付けるときに改行コード(CrLf文字)をどのように処理するかを示す値を設定します。
参照:acceptsCrlf
改行コードの処理方法を示す値(CrLfMode列挙体)。
ドロップダウンリストの列幅をユーザーが変更できるかどうかを設定します。
参照:allowColumnResize
列幅のリサイズを許可する場合はtrue、それ以外はfalse。
ドロップダウンリストのリサイズを許可するかどうかを設定します。
参照:allowDropDownResize
リストボックスのリサイズを許可するかどうか
コントロールがフォーカスを取得すると、自動的にドロップダウンを開くかどうかを設定します。
参照:autoDropDown
自動的にドロップダウンを開く場合はtrue、それ以外はfalse。
オートフィルターの種類を設定します。
参照:autoFilter
オートフィルターの種類
テキストが入力幅から見きれてしまうときに、テキストを入力幅に合わせて縮小するかどうかを設定します。
参照:autoScale
テキストが入力幅から見きれてしまうときに、テキストを入力幅に合わせて縮小するかどうかを表す値
コンボボックスにテキストを入力したときに自動的にアイテムを選択するかどうかを設定します。
参照:autoSelect
アイテムを自動的に選択するかどうか(true または false)
インデックスで指定したアイテムをチェックします。
参照:checkedIndices
チェックするインデックスの配列
チェックするアイテムを設定します。
参照:checkedItems
チェックするアイテムの配列
valueMemberPathを使用してチェックするアイテムの値を設定します。
参照:checkedValues
チェックするアイテムの値の配列
コントロールを配置しているコンテナを設定します。コントロールの下部にドロップダウンを表示するために十分なスペースがあるかどうかをチェックし、ドロップダウンを反転してコントロールの上部に表示するかどうかを決定します。
参照:container
combobox.setContainer(div);
ドロップダウンボタンを動的に表示または非表示にします。
参照:dropDownButtonVisible
ドロップダウンボタンを表示する場合はtrue、非表示にする場合はfalse。
ドロップダウンリストの特定の列の幅を設定します。
const gcComboBox = new GC.InputMan.GcComboBox(document.getElementById("combobox1"), {
items: [
{
id: 1,
name: 'Jenny'
},
{
id: 2,
name: 'Mike'
}],
columns: [
{
"name": "id",
"width": 80,
},
{
"name": "name",
width: 200
}],
displayMemberPath: 'name',
width: 200,
height: 30,
dropDownWidth: 300
});
// ドロップダウンリストの特定の列の幅を設定します。
gcComboBox.setDropDownColumnWidth('name', 120);
列名
列幅
コンボボックスのエディタを編集可能にするかどうかを設定します。
参照:editable
編集可能にする場合はtrue、それ以外はfalse。
文字列がコントロールの幅よりも長いときに、省略文字を表示するかどうかを設定します。
参照:ellipsis
省略文字を表示方法を示す値(EllipsisMode列挙体)。
コントロールに表示する省略文字を設定します。
参照:ellipsisString
省略文字。
コントロールやオブジェクトを有効にするかどうかを示す値を設定します。
参照:enabled
有効にする場合はtrue、それ以外はfalse。
フォーカスの移動方法を変更します。
参照:exitOnEnterKey
矢印キーを使ったフォーカスの移動方法を設定します。
参照:exitOnLeftRightKey
矢印キーを使ったフォーカスの移動方法を示す値 (ExitOnLeftRightKey列挙体)。
コントロールがフォーカスを受け取ったときに、テキストを選択するかどうかを設定します。
参照:highlightText
選択状態を示す値(HighlightText列挙体)。
ドロップダウンリストのアイテムを含む配列データを設定します。
参照:items
アイテムの配列
テキストを縮小するときの最小倍率を設定します。
参照:minScaleFactor
最小倍率。
コントロールを読み取り専用モードにするかどうかを設定します。
参照:readOnly
読み取り専用の場合はtrue、それ以外はfalse。
選択するアイテムのインデックスを設定します。
参照:selectedIndex
選択するアイテムのインデックス
選択するアイテムを設定します。
参照:selectedItem
選択するアイテム
valueMemberPathを使用して選択するアイテムの値を設定します。
参照:selectedValue
選択するアイテムの値
クリアボタンを表示するかどうかを設定します。
参照:showClearButton
クリアボタンを表示するかどうかを表す値。
セルの内容が見切れている場合に、すべてのセルのチップを表示するかどうかを設定します。
参照:showTip
セルの内容が見切れている場合に、すべてのセルのチップを表示するかどうかを表す値。
マウスホイールを使用してスピン動作を許可するかどうかを設定します。
参照:spinWheel
マウスホイールを使用してスピン動作を許可するかどうかを表す値。
コントロールにテキストを設定します。参照:text
設定するテキスト
クリップボードにアクセスすることを許可するかどうかを設定します。
参照:useClipboard
アクセスを許可する場合はtrue、それ以外はfalse。
コントロールをページに表示するかどうかを示す値を設定します。
参照:visible
表示する場合はtrue、それ以外はfalse。
コントロールにフォーカスがなく未入力のときの代替テキストを設定します。
参照:watermarkDisplayNullText
代替テキスト。
コントロールにフォーカスがあり未入力のときの代替テキストを設定します。
参照:watermarkNullText
代替テキスト。
指定した並び順でリロードします。 sortInfo が nullの場合、並び替えを解除します。
// 'id'列を昇順で並び替えます
combobox.sort({name: 'id', isAsc: true});
// 並び替えを解除します。
combobox.sort(null);
// 並び替え条件を関数で定義します。
combobox.sort(function (left, right) {
return right.item.id - left.item.id;
});
指定された列の自動調整設定を更新します。
combobox.updateColumnAutoFit([
{name: "id", autofit: true},
{name: "name", autofit: true},
{name: "age", autofit: false}
]);
自動調整の設定方法を指定します。
アイテムのチェック状態が変更されたときに発生します。
var checkedChangedHandler = function(sender){
let checkedValues = sender.getCheckedValues();
console.log(checkedValues);
}
// イベントリスナーを追加します。
combo.addEventListener(GC.InputMan.GcComboBoxEvent.CheckedChanged, checkedChangedHandler);
// イベントリスナーを削除します。
combo.removeEventListener(GC.InputMan.GcComboBoxEvent.CheckedChanged, checkedChangedHandler);
イベントが発生したコントロールのオブジェクト
ドロップダウンリストが閉じられたときに発生します。
var dropDownClosedHandler = function(sender){
console.log("DropDownClosed");
}
// イベントリスナーを追加します。
combo.addEventListener(GC.InputMan.GcComboBoxEvent.DropDownClosed, dropDownClosedHandler);
// イベントリスナーを削除します。
combo.removeEventListener(GC.InputMan.GcComboBoxEvent.DropDownClosed, dropDownClosedHandler);
イベントが発生したコントロールのオブジェクト
ドロップダウンリストが開いたときに発生します。
var dropDownOpenedHandler = function(sender){
console.log("DropDownOpened");
}
// イベントリスナーを追加します。
combo.addEventListener(GC.InputMan.GcComboBoxEvent.DropDownOpened, dropDownOpenedHandler);
// イベントリスナーを削除します。
combo.removeEventListener(GC.InputMan.GcComboBoxEvent.DropDownOpened, dropDownOpenedHandler);
イベントが発生したコントロールのオブジェクト
アイテムのリストが変更されたときに発生します。
var itemsChangedHandler = function(sender){
console.log("ItemsChanged");
}
// イベントリスナーを追加します。
combo.addEventListener(GC.InputMan.GcComboBoxEvent.ItemsChanged, itemsChangedHandler);
// イベントリスナーを削除します。
combo.removeEventListener(GC.InputMan.GcComboBoxEvent.ItemsChanged, itemsChangedHandler);
イベントが発生したコントロールのオブジェクト
選択しているアイテムが変更されたときに発生します。
var selectedChangedHandler = function(sender){
let selectedValue = sender.getSelectedValue();
console.log(selectedValues);
}
// イベントリスナーを追加します。
combo.addEventListener(GC.InputMan.GcComboBoxEvent.SelectedChanged, selectedChangedHandler);
// イベントリスナーを削除します。
combo.removeEventListener(GC.InputMan.GcComboBoxEvent.SelectedChanged, selectedChangedHandler);
イベントが発生したコントロールのオブジェクト
スピンダウンボタンがクリックされたときに発生します。
var spinDownHandler = function(sender){
console.log("SpinDown");
}
// イベントリスナーを追加します。
combo.addEventListener(GC.InputMan.GcComboBoxEvent.SpinDown, spinDownHandler);
// イベントリスナーを削除します。
combo.removeEventListener(GC.InputMan.GcComboBoxEvent.SpinDown, spinDownHandler);
イベントが発生したコントロールのオブジェクト
スピンアップボタンがクリックされたときに発生します。
var spinUpHandler = function(sender){
console.log("SpinUp");
}
// イベントリスナーを追加します。
combo.addEventListener(GC.InputMan.GcComboBoxEvent.SpinUp, spinUpHandler);
// イベントリスナーを削除します。
combo.removeEventListener(GC.InputMan.GcComboBoxEvent.SpinUp, spinUpHandler);
イベントが発生したコントロールのオブジェクト
テキストが変更され、コントロールがフォーカスを失ったときに発生します。
var textChangedChangedHandler = function(sender){
let text = sender.getDisplayText();
console.log(text);
}
// イベントリスナーを追加します。
combo.addEventListener(GC.InputMan.GcComboBoxEvent.TextChanged, textChangedChangedHandler);
// イベントリスナーを削除します。
combo.removeEventListener(GC.InputMan.GcComboBoxEvent.TextChanged, textChangedChangedHandler);
イベントが発生したコントロールのオブジェクト
GcComboBox