DataGrid控件介绍

1. 引言

Rich UI中的DataGrid组件可以在表中显示一组行数据。本文将详细介绍DataGrid组件相关信息。

如果想要较好的理解DataGrid，你需要熟悉以下内容：

• 如何定义表头
• 如何定义behavior，它是DataGrid组件中包含一系列behavior函数的属性。当组件被渲染时，属性中的behavior函数将被调用。
• 如何定义listener，它是DataGrid组件中包含一系列listener函数的属性。这些函数可以响应用户操做。例如，当用户选择或者取消勾选框时对应的listener函数将被调用。
• 如何对列的排序进行定制。
• 如何对DataGridColumn格式进行定制。
• 其他关于DataGrid的技巧，例如分页，使用Data Loader，等等。

Behaviors和listeners可以改变style属性并可以调用多种处理逻辑；例如改变某列的排序方法；调用服务；计算结果并在某列中显示；调整某些其他组件并将其内嵌至某一列中。你可以根据以上逻辑来实现你的想法；比如你可以做如下操作；

1. 在某一行中获取user ID。
2. 通过这个user ID来调用REST服务，从而将图片返回至回调函数中。
3. 将这个返回的图片嵌入至handler中定义的全局图片组件。
4. 将此图片放置在user ID的同一行中。

你可以使用许多有用的DataGrid属性，方法和扩展来完成你想实现的功能。我想现在你已经跃跃欲试，迫不及待的想开始DataGrid之旅了吧。那么我们就从创建一个RUI DataGrid组件开始吧。

2. 创建一个简单的DataGrid组件

本章是一个一步一步的指导教程。通过这个教程，你可以尝试在EDT中创建一个包含DataGrid组件的RuiHandler。

2.1. 右击EGL project/package >> New >> Handler. New EGL Handler向导会弹出。

填写名字一栏并选择Rich UI Handler作为模板，然后点击Finish。Handler会被自动创建至目标package里。

2.2. 当Handler创建好，它会自动的在EGL Rich UI编辑器中被打开。或者你可以通过双击文件或者右击>> Open With >> EGL Rich UI Editor来打开。

切换至design视图，你可以在右侧看到Palette面板。你可以在“Display and Input”一栏中找到DataGrid组件。你可以将其从Palette中拖拽至design区域中。

当拖拽结束时，“New Variable”向导会自动弹出。

输入DataGrid变量名并点击OK。DataGrid将出现在design面板中，并且源码同时被更新。

2.3. 定义一个Record类型作为作为Record数组的基础结构。 每一个Record包含了一行中所需要展示的数据。你可以为Record另外创建一个新的EGL源文件或者可以直接将Record定义添加到RUI Handler的最下方。

Record Stock 
   Symbol string;
   NumShares int;
   Quote  decimal(5,2);
   SelectQuote boolean;
end

2.4. 如下例所示，声明Record的数组类型

stockList Stock[] =[new Stock{SelectQuote = false, Symbol = "Company1", Quote = 100.00, NumShares = 40},
                      new Stock{SelectQuote = false, Symbol = "Company2", Quote = 200.00, NumShares = 10}
                		];

2.5. 将DataGrid声明更改至适合之前创建的Record模式。

DataGrid DataGrid{layoutData = new GridLayoutData{row = 1, column = 1}, behaviors =[], headerBehaviors =[], columns =[
                    new DataGridColumn{name = "Symbol", displayName = "Company Symbol"},
                    new DataGridColumn{name = "Quote", displayName = "Price Per Share"},
                    new DataGridColumn{name = "NumShares", displayName = "Number of Shares"},
                    new DataGridColumn{name = "Total", displayName = "Value of Shares", formatters =[totalFormatter
                            ]}]};

前三个DataGridColumn分别引用了Record的三个属性。第四个声明则定义了一个计算结果列，这一列没有引用Record的属性。所以，在Record中没有一个叫Total的属性。

DataGridColumn声明的顺序决定了每一列在DataGrid中的显示顺序。你可以为data属性赋值一个Stock类型的Record数组。以下是一段示例代码：

