Introducing Grid

Grid is the component that expresses data in the form of a grid-shaped table and is used to list data in an orderly manner. You can simply show the data or process the operation internally, and you can change the shape and show it in the desired format.

Grid consists of 3 band areas, which are the head, body, and summary, and each band consists of a basic unit called the cell.

• head band: It is located at the top of Grid and is mainly used for displaying column names.

• body band: It is the area where the bound data is displayed.

• summary band: It is located at the bottom of Grid and is used to display calculation results such as sum, average, maximum value, minimum value, etc.

Cell is one of the objects that configure Grid and has separate properties from Grid. It can be used by binding the Dataset column, or by setting the displaytype, edittype properties of the cell, it can be expressed in the form of components such as Button, Combo, CheckBox, Image, ProgressBar, Edit, etc., or it can be expressed in the form of a tree.

Grid only provides a format for visually expressing data, and Grid itself does not have data. Therefore, in order to express data as Grid, the binding operation that connects Grid providing the format and Dataset with data information is essential.

Dataset is a set of data configured with invisible objects. Since Dataset has only data, it has no meaning by itself and must be used with the UI components such as Grid.

Please refer to Dataset for more information on Dataset and binding.

Example

The following is an example using Grid. With Grid, you can deliver complex and extensive data information to the user at a glance.

Creating Grid

Select Grid from the toolbar, and drag it to an appropriate size on Form to create it.

Run QuickView (Ctrl + F6) to check the result.

Since there is no data to display in Grid, nothing is displayed. To check the shape of Grid, create the border by setting the border property.

Binding Dataset to Grid

Grid is the component that logically has the same shape as Dataset. Therefore, Grid is completely mapped with Dataset. The binding in which Dataset and component are mapped one-to-one in this way is called full binding. Among various components, only Grid is fully bound to Dataset.

When Dataset is bound to Grid, the action of Grid affects Dataset. For example, if you move the focus of the row or cell in the bound Grid, then the rowposition of Dataset will also change.

Example

The following is an example of binding Dataset with Name, Address, Company, Department, Salary information to the Grid component.

sample_grid_02.xfdl

Core features used in the example

binddataset

This is the property that sets the ID of the DataSet to be bound to Grid.

How to implement an example

Select Grid from the toolbar and place it by dragging it to an appropriate size on Form.

Create Dataset with data information to be displayed on Grid.

1. Select Dataset from the toolbar and click on an appropriate place on Form to create Dataset.

2. Enter data into the created Dataset. If you double-click Dataset00 in the Invisible Objects area, the Dataset editor appears. Enter the following in Columns and Rows.

Bind Dataset to the Grid component.

Binding is completed by dragging and dropping Dataset00 in the Invisible Objects area to the Grid component created on Form.

Check with QuickView (Ctrl + F6) if Dataset is successfully bound to Grid.

In the example, the Grid property is set so that the data list expressed in Grid is not cut off. It may look different from the user result.

Filtering Records with Conditions

If you want to see only the desired record among multiple record outputs from Grid, then use the filter method. If you write the desired Conditional Expression and call it with the filter method, then you can display only the records that meet the conditions in the Grid.

If you change the filtering condition and call it again after executing the filter method, then the previously applied filtering condition is ignored and the new filtering condition is applied.

The filtering function can also be implemented using the filterstr property. The filterstr property functions the same as the filter method.

Example

The following is an example of filtering the data desired to be output from Grid with Conditional Expression.

The user enters Conditional Expression and clicks the Filter button to check the filtered results in Grid. Clicking the Cancel button removes the filtering and returns to the original data.

sample_grid_03.xfdl

Conditional Expression is written in the form of [Column Name][Symbol][Value]. For example,

Name == "James" filters records named James.
Salary < 20000 filters records with salaries less than 20,000.

Also, you can create multiple conditions in combination as needed.

Department == "Sales" || Department == "Consulting" filters records for which the department is Sales or Consulting.
Company=="hangul" && Salary < 10000 filters records where the company is hangul and the salary is less than 10000.

Core features used in the example

filter

This is the method that filters to show only records satisfying conditions in Dataset.

this.Dataset00.filter();
this.Dataset00.filter("");
this.Dataset00.filter("dept_cd == 'A1'");
this.Dataset00.filter("amount > 1000 && model_cd = 'A-1'");
this.Dataset00.filter("amount > 1000 || amount < 50 ");

How to implement an example

Place the Grid , Static , Edit , Button components from the toolbar appropriately as shown in the example figure. Select the component, place it on the form, and click it as-is to create it in the default size.

Create Dataset with the data item list to be displayed on Grid.

1. Select Dataset from the toolbar and click on an appropriate place on Form to create Dataset.

2. Enter the data item list in the created Dataset. If you double-click Dataset00 in the Invisible Objects area, then the Dataset editor appears. Enter columns and rows as shown in the figure below.

Bind Dataset to the Grid component.

Binding is completed by dragging and dropping Dataset00 in the Invisible Objects area to the Grid component created on Form.

