Ajaxフレームワーク UI部品リファレンス

2.3.9 ViewColumnSelect

ViewColumnSelectは、DataGridのテーブルで指定した列にプルダウン(リストボックス)を配置する部品です。

• 記述形式
• プロパティ
• スタイルプロパティ
• イベントリスナ
• JavaScript API

ViewColumnSelectは、Internet Explorerでだけ利用可能な部品です。

■記述形式

<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div>
<div rcf:type="DataGrid" rcf:data="{model1.data}">
  <div rcf:type="ViewColumnSelect" rcf:name="list1" rcf:propertyName="list" rcf:label="選択"></div>
  ...
</div>

子要素は指定できません。

■プロパティ

表の項目の意味は、“Text”の“プロパティ”を参照してください。

名前	データ型	説明	省略	省略値	属性指定	更新	部分更新
name	String	カラムの名前を指定します。 DataGridにあるViewColumnGrid、ViewColumnCheck、ViewColumnTree、ViewColumnSelect、ViewColumnImage内で、一意の値を指定してください。一意でない値を指定した場合、エラーになります。	不可	−	値	不可	不可
propertyName	String	DataGridのオブジェクトを含むdataプロパティのオブジェクトで、プルダウンの選択項目を示すプロパティ名を指定します。 セルのプルダウンを無効にする場合は、dataプロパティの該当オブジェクトにnullを指定します。	可	−	バインド	可	可
label	String	列ヘッダ部に表示する文字列を指定します。	可	nameプロパティの値	値	不可	不可
focusable(注)	Boolean	セルのフォーカスを可能にするかどうかを指定します。 true: フォーカス可 false: フォーカス不可	可	true	値	不可	不可
selectable(注)	Boolean	セルの選択を可能にするかどうかを指定します。 true: その列のセルが選択可能 false: その列のセルが選択不可	可	true	値	不可	不可

注) DataGridのfocusModeプロパティが0または1の場合にだけ、設定が有効となります。

• 配置列に対して、編集はできません。
• 配置列に対して、ソートはできません。

ViewColumnGridのプロパティも指定できます。詳細は、“ViewColumnGrid”の“プロパティ”を参照してください。

部品共通のプロパティも指定できます。詳細は、“画面部品共通プロパティ”を参照してください。

propertyNameの指定方法

ViewColumnSelectにおいて、指定するpropertyNameが示すオブジェクトのデータには、以下のように初期選択位置および選択項目を指定します。

形式

['初期選択位置', '選択項目1', '選択項目2', ... ]

指定項目の説明

指定項目	説明
初期選択位置	プルダウンの初期表示時の選択位置の先頭(0)からのインデックスを指定します。 本指定がインデックスとして認識できない値のとき、初期選択位置は、先頭(0)のリスト位置とし、指定された値をプルダウンの選択項目とします。
選択項目n	プルダウンに表示する選択項目を指定します。 初期選択位置以外の指定は、すべて選択項目として表示します。

ViewColumnSelectの指定方法

以下に例を示します。

...
<script type="text/javascript">

//<![CDATA[
  var modelData = {
    data: [
      { list: ['list1','list2','list3'],   name1: 'data1-1',  name2: 'data2-1',  name3: 'data3-1'},
      { list: ['1','list1','list2','list3'], name1: 'data1-2',  name2: 'data2-2',  name3: 'data3-2'},
      { list: null,                name1: 'data1-3',  name2: 'data2-3',  name3: 'data3-3'},
      { list: ['0','list1','list2'],      name1: 'data1-4',  name2: 'data2-4',  name3: 'data3-4'},
      { list: ['2','list1','list2','list3'],   name1: 'data1-5',  name2: 'data2-5',  name3: 'data3-5'}
    ]
  };

//]]>

</script>
<div rcf:id="model1" rcf:type="Model" rcf:object="modelData"></div>
<div rcf:type="DataGrid" rcf:data="{model1.data}">
    <div rcf:type="ViewColumnSelect" rcf:name="list1" rcf:propertyName="list" rcf:label="選択"></div>
    <div rcf:type="ViewColumnGrid" rcf:name="name1" rcf:propertyName="name1" rcf:label="ラベル1"></div>
    <div rcf:type="ViewColumnGrid" rcf:name="name2" rcf:propertyName="name2" rcf:label="ラベル2"></div>
    <div rcf:type="ViewColumnGrid" rcf:name="name3" rcf:propertyName="name3" rcf:label="ラベル3"></div>
</div>

上記プロパティの設定により表示されるDataGridプルダウンのイメージを、以下に示します。

■スタイルプロパティ

ViewColumnGridのスタイルプロパティと同様です。“ViewColumnGrid”の“スタイルプロパティ”を参照してください。

■イベントリスナ

固有のイベントリスナはありません。部品共通のイベントリスナは、“画面部品共通イベントリスナ”を参照してください。

■JavaScript API

固有のJavaScript APIはありません。部品共通のJavaScript APIは、“画面部品共通JavaScript API”を参照してください。