DataGrid.data = stockList as any[];

你可以直接将这行代码放到start函数中。数组中每一项都提供了DataGrid中的一行数据。

2.6. 添加formatter函数

你可以通过改变相应属性的值来添加behavior和listener函数。每一个属性都与一个代理函数类型相关，这个代理函数定义了可以被添加到属性里的函数定义，包括参数和返回类型。在这个例子中，第四列的DataGridColumn formatters被使用，它会调用了一个含有三个参数没有返回类型的函数。以下是这个函数：

function totalFormatter(class string inOut, value string inOut, rowData any in)
    // display the total value of the shares after calculating the value 
    // from the content of two other columns in the same row
        value = rowData.NumShares as int * rowData.Quote as decimal(5, 2);
end

当Grid被渲染时，表中的每行数据都会调用formatters属性中包含的函数。被调用函数的第三个参数包含了所有所需的数据，另外还可以通过第一个控制CSS class的参数改变单元的样式，或者通过第二个参数控制相应的值。

2.7. 切换至Preview

之前创建的DataGrid应该已经如图所示的在Preview模式中生成。

2. DataGridColumn属性

你可以为DataGrid数据Record中，每一个属性列设置相应的列属性。每一列都包含如下属性。：

• alignment: 一个int常量来控制水平布局：

DataGridLib.ALIGN_LEFT(默认)

列内容靠左对齐

DataGridLib.ALIGN_RIGHT

列内容靠右对齐

DataGridLib.ALIGN_CENTER

列内容居中

• columnComparator: 当对该列进行排序时使用这个函数来进行比较。

下面是比较函数的代理函数定义格式：

Delegate ColumnComparator(data1 any in, data2 any in) returns (int) end

data1

第一个对比单元的值

data2

第二个对比单元的值

函数返回如下int类型值：

o-1 当data1小于data2

o1 当data1大于data2

o0 当data1等于data2

下面是一个示例函数：

Function CompareTwo(myFirst ANY in, mySecond ANY in) returns (int)
   if ( (myFirst as string )[8:8] == "6")
      return(-1);
   else
      return(1);  
   end
end

• displayName: 所显示的列名。如果此属性未设置的话，将会默认显示该列的name属性。
• enableSorting: 一个布尔类型来指明该列是否支持排序。默认为真，即可以排序。
• formatters: Grid渲染前会调用此函数来改变每个单元的格式。每个单元格都会调用一次。

以下是相应代理函数的定义格式：

Delegate CellFormatter(class String inout, value String inout, rowData any in) end

class

列中单元格所使用的CSS class文件The CSS class

value

单元格的值，总是STRING类型。如果单元格内为选择框，则值为true或者false。

rowData

单元格所在行的数据。

• headerAlignment: 一个int值来设置列名的对齐方式。

DataGridLib.ALIGN_LEFT(默认) 向左对齐

DataGridLib.ALIGN_RIGHT向右对齐

DataGridLib.ALIGN_CENTER居中对齐

• ignoreCase: 通过一个布尔类型来指定在排序过程中大小写是否被忽略。默认是否，即考虑大小写。此属性仅当用户未设置columnComparator 属性时生效。
• name: 指定列所对应record中的field名称。同时也是默认的列标题名。
• sortDirection: 一个常量来指定用户下一次排序所执行的排序顺序：

DataGridLib.SORT_UP(初始默认值)

升序

DataGridLib.SORT_DOWN

降序

DataGridLib.SORT_NONE

不排序

你可能需要在排序对比函数中使用到这个属性。

• width: 用来制定列的宽度属性，以像素值来设置。

3. DataGrid 属性

以下是在DataGrid控件中支持的属性：

• behaviors: 一个方法数组的引用。当DataGrid渲染时会顺序的调用所有引用的函数。这个属性不适用于列标题单元。

这段代码是behaviors代理函数的定义，每个方法必须符合如下格式：

Delegate 
   DataCellBehavior(grid DataGrid in, cell Widget in, rowData ANY in, 
                rowNumber INT in, column DataGridColumn in)