Set the basic conditional expression in the value property of the Edit component as shown below. The conditional expression refers to records in which the Company column is "1dollar" and the Salary column is "2000" or higher. It does not matter if it is arbitrarily changed as the conditional expression for sample operation.

Company == "1dollar" && Salary > 2000

• onclick Event Function of filter Button

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var strCondExpr = this.Edit00.value;
	
	this.Dataset00.filter(strCondExpr);		
};

• onclick Event Function of cancel Button

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.filter("");	
};

Check with QuickView (Ctrl + F6) if Dataset is successfully bound to Grid.

Enter the conditional expression in Conditional Expression and click the filter button to check if only records that meet the condition are filtered. When you click the cancel button, conditional filtering is canceled and it returns to its original state.

In the example, the Grid property is set so that the data list expressed in Grid is not cut off. It may look different from the user result.

Searching for Specific Records with Conditions

In Grid, you can use the findRow, findRowExpr methods to specify the range to be searched, and search for records that meet the conditions within the range.

Example

The following is an example of searching for desired data using the findRow, findRowExpr methods in Grid. The findRow and findRowExpr methods return the index of the searched record. In the example, the focus is moved to the index so that the user can recognize it immediately.

• findRow Function

The user selects the column in 1, writes the condition value in 2, and clicks the 3findRow button. The focus moves to the row that meets the condition.

• findRowExpr Function

The user writes Conditional Expression in 4 and clicks the 5findRowExpr button. The focus moves to the record that meets the Conditional Expression.

sample_grid_04.xfdl

Core features used in the example

findRow

This is the method that returns the index of the first row that has data matching the input value in the column specified in DataSet.

var nRow;
nRow = this.Dataset00.findRow( "column00", "100");
nRow = this.Dataset00.findRow( "column00", "100", 10);
nRow = this.Dataset00.findRow( "column00", "100", 10, 10000);

findRowExpr

This is the method that returns the index of the first row that satisfies the given Conditional Expression among the values of a specific column.

var nRow;
nRow = this.Dataset00.findRowExpr("dept_cd == 'A2'");
nRow = this.Dataset00.findRowExpr("dept_cd == 'A2'", 2);
nRow = this.Dataset00.findRowExpr("dept_cd == 'A2'", 2, 10);
nRow = this.Dataset00.findRowExpr("dept_cd == 'A2' && pos_cd > '03'", 2, 10);

How to implement an example

Place the Grid , Combo , Edit , Button components from the toolbar appropriately as shown in the example figure. Select the component, place it on the form, and click it as-is to create it in the default size.

Change the ID of the created components as follows.

Create Dataset with the data item list to be displayed on Grid.

1. Select Dataset from the toolbar and click on an appropriate place on Form to create Dataset.

2. Enter the data item list in the created Dataset. If you double-click Dataset00 in the Invisible Objects area, then the Dataset Editor appears. Enter columns and rows as shown in the figure below.

Bind Dataset to the Grid component.

Binding is completed by dragging and dropping Dataset00 in the Invisible Objects area to the Grid component created on Form.

• Creating Combo Menu

Select Combo and click the [...] button next to the innerdataset property in the Properties window. Enter the following in the InnerDataset editor and click the [OK] button to complete the binding.

• onclick Event Function of findRow Button

this.btn_findRow_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var strCategory = this.combo_category.text;
	var strKeyword = this.edit_keyword.value;
	
	var nRow = this.Dataset00.findRow(strCategory, strKeyword);
	
	this.Grid00.selectRow(nRow, true);
	
	if(nRow == -1)
		alert("\"" + strKeyword + "\" not found.");	
};

Set the conditional expression in the value property of the Edit component as follows. The conditional expression refers to records in which the Company column is '1dollar' and the Salary column is '3000' or less, and the user can arbitrarily change it.

Company == '1dollar' && Salary < 3000

• onclick Event Function of findRowExpr Button

this.btn_findRowExpr_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var strKeyword = this.edit_condexpr.value;
	
	var nRow = this.Dataset00.findRowExpr(strKeyword);
	
	this.Grid00.selectRow(nRow, true);
	
	if(nRow == -1)
		alert("\"" + strKeyword + "\" not found.");		
};

Check with QuickView (Ctrl + F6) if Dataset is successfully bound to Grid.

Click the findRow button to find the record that meets the condition and see if the focus moves. Select the column in Combo and enter the search condition to check the findRow function.

Click the findRowExpr button to find the record that meets the condition and see if the focus moves. Change the conditional expression to check the findRowExpr function.

In the example, the Grid property is set so that the data list expressed in Grid is not cut off. It may look different from the user result.

Adding/Deleting Records

In Grid, you can add or delete records using the addRow, deleteRow methods.

Example

Press the addRow button to add a new row, or press the deleteRow button to delete a row.

addRow adds a new row after the last row. deleteRow deletes the currently selected row.

sample_grid_05.xfdl