end

grid

DataGrid控件.

cell

单元格展示所使用的控件。这个控件必须是基于HTML DIV标签的。

rowData

包含行数据的record

rowNumber

行号，从1到DataGrid的最大行数。

column

包含列定义信息的DataGridColumn控件

• checkBoxListeners: 一系列listener方法的引用。当用户选择或者取消checkbox的时候会触发所包含的listener方法。

以下是相应的代理函数的定义：

Delegate 
   CheckBoxListener(grid DataGrid in) end
end

以下是本文之前例子中的checkBoxListener例子，响应用户的选择操作：

function myListener(grid DataGrid in)
   columnRetrieve Stock[];
   columnRetrieve = grid.getChecked() as Stock[];
   numberOfRows int = columnRetrieve.getSize();

   if (numberOfRows > 0)
      for (i int from 1 to numberOfRows)
         sysLib.writeStdOut(columnRetrieve[i].Symbol + " is checked.");
       end
   end
end

• checkBoxWidth: 用来改变系统提供选择框的宽度，以像素为单位。默认值为20。
• columns: 一系列DataGridColumn定义。
• data: DataGrid所展示的数据，ANY[]类型。
• editorBehaviors: 一系列Behavior方法。当DataGrid渲染时会被顺序调用。目的是将widget放置到单元格中。

以下是相应的代理函数定义：

Delegate 
   EditorBehavior(grid dataGrid in, cell Widget in, rowData any in, 
                  rowNumber INT in, column DataGridColumn in, value ANY in) 
                  returns (Widget)
end

• headerBehaviors: 一系列列标题行为方法的集合。当DataGrid控件绘制时列标题单元格会调用这些方法。这些方法都会基于与behavior属性相同的代理函数定义。
• pageSize: 一个整型变量来指定每一页中显示的行数。默认值是10。在showButtonBar和showScrollBar属性中有更详细的介绍。
• rowHeight: 一个整型变量来指定每一行的最小高度，以像素为单位。
• selectionListeners: 一系列Listener函数。这些函数会相应在用户有选择操作时被调用，同事当setSelection，selectAll和deSelectAll函数被调用时也会触发这些listener函数。

以下是listener函数必须符合的代理函数格式。

Delegate 
   SelectionListener(grid DataGrid in) end
end

以下是与本文第一个例子中相同的listener函数示例。当用户做选择操作时会显示symbols属性。

function myListener(grid DataGrid in)
   columnRetrieve Stock[];
   columnRetrieve = grid.getSelection() as Stock[];
   numberOfRows int = columnRetrieve.getSize();

   if (numberOfRows > 0)
      for (i int from 1 to numberOfRows)
         sysLib.writeStdOut(columnRetrieve[i].Symbol + " is selected.");
       end
   end
end

如果需要更详细的了解选择操作的代码写法，可以查看本文之后的selectAll和setSelection方法的介绍。

• sortListeners: 一系列排序listener方法。仅当用户对列进行排序操作时，这些方法会被调用。仅当enableSort属性值为真时排序listener方法才会被调用。

以下是函数需要符合的代理格式：

Delegate 
   SortListener(grid DataGrid in, sortColumn DataGridColumn in) end
end

grid 被排序的DataGrid控件

sortColumn 被排序的列

以下是示例：

function mySortListener(grid DataGrid in, sortColumn DataGridColumn in)
   syslib.writeStdOut("You sorted the " + sortColumn.displayName + " column. ");
end

• startRow: 一个整型变量来指定第一页所显示的行。默认值为第一行。更多的详细介绍可以查看showButtonBar。
• selectionMode: 一个常量来指定用户是否能选择多行。同样也可以指定setSelection和selectAll是否能选择多行：

DataGridLib.MULTIPLE_SELECTION(默认选项)

可以同时支持单选或者多选

• 按住CTRL键来选择多行
• 按住SHIFT键来选择之间所涵盖的所有行

可以支持跨页的选择。

DataGridLib.SINGLE_SELECTION

单选模式

DataGridLib.DISABLE_SELECTION

禁止选择模式