Core features used in the example

addRow

This is the method that adds a new row after the last row of Dataset.

deleteRow

This is the method that deletes the row specified in Dataset.

How to implement an example

Place the Grid , Button components from the toolbar appropriately as shown in the example figure. Select the component, place it on the form, and click it as-is to create it in the default size.

Create Dataset with the data item list to be displayed on Grid.

1. Select Dataset from the toolbar and click on an appropriate place on Form to create Dataset.

2. Enter the data item list in the created Dataset. If you double-click Dataset00 in the Invisible Objects area, then the Dataset editor appears. Enter columns and rows as shown in the figure below.

Bind Dataset to the Grid component.

Binding is completed by dragging and dropping Dataset00 in the Invisible Objects area to the Grid component created on Form.

• onclick Event Function of addRow Button

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.addRow();
};

• onclick Event Function of deleteRow Button

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.deleteRow(this.Dataset00.rowposition);
};

Run QuickView (Ctrl + F6) to check the result.

Click the addRow button to see if a new row is created at the bottom of Grid. Rows are created as much as the button is clicked.

Click the deleteRow button to see if the currently selected row is deleted.

Selecting Multiple Records

You can set how Grid selects data using the selecttype property of Grid.

There are row, multirow, cell, area, and multiarea to select data. row is used to select a single line, multirow is to select multiple lines, and cell is used to select a single cell. area is used to select multiple areas, and multiarea is used to select multiple areas.

Example

The following is an example that shows the operation of selecting data from Grid according to the setting of the Select type.

sample_grid_06.xfdl

After setting the desired selection type in the Select type combo, select the row or cell from Grid. When making multiple selections, click and drag the mouse, or click the mouse while holding down the Ctrl key and the Shift key on the keyboard.

Core features used in the example

selecttype

This is the property that sets how the user selects the row or cell in Grid.

posttext

This is the property that has the text value of the newly changed item.

How to implement an example

Place the Grid , Static , Combo components from the toolbar appropriately as shown in the example figure. Select the component, place it on the form, and click it as-is to create it in the default size.

Create Dataset with the data item list to be displayed on Grid.

1. Select Dataset from the toolbar and click on an appropriate place on Form to create Dataset.

2. Enter the data item list in the created Dataset. If you double-click Dataset00 in the Invisible Objects area, then the Dataset editor appears. Enter columns and rows as shown in the figure below.

Bind Dataset to the Grid component.

Binding is completed by dragging and dropping Dataset00 in the Invisible Objects area to the Grid component created on Form.

1. Creating Combo Menu

Select Combo and click the [...] button next to the innerdataset property in the Properties window. Enter the following in the InnerDataset editor and click the [OK] button to complete the binding.

2. Adding Event to Combo

Select Combo and add the onitemchanged event function as shown below.

this.combo_selecttype_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	var strSelectType = e.posttext;
	
	this.Grid00.set_selecttype(strSelectType);
	
};

Run QuickView (Ctrl + F6) to check the result.

• Select the row and check that one row is selected in Grid.

• Select the multirow and check that multiple rows are selected in Grid. Check that multiple rows are selected by dragging the mouse or using the Ctrl, Shift keys.

• Select the cell and check that one cell is selected in Grid.

• Select the area and check that the area is selected by dragging the mouse in Grid.

• Select the multiarea and check that the area is selected by dragging the mouse in Grid. Use the Ctrl, Shift keys to check if multiple areas are additionally selected.

Deleting Multiple Records

In Grid, you can use getSelectedDatasetRows method to get information of the currently selected record, and the deleteMultiRows method to delete multiple records at once.

Example

The following is an example of deleting all the selected records when the user selects the record in Grid and clicks the Delete button.

sample_grid_07.xfdl

Core features used in the example

selecttype

This is the property that sets how the user selects the row or cell in Grid.

getSelectedDatasetRows

This is the method that returns the row index of Dataset corresponding to the row selected in Grid as an array.

deleteMultiRows

This is the method that receives an array of row lists and deletes the row.

How to implement an example

Place the Grid , Button components from the toolbar appropriately as shown in the example figure. Select the component, place it on the form, and click it as-is to create it in the default size.

Create Dataset with the data item list to be displayed on Grid.

1. Select Dataset from the toolbar and click on an appropriate place on Form to create Dataset.

2. Enter the data item list in the created Dataset. If you double-click Dataset00 in the Invisible Objects area, the Dataset editor appears. Enter columns and rows as shown in the figure below.

Bind Dataset to the Grid component.

Binding is completed by dragging and dropping Dataset00 in the Invisible Objects area to the Grid component created on Form.

Set the selecttype property to 'multirow' so that Grid can be multi-selected.

Select Button and add the onclick event function as shown below.

• onclick Event Function of Delete Button

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var arrSelectedRow = this.Grid00.getSelectedDatasetRows();
	
	this.Dataset00.deleteMultiRows(arrSelectedRow);	
};

Run QuickView (Ctrl + F6) to check the result.