• showButtonBar:一个布尔型属性来表明是否显示ButtonBar，用来换页的按钮集。当此属性为真时，以下属性也会被激活：
  • pageSize 每一页中显示的行数
  • startRow 指明哪一行是首先需要展示的。例如，一共有20行，pageSize为4并且startRow为6，那么DataGrid会首先显示第二页的第二行。

showButtonBar只能在以下情况被激活：

• 当每页中的显示行数小于总行数时；并且
• showScrollBar属性为否。
• showCheckBoxes: 一个布尔型属性来表明是否显示系统提供的选择框。默认值为否。系统支持的选择框会在每行的最左侧显示。
• showHeader:一个布尔型值来指明是否显示表格的标题单元格。默认值为真。
• showScrollBar: 一个布尔型值来指明是否显示滚动条。当此值为真时showButtonBar将失效。

4. 在Properties视图中修改DataGrid属性

在之前的章节中，我们介绍了如何生成一个简单的包含DataGrid控件的RuiHandler。在上一节中我们还详细介绍了DataGrid的所有属性。同时，EDT还支持通过界面来修改大部分重要属性。你可以在Properties视图中便捷的改变他们，同时代码也会随之自动改变。以下是Properties视图的一个截图。

在Properties视图中分为7个子标签。General, Border,Spacing, Position, Appearance, Accessbility, Layout and Events。由于大多数控件都有很多通用的属性，所以大多数DataGrid可视化改变的属性被列在General标签栏中。以下为这些属性pageSize,startRow, checkBoxWidth, rowHeight, cellBorder, cellPadding, selectionMode,showHeader, showButtonBar, enableSorting, showScrollbar and showCheckBoxes。我们已经在上一节中介绍过他们。

5. DataGrid支持的方法

以下是DataGrid支持的方法：

• cancelDataLoader:主要用在exception处理函数中，用来表明DataGrid所需要的数据已经不可用。它不会结束data Loader接下来的执行，但是会终止等待data Loader完成的操作并且重新以之前的数据来重绘DataGrid控件。
• checkAll: 你可以通过这个函数来全选系统支持的选择框。甚至可以在选择框被隐藏的时候选中它们。
• deSelectAll:取消所有现在处在选中状态的行。这个方法是航选择机制的一部分，与系统提供选择框独立。
• getChecked: 获取已选中行的数据，以下是函数定义。

function getChecked() returns (any[])

下面是一段示例代码，他先是选中行的Symbol属性：

function myResponse (e event in)
   columnRetrieve Stock[];
   columnRetrieve = grid.getChecked() as Stock[];
   numberOfRows int = columnRetrieve.getSize();

   if (numberOfRows > 0)
      for (i int from 1 to numberOfRows)
         sysLib.writeStdOut(columnRetrieve[i].Symbol + " is checked.");
      end
   end
end

需要注意的是getChecked方法获取的数据顺序取决于当前所显示的顺序。所以排序与否会影响获取的顺序。

• getCurrentPageIndex: 获取当前页数：

function getCurrentPageIndex() returns (int)

• getPageCount: 获取可用的页数

function getPageCount() returns (int)

• getSelection: 获取已选择行的数据：

function getSelection() returns (any[])

以下是本文开始示例代码中的一段，会显示已选择行的数据并打出Symbol属性的值。

function myResponse (e event in)
   columnRetrieve Stock[];
   columnRetrieve = grid.getSelection() as Stock[];
   numberOfRows int = columnRetrieve.getSize();

   if (numberOfRows > 0)
      for (i int from 1 to numberOfRows)
         sysLib.writeStdOut(columnRetrieve[i].Symbol + " is selected.");
      end
      grid.deSelectAll();
   else
      sysLib.writeStdOut("Select one or more rows.");                    
   end 
end

与getCheck方法相同，getSelection所获取数据的顺序同样与当前数据显示的顺序相关。

goToPage: 切换至所选的页面。如果输入为小于或等于1的值，则返回第一页。如果大于页面总数则跳转至最后一页：

function goToPage(pageNumber int in)