Select one or more rows in Grid and click the Delete button to confirm that the selected rows are deleted.

Adding Records of Other Datasets

Data from another Dataset can be added to the end of Dataset currently in use by using the appendData method of the Dataset object. You can also set how data is added depending on the setting of the argument.

Example

The following is an example of adding another 2Dataset to 1Dataset.

The function of the example is divided into two types, which are Append dataset and Append dataset with column name. 3Append dataset unconditionally adds data in order from the previous column regardless of the column name. 4Append dataset with column name adds data only to columns with the same column name.

• If you click the Append dataset button, then all the data in 2Dataset is added to 1Dataset. Data is added in order from the first Name column as shown in the red box 5. The reason the data in the Salary column is displayed as NaN is that the added data (Mail column) is a string, not a number.

• If you click the Append dataset with column name button, then only the data of the Name and Salary columns that match the column name of 1Dataset among the data of 2Dataset is added as shown in 5.

sample_grid_08.xfdl

Core features used in the example

appendData

This is the method that adds the data of the specified Dataset after the last Row of the current Dataset. It returns the number of rows of newly added data.

How to implement an example

Place the Grid , Button components from the toolbar appropriately as shown in the example figure. Select the component, place it on the form, and click it as-is to create it in the default size.

Create Dataset with the data item list to be displayed on Grid.

1. Select Dataset from the toolbar and click on an appropriate place on Form to create Dataset.

2. Enter the data item list in the created Dataset. If you double-click Dataset00 in the Invisible Objects area, the Dataset Editor appears. Enter Columns and Rows as shown in the figure below.

Dataset to be bound to 1Grid of the example

Dataset to be bound to 2Grid of the example

Bind Dataset to the Grid component.

Binding is completed by dragging and dropping 2 Datasets in the Invisible Objects area to the Grid component created on Form respectively.

• onclick Event Function of Append dataset Button

this.btn_appendData_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nRowCnt = this.Dataset00.appendData(this.Dataset01);
};

• onclick Event Function of Append dataset with column name Button

this.btn_appendDataCol_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nRowCnt = this.Dataset00.appendData(this.Dataset01, true);		
};

Run QuickView (Ctrl + F6) to check the result.

Click the Append dataset button to check if all data of 2Grid are added to 1Grid.

Click the Append dataset with column name button to check if only the same data as the column name of 1Grid is added among the data of 2Grid. In the example, the columns with the same name are Name and Salary. No other data is added.

Getting Number of Records

To get the number of rows displayed on Grid, use the getRowCount method of Dataset.

Example

If you click the [Get row count] button, then the total number of rows of the current Grid is obtained and displayed in the Edit component.

sample_grid_09.xfdl

Core features used in the example

getRowCount

This is the method that gets the total number of rows in Dataset.

How to implement an example

Place the Grid , Button components from the toolbar appropriately as shown in the example figure. Select the component, place it on the form, and click it as-is to create it in the default size.

Create Dataset with the data item list to be displayed on Grid.

1. Select Dataset from the toolbar and click on an appropriate place on Form to create Dataset.

2. Enter the data item list in the created Dataset. If you double-click Dataset00 in the Invisible Objects area, then the Dataset Editor appears. Enter Columns and Rows as shown in the figure below.

Bind Dataset to the Grid component.

Binding is completed by dragging and dropping Dataset00 in the Invisible Objects area to the Grid component created on Form.

• onclick Event Function of Get row count Button

this.btn_getRowCount_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var intRowCnt = this.Dataset00.getRowCount();
	this.Edit00.set_value(intRowCnt);
};

Run QuickView (Ctrl + F6) to check the result.

Click the Get row count button to compare the number of Rows obtained and the total number of Rows displayed in Grid to check if they match.

Checking for Changed Data

Transactions are essential, but they also degrade the performance of the system. Therefore, reducing the number of transactions to a minimum is important in system development.

You can use the getRowType method to check if the data has changed, thus avoiding unnecessary transactions. Also, you can check the status such as whether the current data has been added or deleted, so it can be used usefully during development.

Example

The following is an example of checking whether the data of Grid has changed with the getRowType method.

If you click the Get row type button after modifying Cell of Grid, then you can check which Row has been modified. However, if the data is modified and then returned to its original value, it is considered unmodified. To edit Cell, select Cell first and then click again.

sample_grid_10.xfdl

Core features used in the example

getRowType

This is the method that returns the status of the specified Row in Dataset.

getRowCount

This is the method that gets the total number of Rows in Dataset.

edittype

This is the property that sets the format of the edit window in Cell of Grid.

How to implement an example

Place the Grid , Button components from the toolbar appropriately as shown in the example figure. Select the component, place it on the form, and click it as-is to create it in the default size.

Create Dataset with the data item list to be displayed on Grid.

1. Select Dataset from the toolbar and click on an appropriate place on Form to create Dataset.