• selectAll: 选择DataGrid所有行。

setChecked: 选择某一个或者多个系统提供选择框支持的行。你甚至可以在选择框隐藏的时候选择：

function setChecked(selection any[] in)

一下是一个示例函数，展示了两种函数使用方式：

function start()

	  grid.setChecked([grid.data[2], grid.data[3]]);

   // alternative coding
   myAny ANY[] = [grid.data[2], grid.data[3]];
   grid.setChecked(myAny);
end

• setSelection: 用来设置选择某一行或者多行。大多数情况下，这个函数时用来在DataGrid绘制时自动选择某些行。以下是函数的定义：

function setSelection(selection any[] in)

当调用setSelection函数时，需要从数据中选择需要选中的元素。下面这个示例代码中展示了两种设置方式：

function start()

	  grid.setSelection([grid.data[3], grid.data[2]]);

   // alternative coding
   myAny ANY[] = [grid.data[3], grid.data[2]];
   grid.setSelection(myAny);
end

设置选中行取决于DataGrid的selectionMode属性。例如，如果只能选择单行，则setSelection函数中选中的项目中只有第一个会被选中。

• unCheckAll: 取消所有系统提供选择框中选择的项目。

6. DataGrid Selection

DataGrid控件有两种方式来表明某一行数据被关注：

• 一种是选择某行，反选某行，或者获取当前选择的行。
• 第二种机制是系统提供选择框的选择机制，支持选择，反选或者获取选中的项目。

两种机制相互独立。首先，我们来看一下选择机制：

• 四个函数可以被使用： setSelection, selectAll, deSelectAll, and getSelection。
• selectionMode属性来控制DataGrid中的行是否可以被选中，如果可以，是否支持多选。
• 当可以被选择时，listener方法用来对用户的选择操作进行响应，或者对setSelection, selectAll, or deSelectAll方法进行响应。
• selectionListeners属性来记录所有listener方法。

其次，我们来看一下选择框机制：

• 四种方法可以被调用：setChecked, checkAll, unCheckAll, and getChecked.
• 用户可以用代码来选择，清除或者对选择的行进行操作。这取决于showCheckBoxes属性是否被选中。
• Listener方法可以用来响应用户的操作或者响应setChecked, checkAll, or unCheckAll等方法。
• checkBoxListeners属性用来记录这些Listener方法。

7. DataGrid分页机制

在之前的章节中，我们已经介绍了DataGrid的所有属性。其中有三个属性影响DataGrid分页功能， pageSize,showButtonBar 和showScrollBar。你可以通过这三个属性来改变分页设置。本节中我们将通过一个简单的示例程序来展示分页机制。其中通过gotoPage 方法来在不同页面间切换，并且添加了一个pageChangeListener。

package test;

// RUI Handler

import com.ibm.egl.rui.widgets.DataGrid;
import data.GridEmployee;
import com.ibm.egl.rui.widgets.Button;

//
//
handler PageDemo type RUIhandler {initialUI = [ grid, FirstPage, Button, Button1, LastPage ],onConstructionFunction = start, title="PageDemo"}
	
	grid DataGrid {
		id = "pageDemo", 
		pageSize = 5,
		margin = 20,
		showButtonBar = false,
		pageChangeListeners = [myPageChangeListener,myPageChangeListener1]		
	};
	FirstPage Button{ text = "FirstPage", onClick ::= FirstPage_onClick };
	Button Button{ text = "Previous Page", onClick ::= Button_onClick };
	Button1 Button{ text = "Next Page", onClick ::= Button1_onClick };
	LastPage Button{ text = "Last Page", onClick ::= LastPage_onClick };
	
	function start()
		data GridEmployee[0];
		names String[] = [ "Jane", "Joe", "Mary", "Fred" ];
		for (n int from 1 to 92)
			data += new GridEmployee { 
				id = n, age = 20 + n % 6,  name = names[1+n%4],home = n%2 == 1
			};
		end
		data[2].name="";
		data[4].name="";
		grid.data = data as any[]; 
	end
	
	function FirstPage_onClick(event Event in)
		grid.gotoPage(1);
	end	
	
	function Button_onClick(event Event in)
		grid.gotoPage(grid.getCurrentPageIndex() - 1);
	end
	
	function Button1_onClick(event Event in)
		grid.gotoPage(grid.getCurrentPageIndex() + 1);
	end
	
	function LastPage_onClick(event Event in)
		grid.gotoPage(grid.getPageCount());
	end
	
	function myPageChangeListener(grid DataGrid in, oldPageIndex int in, newPageIndex int in)
		syslib.writeStdout("Page Change from " + oldPageIndex + " to "+ newPageIndex);
	end
	
	function myPageChangeListener1(grid DataGrid in, oldPageIndex int in, newPageIndex int in)
		syslib.writeStdout("The second page change listener is invoked");
	end