2. Enter the data item list in the created Dataset. If you double-click Dataset00 in the Invisible Objects area, then the Dataset Editor appears. Enter Columns and Rows as shown in the figure below.

Bind Dataset to the Grid component.

Binding is completed by dragging and dropping Dataset00 in the Invisible Objects area to the Grid component created on Form.

Set the selecttype property of Grid to "cell", double-click the Grid component to execute Grid Contents Editor, and set the edittype property of each Cell to "normal".

Select Button and add the onclick event function as shown below.

• onclick Event Function of Get row type Button

this.btn_getRowType_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var bChangedData = false;
	var nRowCnt = this.Dataset00.getRowCount();
	
	var strResult = "";
	
	for(var i=0; i<nRowCnt; i++)
	{

		switch( this.Dataset00.getRowType(i) )
		{
			case 0:
				strResult += "Row [" + i +"] is not exist.\n";
				break;
			case 1:
			case 16:
				strResult += "Row [" + i +"] is not changed.\n";
				break;
			case 2: 
			case 4:
			case 8:
				strResult += "Row [" + i +"] is changed.\n";
				bChangedData = true;
				break;
			default:
				strResult += "Row [" + i +"] Unknown status\n";				
		}

	}
	
	if(bChangedData == true)
		strResult += "\nGrid is changed.";
	else
		strResult += "\nGrid is not changed.";
		
	this.TextArea00.set_value(strResult);
	
};

Run QuickView (Ctrl + F6) to check the result.

Click the Get row type button to check whether there is any data changed in Grid in the pop-up window.

Reflecting/Resetting Changes to Dataset

When modifying data in Grid, a process to actually reflect the modified content in Dataset is required. This reduces the occurrence of unnecessary transactions and acts as a safeguard that can be recovered in case of incorrect data modification.

The applyChange method of Dataset applies the changes made in the grid to the dataset. The applyChange method returns the changed Grid status due to data modification to the ROWTYPE_NORMAL status to confirm the modified contents.

The reset method of Dataset returns the data of Grid to the last saved state. In other words, it returns to the state before the data was modified or to the state where applyChange was last performed.

Example

The following is an example showing the applyChange function that is reflected in Dataset after modifying the data of Grid and the Reset function that restores the data to the state before it was reflected in Dataset.

sample_grid_11.xfdl

If you click the Reset button after modifying the data of Grid, then it will be restored to the state before the modification.

If you click the applyChange button after modifying the data of Grid, the modification is reflected in Dataset. Once reflected in Dataset, it cannot be restored to the previous state even if the Reset button is clicked again.

Core features used in the example

applyChange

Changes all Row types of Dataset to ROWTYPE_NORMAL, and reflects the modified data as final in Dataset.

Reset

This is the method that restores the data of Dataset to the last saved state.

How to implement an example

Place the Grid , Button components from the toolbar appropriately as shown in the example figure. Select the component, place it on the form, and click it as-is to create it in the default size.

Create Dataset with the data item list to be displayed on Grid.

1. Select Dataset from the toolbar and click on an appropriate place on Form to create Dataset.

2. Enter the data item list in the created Dataset. If you double-click Dataset00 in the Invisible Objects area, the Dataset Editor appears. Enter Columns and Rows as shown in the figure below.

Bind Dataset to the Grid component.

Binding is completed by dragging and dropping Dataset00 in the Invisible Objects area to the Grid component created on Form.

• onclick Event Function of applyChange Button

this.btn_apply_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.applyChange();
};

• onclick Event Function of Reset Button

this.btn_reset_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.reset();
};

Run QuickView (Ctrl + F6) to check the result.

Modify the data of Grid and click the Reset button to check whether the data is restored to its initial state.

After modifying the data of Grid, click the applyChange button to apply it to Dataset. After modifying the data again, click the Reset button to check whether the state in which the applyChange button was clicked is restored.

Displaying with Tooltip for Long Text Length

When the size of the text data is larger than the width of each Cell of Grid, there is a problem that not all contents are displayed. This may be because the size of Grid and Cell was not sufficiently large due to the limitations on the screen, or the size of the text data was unexpected. In this case, you can display all of the text content that appears to be cut off using the tooltip.

Example

The following is an example of Grid that displays the part that is cut off from Cell using the tooltip as the size of the text data is large.

sample_grid_36.xfdl

Tooltip function has been applied only to Address, Department, and Salary columns where text size exceeds the cell area. If you place the mouse cursor over the column, then you can see that the text content displayed in the cell is also displayed in the tooltip.

Core features used in the example

tooltiptext

This is the property that sets the balloon help that is displayed when the mouse cursor hovers over the Cell area of Grid.

How to implement an example

Place the Grid component from the toolbar appropriately as shown in the example figure.

Create Dataset with the data item list to be displayed on Grid.

1. Select Dataset from the toolbar and click on an appropriate place on Form to create Dataset.

2. Enter the data item list in the created Dataset. If you double-click Dataset in the Invisible Objects area, then the Dataset Editor appears. Enter Columns and Rows as shown in the figure below.

Bind Dataset to the Grid component.

Binding is completed by dragging and dropping Dataset in the Invisible Objects area to the Grid component created on Form.

Open Grid Contents Editor, select Cell of the Address, Salary columns, and set the tooltiptext property. Bind Dataset to each column. Set the same as the value set in the text property so that the contents of Cell can be displayed in the tooltip.

The following shows an example of setting the tooltiptext property in Cell of the Address column. Similarly, set the Salary column the same.

Run QuickView (Ctrl + F6) to check the result.

Place the mouse cursor on the Address, Salary columns and check whether the text data of the corresponding Cell is displayed in the tooltip.

Using Smart Scroll Function

In the Grid component, a scrollbar is displayed when there are more rows of data to be displayed on the screen. In this case, data is searched by moving the scrollbar, but the data displayed on the screen must be continuously displayed while moving the scrollbar. Even from the browser standpoint, displaying data while moving the scrollbar can be a burden. Also from the user standpoint, it is difficult to find the desired data while moving the scrollbar.

The Smart Scroll function is a tip-like function that resolves this inconvenience to some extent. The Smart Scroll function can be applied by setting the fastvscrolltype property value in the Grid component.

Example

When the [Data Loading] button is clicked, 1,000,000 data created by the For iteration statement is added to the Dataset object. If you change the fastvscrolltype property value displayed on the Combo component, then you can see that the Smart Scroll function is applied when the scrollbar TrackBar bar is moved.

sample_grid_39.xfdl

Core features used in the example

fastvscrolltype

Specifies what data of a certain location to display when implementing the Smart Scroll function. Based on the Grid component, it can select from the first Row, middle Row, and the last Row of the displayed screen, and supports "topbottomdisplay", "topcenterbottomdisplay" property values that show more than one data. The "trackbarfollow" property to show data along the scrollbar TrackBar location can also be used.

How to implement an example

Place the Grid, Combo, Button components as shown in the example screen. Specify the innerdataset property value of the Combo component as follows. It is the property value supported by the fastvscrolltype property.

Add the Dataset object. Add 6 columns to only the Columns property value, not the Rows property value. It will be filled with the For iteration statement in the next step. Select the Dataset object and bind it to the Grid component by dragging and dropping it.

Write the event that loads data into Dataset when the Button component is clicked. This is the method of calling the setColumn method of the Dataset object in the For iteration statement. Before starting the For iteration statement, the enableevent property value is set to false. Otherwise, the event for the changed data is transmitted to the Grid component every time the setColumn method is called, which slows the processing of the For iteration statement.

When the For iteration statement is completed, modify the enableevent property value back to true. When the property value is changed, the onrowsetchanged event of the Dataset object occurs, and the data is reflected in the bound Grid component.

this.btnData_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var rIdx;
	this.dsTest.set_enableevent(false);
	for(var i=0;i<1000000;i++)	{
		rIdx = this.dsTest.addRow();
		this.dsTest.setColumn(rIdx, "Column0", i);
		this.dsTest.setColumn(rIdx, "Column1", i);
		this.dsTest.setColumn(rIdx, "Column2", i);
		this.dsTest.setColumn(rIdx, "Column3", i);
		this.dsTest.setColumn(rIdx, "Column4", i);
		this.dsTest.setColumn(rIdx, "Column5", i);
	}
	this.dsTest.set_enableevent(true);
};

Change the fastvscrolltype property value of the Grid component when selecting the item of the Combo component. When the property value is changed, the Smart Scroll function of the Grid component operates immediately.

this.cbType_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	this.gridData.set_fastvscrolltype(e.postvalue);
};

Run it with QuickView (Ctrl + F6), load the data, and check by changing the fastvscrolltype property value in the Combo component

Displaying Cell Boarder by Specifying Property

By setting the showselection property value to true, you can display the border of the selected cell.

Example

Display the borderline of the selected cell. When the cell is deselected, the borderline also disappears. Click the [selectArea] button adds the 0^th cell selection. Clicking the [clearSelect] button clears the cell selection state.

The example image below was chosen in the following methods.

1. Click on the first item (15,000) in the Salary column

2. Click on the third item (Donald) in the Name column while holding down the Ctrl key

3. Click on the fourth item (1dollar) in the Company column while holding down the Shift key

4. Click on the sixth item (Michael) in the Name column while holding down the Ctrl key

5. Click on the seventh item (Quality Assurance) in the Department column while holding down the Shift key

6. Click the [selectArea] button

sample_grid_83.xfdl

Core features used in the example

showselection

Shows the borderline of the selected cell area when the property value is set to true. The style property value for displaying the borderline must be set together.

clearSelect

Resets the cell selection state. The borderline of the selected cell also disappears.

How to implement an example

.Grid.sample_grid_83 .body .selection
{
	-nexa-border : 2px dotted hotpink;
}

If you are using the default theme by modifying it, then add the code in the following format.