end

8. Behavior示例

之前的章节中，我们已经介绍过一些behaviors，headerBehaviors和editorBehaviors属性的知识。他们通过规定代理函数的格式来使用户遵循一定方式来编写单元格或者表头单元的行为函数。下面这个例子中，不同的列会用不同的控件来显示，并且每列的onChange操作的相应listener函数都不尽相同。

package client;

// RUI Handler

import org.eclipse.edt.rui.widgets.Box;
import org.eclipse.edt.rui.widgets.CheckBox;
import org.eclipse.edt.rui.widgets.Combo;
import org.eclipse.edt.rui.widgets.DataGrid;
import org.eclipse.edt.rui.widgets.DataGridColumn;
import org.eclipse.edt.rui.widgets.HTML;
import org.eclipse.edt.rui.widgets.TextField;
import eglx.java.class;
import eglx.persistence.id;
import eglx.persistence.sql.Column;
import eglx.rbd.StrLib;
import eglx.ui.rui.Event;
import eglx.ui.rui.RUIHandler;
import eglx.ui.rui.Widget;

//
//
handler EditorBehaviorDemo type RUIhandler {initialUI = [ ui ],onConstructionFunction = start}
	
	grid DataGrid {
		editorBehaviors = [myFunction],
		id = "EditorBehaviorDemo", 
		columns = [
			new DataGridColumn { name = "id", displayName = "ID"},
			new DataGridColumn { name = "age", displayName = "Age"},
			new DataGridColumn { name = "name", displayName = "First Name"},
			new DataGridColumn { name = "home", displayName = "@Home"}
		],
		pageSize = 7,
		margin = 20
	};
	
	html HTML = new HTML{ text = "<h3>EditorBehaviorDemo shows how to set cell widget for DataGrid.</h3><br/>" + 
	"Enter row index and column index in the textfield, then click enable cell widget to toggle cell widget for the specified row/column <br/>" +
	"Click Get Cell Widget, the age column of row 2 should have red background.<br/>" +
	"The buttons should only affect 1 grid<br/>" + 
	"The \"FirstName\" value in the first grid should be stored after paging and sorting"};
	ui Box{ padding=8 ,columns=1, children=[ html, grid ]};
	TextField1 TextField{maxlength=2,marginRight=12, width=10};
	TextField2 TextField{maxlength=2,marginRight=12, width=10};
	TextField3 TextField{maxlength=2,marginRight=12, width=10};
	TextField4 TextField{maxlength=2,marginRight=12, width=10};
	isActivated boolean = true;
	
	function start()
		data GridEmployee[];
		names String[] = [ "Jane", "Joe", "Mary", "Fred" ];
		for (n int from 1 to 10)
			data.appendElement(new GridEmployee { 
				id = n, age = 20 + n % 6, name = names[1+n%3], home = n%2 == 1
			});
		end
		grid.data = data as any[];
	end
	
	function myFunction(grid DataGrid in, cell Widget in,rowData any in, rowIndex int in, column DataGridColumn in, value any in) returns (Widget) 
		case(column.name)
			when("name") 
				combo Combo { values = [ "Jane", "Joe", "Mary", "Fred" ], onChange ::= handleComboChange };
				selIndex int = 0;
				for (n int from 1 to combo.values.getSize() by 1)
					if (value as String == combo.values[n])
						selIndex = n;
						exit for;
					end
				end
		 		combo.selection = selIndex;
				return (combo);
			when("age")
				editor TextField { 
					backgroundColor = "transparent",
					borderWidth = 1,
					padding = 0,
					marginTop = -1,
					marginBottom = -1,
					text = value,
					fontSize = "1.0em",
					onChange ::= handleTextFieldChange,
//					onFocusLost ::= textFieldFocusLost, 
//					onKeyPress ::= textFieldKeyPress,
					class = "EditableGridEditor"		
				};
				return (editor);
			when("home")
				editor CheckBox {
					selected = (value as String == "true"),
					onChange ::= handleCheckBoxChange,
					class = "EditableGridCheckBox"		
				};
				return (editor);
			otherwise
				return (null);
		end
	end	
	
	function handleTextFieldChange(e Event in)
		text TextField = e.widget;
		cell Widget = text.parent;
		rowNumber int = cell.getAttribute("row");			
		columnNumber int = cell.getAttribute("column");
		columnName String = strlib.lowerCase(grid.columns[columnNumber].name);
		grid.data[rowNumber][columnName] = text.text;	
	end
	function handleCheckBoxChange(e Event in)
		check CheckBox = e.widget;
		cell Widget = check.parent;
		rowNumber int = cell.getAttribute("row");			
		columnNumber int = cell.getAttribute("column");
		columnName String = strlib.lowerCase(grid.columns[columnNumber].name);
		grid.data[rowNumber][columnName] = check.selected;	
	end
	function handleComboChange(e Event in)
		combo Combo = e.widget;
		cell Widget = combo.parent;
		rowNumber int = cell.getAttribute("row");			
		columnNumber int = cell.getAttribute("column");
		columnName String = strlib.lowerCase(grid.columns[columnNumber].name);
		grid.data[rowNumber][columnName] = combo.values[combo.selection];	
	end
end

9. DataGrid Tooltips

如果你需要为DataGrid添加tooltip，你可以通过如下两种方式：

• 如果你需要不论鼠标停留在DataGrid的哪里，都显示同样的tooltip的话。你可以通过声明一个全局的tooltip控件，并且在某些方法中激活它。例如在on-construction函数中或者behaviors，headerBehaviors属性函数中。
• 如果你想在不同单元格，行或者列显示不同的tooltips的话，你可以使用DataGrid tooltip，它和tooltip控件类似但是却总是需要指定Grid-tooltip提供函数。这个函数将会返回一个box控件，其中包括需要显示的tooltip信息。

以下是创建DataGrid tooltip的过程：

• 声明一个DataGridTooltip，其中包含一个Grid-tooltip提供函数和一个延时属性来表明当鼠标悬停多久以后会触发Tooltip：

gridTooltip DataGridTooltip { provider = tooltipText, tooltip.delay = 1000 };

你需要import相应的控件：

import egl.rui.widgets.DataGridToolTip;

• 当为behaviors属性赋值一个数组时需要调用Grid-tooltip的一个函数。本例中，这个函数是gridTooltip.setToolTips。
• 创建一个与DataGridToolTip的provider属性相同的函数。这个函数需要遵循如下代理函数定义：

Delegate DataGridTooltipTextProvider(rowData any in, fieldName String in,  td Widget in) returns(Box)  
end

row

提供到函数中的行信息。你可以通过输入值来访问特定的值。考虑如下数据定义：

stocks Stock[] = [
		 new Stock{Symbol = "Company1", Quote = 100, NumShares = 40, SelectQuote = false}, 
		 new Stock{Symbol = "Company2", Quote = 200, NumShares = 10, SelectQuote = false}
	]; 

在provider函数中，你可以判断哪一行是鼠标停留的地方：

if (rowData.Quote as int == 200)
   // place content in a box (the tooltip) and return the tooltip
end

fieldname 为函数提供的列数据

td一个内部空间来展示Grid单元格。

• 你不需要开启DataGrid tooltip；他会在声明时自动被开启。