.Grid .body .selection
{
	-nexa-border	: 2px solid #125dae;
}

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.selectArea(0,0,0,0);
};

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.clearSelect();
};

Adjusting Grid Component Height to Avoid Scrollbar

If the data is predetermined, then you can set the height of the Grid component to avoid the scrollbar from appearing. However, in the case of data value entering and changing in real-time, the number of Rows increases, or a lot of data is entered in one cell. This causes the data to be more than the height of the specified Grid component, resulting in the scrollbar appearing.

The getRealRowFullSize method can obtain the actual height value of the data area displayed on the Grid component and adjust the height value of the Grid component appropriately.

Example

Clicking the [getRealRowFullSize] button changes the height of the Grid component to fit 5 rows. If you input 2 or more lines of text in the TextArea component and click the [Set Text] button after selecting a specific cell, then the data is reflected in the selected cell and a scrollbar may appear in the Grid component. At this time, if you click the [getRealRowFullSize] button again, then the height of the Grid component is changed.

sample_grid_85.xfdl

Core features used in the example

getRealRowFullSize

Returns the sum of the Row height of the head, body, summary areas. If you set the parameter, then it returns the height of each area. Otherwise, it returns the height of the entire area.

autosizingtype, extendsizetype

If you set "col", "row", and "both" values as property values, then the size is automatically adjusted to fit the data. At this time, since the height of the entire Row is adjusted together, if you want to adjust only the height of the changed Row, then you must specify the extendsizetype property value.

How to implement an example

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nH = this.Grid00.getRealRowFullSize();
	//computed style (border-top + border-bottom = 3)
	this.Grid00.set_height(nH + 3);
};

3 that is added when specifying the height property value of the Grid component is the border property value. The border property value cannot be checked while the application is running. If you select the Grid component and select the [Computed Style] tab in the property window, then you can see the actual border property value to be applied. The border property value depends on the applied theme.

Since the selecttype property value is set to "cell", only one cell can be selected. The selectstartrow property value returns the value in an array even if only one cell is selected.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.setColumn(this.Grid00.selectstartrow[0], this.Grid00.selectstartcol[0], this.TextArea00.value);
};

Directly Specifying Grid Component Row Height

Let us take a look at how to directly specify the height of a row according to a specific row or condition.

Example

Row height and font style are applied differently according to the level of the Grid component displayed in tree form.

sample_grid_94.xfdl

Core features used in the example

setRealRowSize

Able to specify the height value of a specific Row. In the example, Row is specified with different values depending on the tree level.

extendsizetype

Should be specified as "row", which is the corresponding property value, as each Row size is adjusted. Otherwise, it may look different from the desired shape.

How to implement an example

displaytype: treeitemcontrol
edittype: tree
treelevel: bind:Column0

extendsizetype: row
treeinitstatus: expand,all
treeusecheckbox: false
treeuseline: true

this.Dataset00_onload = function(obj:nexacro.NormalDataset,e:nexacro.DSLoadEventInfo)
{
	var tempColValue;
	
	for(var i=0; i < this.Grid00.rowcount; i++)
	{
		tempColValue = this.Dataset00.getColumn(this.Grid00.getDatasetRow(i), "Column0");
		
		if(tempColValue==0) {
			this.Grid00.setRealRowSize(i,"60");
		}
		else if(tempColValue==1) {
			this.Grid00.setRealRowSize(i,"40");
		}
		else if(tempColValue==2) {
			this.Grid00.setRealRowSize(i,"25");
		}
	}
};

.Grid .body .row .cell.sample_grid_94_level_0 .celltreeitem .treeitemtext
{
	font : normal bold 20pt/normal "Arial";
	color : blue;
}

.Grid .body .row .cell.sample_grid_94_level_1 .celltreeitem .treeitemtext
{		
	font : normal bold 15pt/normal "Arial";
}

.Grid .body .row .cell.sample_grid_94_level_2  .celltreeitem .treeitemtext
{
	color : firebrick;		
	
}

Different style properties are applied according to the value of the Column0 column.

Column0==0?'sample_grid_94_level_0':Column0==1?'sample_grid_94_level_1':'sample_grid_94_level_2'

Displaying with Tooltip for Text Larger than Column Width

In Displaying with Tooltip for Long Text Length, all specific columns were displayed with the tooltip. Here, let us take a look at how to display them with the tooltip only when necessary, according to the actual text length.

Example

Display the tooltip only if the text length is greater than the actual width of the column. Display the column width and text width information in the TextArea component.

sample_grid_95.xfdl

Core features used in the example

getTextSize

Calculates how much area the text occupies according to the specified font settings. Returns the horizontal and vertical size information as the object, and you can check the value with the nx, ny properties. Since the font information is required, it cannot be used when referring to the style specified in the theme or the XCSS file.

getFormatColSize

Calculates the column size. Returns the value set in Grid Contents Editor. If you have set the column size to be dynamically resized, then use the getRealColSize method.

How to implement an example

font: bold 14px/normal "Arial"

this.Grid00_onmousemove = function(obj:nexacro.Grid,e:nexacro.GridMouseEventInfo)
{
	var nCellSize = obj.getFormatColSize(e.cell);
	var strText   = obj.getCellText(e.row, e.cell);
	var nTextLen  = nexacro.getTextSize( strText, obj.font );
	
	this.TextArea00.set_value("strText: "+strText+"\n");
	this.TextArea00.insertText("nCellSize: "+nCellSize+"\n");
	this.TextArea00.insertText("nTextLen: "+nTextLen.nx+"\n");

	if( nCellSize < nTextLen.nx){
		obj.setCellProperty( "Body", e.cell, "tooltiptext", strText);
	} else {
		obj.setCellProperty( "Body", e.cell, "tooltiptext", "");
	}	
};

Scrolling Line by Line

When there is a scrollbar due to a lot of data, there are several ways to move the scroll. You can move it with the movement of the mouse wheel, or you can move it by clicking the buttons on both sides of the scrollbar. Alternatively, you can move it by dragging it in any direction while holding the TrackBar on the scrollbar.

The Grid component can set the scroll type according to the desired purpose. In the example, let us take a look at how to scroll line by line.

Example

When clicking the button below the Grid component, moving it with the mouse wheel motion, or grabbing and dragging the TrackBar, the right Grid component moves one row at a time.

sample_grid_102.xfdl

Core features used in the example

wheelscrollrow

Sets the Row that moves when scrolling once when the mouse wheel is operated.

scrollpixel

Sets the scroll operation unit. The default value is "default" and operates as "none" on the desktop. If it is set to move by Row, then the property value is set to "all".

How to implement an example

Add about 15 Rows and set the first column value from 1 to 15.

When Button is clicked, the direction of movement is adjusted through the User Property value and operation.

this.Btn_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.scrollBy(0,this.Grid00.getRealRowSize(0)*obj.nVoffsetpos);
	this.Grid01.scrollBy(0,this.Grid01.getRealRowSize(0)*obj.nVoffsetpos);
};

Changing Row Position

Change the Row index of the bound Dataset object. In the example, check the Row index when the ondrag event of the Grid component occurs, and change the Row position in the ondrop event.

Example

When clicking the button below the Grid component, moving it with the mouse wheel motion, or grabbing and dragging the TrackBar, the right Grid component moves one row at a time.

sample_grid_106.xfdl

Core features used in the example

moveRow

Moves the specified Row to a specific location. The position of the rest of Row is also changed depending on the moving location.

How to implement an example

The Static component is used to indicate the moving location when moving Row.

visible: false
border: 2px dotted black

Check the Row information at the start of the event and set the Row index value to userdata of the GridDragEventInfo object. Then, display the selected Row information on the Static component.

this.Grid00_ondrag = function(obj:nexacro.Grid,e:nexacro.GridDragEventInfo)
{
	e.set_userdata(e.row);
	var strVal = this.Dataset00.getColumn(e.row, "Column0");
		strVal += " : " + this.Dataset00.getColumn(e.row, "Column1");
	this.Static00.set_text(strVal);
	this.Static00.set_visible(true);
	var nL = obj.getOffsetLeft() + e.clientx;
	var nT = obj.getOffsetTop() + e.clienty;
	this.Static00.move(nL, nT);
	return true;
};

Make the Static component follow the mouse pointer location. Since it is processed by the ondragmove event function of the Form object, not the Grid component, dragging continues even if it leaves the Grid component area.

this.sample_grid_106_ondragmove = function(obj:nexacro.Form,e:nexacro.DragEventInfo)
{
	this.Static00.move(e.clientx, e.clienty + 10);
};

Set the value received as userdata as the previous Row index, and set the current location with the new index to change the Row position.

this.Grid00_ondrop = function(obj:nexacro.Grid,e:nexacro.GridDragEventInfo)
{
	this.Static00.set_visible(false);
	var nRow = e.userdata;
	this.Dataset00.moveRow(nRow, e.row);	
};

Selecting multiple consecutive rows

If the selecttype property value of the Grid component is set to "multirow", multiple rows can be selected. However, if there are many rows to select or if you need to quickly select a row in a specific position, you can set the row index to select and execute the method.

Example

Enter the row index to select and confirm the selected row.

sample_grid_109.xfdl

Core features used in the example

selectMultiRow

Set the start and end indexes of the consecutive rows and process them as selected.

How to implement an example

Set the selecttype property value of the Grid component to "multirow" and set the showselection property value to true to highlight the selected row.

The Dataset has Column and Row information as shown below.

The string entered by the user as the comma separator in the Edit component is delivered as the parameter value of the selectMultiRow method.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.selectMultiRow.apply(this.Grid00, (this.Edit00.value).split(","));
};

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.clearSelect();
};

The selectMultiRow method adds a selection area while maintaining the previously selected area. For example, if the selection range is set to "0, 2" for the first run and "4, 5" for the second run, the selected state is displayed as follows.