Changing & Applying Format

The format that defines what form the data is to be expressed in Grid is called the format. Data and format are essential to use Grid, and data can be expressed in Grid only when both elements are present.

Grid supports multiple formats. You can define multiple formats on Grid and change them as needed. Formats can be predefined and used during development, or they can be created or changed when running the application. The advantage of using multiple formats is that you can change the shape of Grid according to the user or situation.

When Grid is first created, the format is not defined because it is impossible to know which data will be expressed in what form. In order to create the format, the user can directly create it using Grid Contents Editor or bind the Dataset.

When Dataset is bound to Grid, the format called defauly is automatically created based on the column information of Dataset, so if multiple formats are not used, the developer does not need to create a separate format.

Example

The following is an example of creating two formats, which are default, format00 in Grid, and converting the format using the Select format combo box.

The user can switch formats using the Select format combo box below and see how the same data will look according to the format. Selectable formats are the default format automatically created by binding the dataset and the format00 format created separately using the Grid Contents Editor.

sample_grid_20.xfdl

Core features used in the example

formatid

This is the property that sets the ID of the format to be applied to Grid among the formats defined in Grid. All Grid format information is defined in the form of the character string in the formats property.

How to implement an example

Place the Grid , Static , Combo components from the toolbar appropriately as shown in the example figure. Select the component and just click on the form 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 space on the 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.

1. Creating Combo Menu

Select Combo created in step 1 and find the innerdataset property in the Properties window. Click the ... button next to the innerdataset property to open the InnerDataset Editor window. Enter the following in the window, and when the input is complete, click the OK button to complete the binding.

2. Adding Event to Combo

Select Combo in Form and add the onitemchanged event handler as shown below.

this.Combo00_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	var strFormat = e.posttext;
	
	this.Grid00.formatid = strFormat;
};

1. Select Grid and double-click to open Grid Contents Editor.

2. Click the + button at the top left of Grid Contents Editor to create an empty format called format00.

3. Set the format00 format. In the example, select Column in the default format as follows and copy it with Ctrl + C for convenience.

4. Paste the copied Column in the default format into the format00 format with Ctrl + V as shown in the figure below.

5. To check if the format00 format has been properly created, click the Design Source tab in the Grid Contents Editor as shown below and check if the format00 information has been added to the source as shown below.

6. After checking that the format00 format has been properly created, click the OK button Grid Contents Editor.

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

Select default, format00 in the Select format combo box alternately to check how Grid changes.

Creating & Showing Format of Bound Dataset Object

The format that defines what form the data is to be expressed in Grid is called the format. Data and format are essential to use Grid, and data can be expressed in Grid only when both elements are present.

Grid format is created when there is only one Dataset to be bound and if no other Dataset is to be bound in the future. However, if you need to bind other Datasets while the application is running, then a separate process of creating the Grid format is required. The method used in the process is createFormat.

createFormat is the method that creates a new format based on the Column information of Dataset bound to Grid. If you do not execute the createFormat method after binding Dataset while the application is running, then Grid does not work properly because it cannot know what format to output the data in. Therefore, after binding Dataset, createFormat must be executed.

The function of dynamically creating the Grid format is very useful when binding multiple Datasets to one Grid according to the situation.

Example

The following is an example of binding two Datasets, which are Dataset00, Dataset01, to Grid using the Select dataset combo box.

If you select the dataset from the Select dataset combo box, the corresponding Dataset is bound to Grid. Then, the createFormat method is executed, and the Grid format is created according to the Column structure of each Dataset. The format created after executing the createFormat method is immediately reflected in Grid.

sample_grid_21.xfdl

The following shows the Column structure of Dataset00 and Dataset01. Since they have different data and Column structures, they cannot be used by sharing the same format.

Core features used in the example

createFormat

This is the method that creates a new format based on the Column information of Dataset bound to Grid.

binddataset

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

How to implement an example

Place the Grid , Static , Combo components from the toolbar appropriately as shown in the example figure. Select the component and just click on the form 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 space on the form to create Dataset. Repeat the same operation once more as we need to create two Datasets.

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.

• Creating Item List of Dataset00

• Creating Item List of Dataset01

Bind Dataset00 to the Grid component.

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

1. Creating Combo Menu

Select Combo created in step 1 and find the innerdataset property in the Properties window. Click the ... button next to the innerdataset property to open the InnerDataset Editor window. Enter the following in the window, and when the input is complete, click the OK button to complete the binding.

2. Adding Event to Combo

   Select Combo in Form and add the onitemchanged event handler as shown below.

this.Combo00_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	//Binding selected dataset
	this.Grid00.binddataset = e.posttext;

	//Creating new format for bound dataset
	this.Grid00.createFormat();	
};

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

Select dataset00, dataset01in the Select dataset combo box alternately to check if Grid is output normally.

Representing Data in Various Formats

By setting the displaytype property of Cell in Grid, data can be expressed in various formats.

displaytype is the property that sets the format for displaying the contents of Cell on the screen. It can be set in the form of text such as normal, currency, date, number, text, etc., as well as the form of components such as combo, checkbox, button, tree, etc.

In the case of setting in the form of components such as combo, date, tree, etc. among several types, separate Cell properties must be set. Cell properties can be set in Grid Contents Editor. After selecting the corresponding Cell, detailed settings can be made in the GridCombo, GridDate, and GridTree categories in the Properties window.

For example, in the case of setting as the Combo type, you need to bind the dataset to be output to the combo in the Cell setting and set the code and data.

In the case of setting as the Tree type, you need to set treelevel indicating the depth of the tree, treestate indicating the status of the tree, and the treecheck property setting the checkbox of the tree in the Cell setting.

Example

The following is an example of Grid in which the displaytype property of Cell is set. Among the two Grids, the upper one is Grid with the displaytype property set, and the lower one is the one with no setting.

By comparing the two Grids, you can see how the data is represented according to the displaytype property setting of Cell.

sample_grid_22.xfdl

Core features used in the example

displaytype

This is the property that sets the format on which data is displayed in Cell of Grid. If you do not set any value, then normal is set to the default value.

How to implement an example

Place the Grid component from the toolbar appropriately as shown in the example figure. Select the component and just click on the form to create it in the default size.

Grid00, Grid01 are created by repeating the Grid creation operation twice. Grid00 is Grid to set displaytype of the cell, and Grid01 is Grid that does not set anything for comparison with Grid00.

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

1. Select Dataset from the toolbar and click on an appropriate space on the form to create Dataset. Repeat the same operation once more as we need to create two Datasets for Grid and Combo. Set the Dataset id for Grid to ds_data, and set the Dataset id for Combo to ds_combo.

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.

• Creating Item List of ds_data

• Creating Item List of ds_combo

Bind ds_data to the Grid component. Binding is completed by dragging and dropping ds_data in the Invisible Objects area to the Grid component created on Form. Bind ds_data to Grid00 and Grid01 the same way.

1. Double-click on Grid00 to open Grid Contents Editor. Select Cell from col0 to col11 on the left as shown in the figure below, and then set the displaytype in the Properties window on the right.

Set the properties of each Cell as shown in the table below. The Cell setting of the head band sets the title to be displayed in the head column, and the Cell setting of the body band sets the displaytype property.

2. Setting Grid Combo

Select Cell to be set as Combo and find the combodataset property in the Properties window. Click the button next to the combodataset property to select ds_combo to bind. Set the combocodecol, combodatacol properties as follows.

Since only the Cell property setting is explained in this example, the implementation of the Combo action is not processed.

3. Setting Grid Tree

Select Cell to be set as Tree find the GridTree category in the Properties window. Click the button next to the treecheck property to select checkbox, and click the button next to the treelevel property to select the tree. treecheck is the property that binds Column to be used as the checkbox value of the tree, and treelevel is the property that binds Column to be used as the level value of the tree.

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

Compare the execution result of the Grid above and the Grid below, and check how the data is expressed according to the Cell type of Grid.

Editing Data in Various Formats

By setting the edittype property of Cell in Grid, data can be edited in various formats.

edittype is the property that sets the format to be input to Cell. It can be set in the form of text such as normal, date, mask, text, textarea, etc. as well as the form of components such as combo, checkbox, tree, etc.

In the case of setting in the form of components such as combo, date, tree, etc. among several types, separate Cell properties must be set. Cell properties can be set in Grid Contents Editor. After selecting the corresponding Cell, detailed settings can be made in the GridCombo, GridDate, and GridTree categories in the Properties window.

For example, in the case of setting as the Combo type, you need to bind the dataset to be output to the combo in the Cell setting and set the code and data.

In the case of setting as the Tree type, you need to set treelevel indicating the depth of the tree, treestate indicating the status of the tree, and the treecheck property setting the checkbox of the tree in the Cell setting.

Example

The following is an example of Grid in which the edittype property of Cell is set. You can see how each data is displayed according to the edittype property setting of Cell.

sample_grid_23.xfdl

Core features used in the example

edittype

This is the property that sets the format of the edit window in Cell of Grid. If you do not set any value, then none is set as the default value.

autoenter

This is the property that sets the method of automatically changing to the input mode when Cell that can be input is selected in Grid.

wordwrap

This is the property that sets the automatic line break when the data displayed in Cell of Grid is longer than the width of Cell.

How to implement an example

Place the Grid component from the toolbar appropriately as shown in the example figure. Select the component and just click on the form 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 space on the form to create Dataset. Repeat the same operation once more as we need to create two Datasets for Grid and Combo. Set the Dataset id for Grid to ds_data, and set the Dataset id for Combo to ds_combo.

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

• Creating Item List of ds_data

• Creating Item List of ds_combo

Bind ds_data to the Grid component.

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

1. Double-click on Grid00 to open Grid Contents Editor. Select Cell from col0 to col10 on the left as shown in the figure below, and then set the edittype property in the Properties window on the right.

Set the properties of each Cell as shown in the table below. The Cell setting of the head band sets the title to be displayed in the head column, and the Cell setting of the body band sets the edittype and displaytype properties.

2. Setting Grid Combo

Select Cell to be set as Combo and find the combodataset property in the Properties window. Click the button next to the combodataset property to select ds_combo to bind. Set the combocodecol, combodatacol properties as follows.

3. Setting Grid Mask

Select Cell to be set as mask and set the mask-related properties in the Properties window as follows.

AA-### means that only (2 uppercase English alphabet characters)-(3 decimal digits from 0 to 9) are entered.

4. Setting Grid Textarea

Select Cell to be set as textarea and set the wordWrap property to English in the Properties window. When set to english, line breaks are performed in English in the word unit.

5. Setting Grid Tree

Select Cell to be set as Tree find the GridTree category in the Properties window. Click the button next to the treecheck property to select checkbox, and click the button next to the treelevel property to select the tree. treecheck is the property that binds Column to be used as the checkbox value of the tree, and treelevel is the property that binds Column to be used as the level value of the tree.

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

Edit Column for each type and check how it operates according to the setting of the edittype property.

Grouping Records

Grouping, similar to the GROUP BY statement in SQL, classifies the data of Grid into small groups and is mainly used to calculate statistical information for each group. Classification into groups is based on Column that has a common value specified by the user, and records that do not have a common value are also grouped.

Multiple grouping is available by specifying multiple Columns during grouping. For example, you can perform group-by-group operations by dividing them into large groups, medium groups, and small groups. In addition, grouping multiple Columns into one group is also available, and you can group two or more Columns to perform an operation. In multi-grouping, the number of logically created records can make Grid messy, so it is better to determine according to the number of records or records with a common Column. Examples for multiple groupings are covered in a separate example.

By grouping, you can additionally use the group-specific operation function. Basically, operation by group is not performed, but if the INT type Column exists, the total operation by group is automatically performed for the Column of the corresponding type. Which operation to perform is determined through the prop property and can be set by the user. The result of the group-by-group operation is output by creating a logical record immediately below each group. Logical records are logically created records that do not exist in Dataset, and do not affect the data processing operations of Dataset. More details on the prop property are covered in a separate example.

The types of operation are as follows.

Grouping can be performed using the keystring method of Dataset. Please refer to the related elements for detailed usage.

Example

The following is an example of Grid that performs grouping using the keystring method.

Grouping reorders and gathers records with the same Column value based on the Company Column. The sum is calculated for each group, so you can see that it was added as a new record right below the group.

sample_grid_24.xfdl

Core features used in the example

keystring

This is the property that sets the conditional expression used to group/sort the data loaded in Dataset. If the group type is omitted, then the G option is applied.

this.Dataset00.keystring = "column0";
this.Dataset00.keystring = "G:column0";
this.Dataset00.keystring = "G:+column0-column1";
this.Dataset00.keystring = "G:+column0,S:-column1";

How to implement an example

Place the Grid , Button components from the toolbar appropriately as shown in the example figure. Select the component and just click on the form 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 space on the 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.

Select Button in Form and add the onclick event handler as shown below.

• onclick Event Handler of GROUP by Company Button

this.btn_group_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.keystring = "G:Company";	
};

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

Drag the header of the Column you want to change position with the mouse and drop it at the desired location.

Sorting Records

Sorting refers to rearranging data in a certain order according to certain conditions. In the grid, the records must be sorted and provided by a specific column, so it is good for the user to view data, therefore, sorting is an essential function.

Sort types include ascending and descending sorts. Ascending is a number or letter ordered from lowest to the highest, and descending is a number or letter ordered from highest to the lowest. If you specify the column when performing sorting, then you can freely sort in ascending or descending order.

Multiple sorting is available by specifying multiple columns when sorting. For example, if Column1 and Column2 are specified together, then Column1 will be sorted first, and records with the same Column1 will be sorted by Column2 again.

The sorting function in the grid is implemented using the keystring method of the dataset. Please refer to the related elements for detailed usage.

Example

The following is an example of Grid that performs sorting using the keystring method.

If you click the SORT by Name button, then it is sorted in ascending order based on the Name Column.

sample_grid_25.xfdl

Core features used in the example

keystring

This is the property that sets the conditional expression used to group/sort the data loaded in Dataset. If the group type is omitted, then the G option is applied.

this.Dataset00.keystring = "S:column0";
this.Dataset00.keystring = "S:column0+column0";
this.Dataset00.keystring = "G:+column0,S:-column1";

How to implement an example

Place the Grid , Button components from the toolbar appropriately as shown in the example figure. Select the component and just click on the form 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 space on the 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.

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

• onclick Event Function of SORT by Name Button

this.btn_sort_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.keystring = "S:Name";
};

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

Click the Sort by Name button to see if the Name column is sorted in ascending order.

Displaying Cells with Same Value as One Cell - Suppress

Grid is the component to deliver a large amount of data with common characteristics to the user. It is complex because it outputs a large amount of data to Grid, and it is difficult for the user to compare records.

Grid provides the suppress function to reduce the complexity of data and deliver it to the user efficiently. The suppress function combines and displays Cells with the same value in one Column when multiple Cells are repeatedly listed. For example, as shown in the figure below, if repeating cells such as 1dollar or hangul are combined into one cell, then the readability of Grid can be improved.

The suppress function operates efficiently when Cells with the same value are listed consecutively. For example, if the values are not continuously displayed like Company Column of Grid below, then the effect of the suppress function cannot be seen. Therefore, before using the suppress function, Columns to be suppressed must be sorted first.

suppress is set as the level value, and depending on the level value, Cell of which Column is to be suppressed first. For example, if the suppress value of Company Cell is set to 1 and the suppress value of the Department Cell is set to 2, then suppress is first performed in Cell of the Company Column and then suppressed in Cell of the Department Column, which is the next level. In addition, suppress is not performed in Cells of other Columns for which the suppress level has not been set. By setting the level with the suppress value in this way, you can give priority to Cell of each Column.

Example

The following is an example of Grid that performed the suppress function.

When the Suppress button is clicked, Cells with the same value are merged by performing the suppress function after sorting by Company and Department that have common values.

Since the suppress value is set to 1 in Cell of Company Column and the suppress value is set to 2 in Cell of Department Column, suppress is first performed in Company Column and then suppressed in Department Column again based on the result. In other Columns, there is no change because suppress is not set.

sample_grid_26.xfdl

Core features used in the example

suppress

This is the property that sets the suppress function in Grid Cell.

var retVal;

retVal = this.Grid00.setCellProperty("body", 2, "suppress", "1");
retVal = this.Grid00.setCellProperty("body", 3, "suppress", "2");

How to implement an example

Place the Grid , Button components from the toolbar appropriately as shown in the example figure. Select the component and just click on the form 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 space on the 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.

To implement the suppress function, first sort the Column to be suppressed and set the suppress property of Cell.

1. Sort Company Column first and then sort Department Column again based on the result.

2. Set the suppress property of Company Cell to 1 and the suppress property of Department Cell to 2. Cell of Company Column is first suppressed and then Cell of Department Column is suppressed based on the result.

• onclick Event Handler of suppress Button

this.btn_suppress_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	//Sorting records
	this.Dataset00.keystring = "S:Company+Department";

	//Suppressing cells
	var retVal = this.Grid00.setCellProperty("body", 2, "suppress", "1");
	var retVal = this.Grid00.setCellProperty("body", 3, "suppress", "2");
};

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

Setting Cell Property

The Grid component consists of several objects such as GridBandControl, GridCellControl, GridColumnControl, and GridRowControl. Among them, the GridCellControl object plays an important role in outputting the data bound to Grid to the actual Grid. Therefore, in order to output data in the desired form to Grid or to perform operation processing, the GridCellControl object must be set.

To set the GridCellControl object, there are two ways, which are using Grid Contents Editor and calling the method from the script.

• For using Grid Contents Editor, select the desired Cell and set the desired property in the Properties window. This method is used when setting the Cell property during application development.

• For calling the method from the script, use the getCellProperty, setCellProperty methods to set the property. The getCellProperty method is the method that returns the property value of the specified Cell, and the setCellProperty method is the method that sets the property value of the specified Cell. This method is used when setting the Cell property while the application is running.

this.btn_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var nCellIdx = this.Grid00.currentcell;

	var varCellProp = this.Grid00.getCellProperty("body",nCellIdx,"displaytype");

	var bRet = this.Grid00.setCellProperty("body",nCellIdx,"displaytype","button");
};

Since how to use Grid Contents Editor has been covered in other Grid examples continuously, this example will focus on how to set the Cell property using the method in the script.

Example

The following is an example of Grid that imports or sets the property value of the specified Cell using the getCellProperty, setCellProperty methods. In the example, there are two buttons that call the getCellProperty와 setCellProperty methods.

• The getCellProperty button outputs the displaytype property value of the currently selected Cell as the pop-up on the screen. The figure below is the result of executing getCellProperty after selecting Cell of Salary Column. You can see that the displaytype property of Cell is set to currency.

• The setCellProperty button sets the displaytype property value of the currently selected Cell to buttoncontrol. The figure below is the result of executing setCellProperty after selecting Cell of Salary Column. The shape of Cell has been changed to a button, and if you check it by clicking the getCellProperty button, you can see that it comes out as buttoncontrol.

sample_grid_27.xfdl

Core features used in the example

getCellProperty

This is the method that returns a specific property value of Grid Cell.

var strHeadCellColor = this.Grid00.getCellProperty( "head", 0, "color" );

setCellProperty

This is the method that sets a specific property value of Grid Cell.

var bSucc = this.Grid00.setCellProperty( "head", 0, "color", "black");

currentcell

This is the property that has the index of Cell currently selected in Grid. The index starts from 0 and has the value of -1 when there is no selected Cell.

How to implement an example

Place the Grid , Button components from the toolbar appropriately as shown in the example figure. Select the component and just click on the form 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 space on the 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.

Set the id of the getCellProperty button to btn_getCellProperty and add the onclick event handler.

• onclick Event Handler of getCellProperty Button

Import the displaytype property value of the currently selected Cell and output it as the pop-up.

this.btn_getCellProperty_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	//Getting index of selected cell
	var nCellIdx = this.Grid00.currentcell;

	//Getting displaytype property of selected cell
	var varCellProp = this.Grid00.getCellProperty("body", nCellIdx, "displaytype");
	
	alert("displaytype of selected cell is " + varCellProp);
	
};

Set the id of the setCellProperty button to btn_setCellProperty and add the onclick event handler.

• onclick Event Handler of setCellProperty Button

Set the displaytype property value of the currently selected Cell to buttoncontrol.

this.btn_setCellProperty_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	//Getting index of selected cell
	var nCellIdx = this.Grid00.currentcell;

	//Setting displaytype property of selected cell
	var bRet = this.Grid00.setCellProperty("body", nCellIdx, "displaytype", "buttoncontrol");
	
};

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

Select Cell of Grid and click the getCellProperty button to check the value of the displaytype property. Likewise, select Cell and click the setCellProperty button to check the result if the displaytype property is set to buttoncontrol.

Merging Cells

Grid provides the function to merge two or more cells in the same column or row into a single cell. This is the same function as the cell merge function of Excel, which is very useful for expressing data in the grid.

Cell merge is divided into two types, which are 1A big cell (merging actually into one large cell) and 2Having child cells (merging into one cell but internally consisting of several sub-cells 3).

• A big cell is merged with other cells based on the first (with the cell index preceded) when multiple cells are combined into one. In other words, the properties of cells other than the first cell to be based on are disappeared and merged into a larger cell with the properties of the cell to be based on. Use this method when you actually need to merge cells into one.

• Having child cells externally combines cells into one, but internally retains the properties of each cell. Therefore, as shown in 2 below, each sub-cell displays text on the screen as-is. Use this method when you need it to externally look like a single cell and internally act as a separate cell.

Example

The following is an example of Grid that has merged cells.

sample_grid_28.xfdl

In the figure, the red part is the cell merged in the A big cell method, and the blue part is the cell merged in the Having child cells method.

The cells merged in the A big cell method actually operate as one cell. The cells merged in the Having child cells method look like one cell, but each sub-cell outputs data internally.

The actual format of the grid example is as follows. If you compare the merged cell part in the figure above and the format below, then you can see the difference between the two methods.

Core features used in the example

N/A.

How to implement an example

Place the Grid component from the toolbar appropriately as shown in the example figure. Select the component and just click on the form 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 space on the 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.

Double-click the grid to open Grid Contents Editor and configure Column and Row as shown below.

1. Bind the dataset to the grid.

Select the grid and bind Dataset00 to the binddataset property in the Properties window. When binding is attempted, the following Confirm window appears as it attempts to reconfigure the format to fit the dataset. However, since we have made a separate format earlier, select No.

2. Bind the data to the cell.

With the dataset bound to the grid, open Grid Contents Editor and bind the data to the text property of each cell in the body band. Select the cell at the position in the red text below and select the value corresponding to the text from the text property.

Merge cells as shown below. Merge the red part in the A big cell method and the blue part in the Having child cells method.

To merge cells, select the cells you want to merge in Grid Contents Editor by dragging the mouse, then right-click and select [Merge Cells] from the context menu. If you select Merge Cells, then you can select the detailed menu. Select the desired merge method from Merge Cells (A big cell) and Merge Cells (Having child cells).

If the merge is wrong, then you can unmerge with the Split Cell menu. For Split Cell, select the merged cell, click the right mouse button, and select [Split Cell] from the context menu.

When the merge is all complete, click the OK button to close Grid Contents Editor.

• A big cell Merge Method

• Having child cells Merge Method

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

Check whether each cell of Grid is merged or that data is normally displayed in the merged cell.

Setting Sub-cell Properties

Sub-cells are cells inside the merged cell. Each sub-cell can be controlled because the sub-cells are gathered to form one cell, and the properties are retained even after merged.

To control sub-cells in the grid, use the getSubCellProperty, setSubCellProperty methods. To use both methods, you must know the cell index and sub-cell index. Then, you can read or set the property value of the sub-cell.

The cell index will be changed when the cell merge occurs. Note that the cell merge reduces and adjusts by the reduced number of cells. Sub-cells have a separate sub-cell index while sharing the cell index of the merged cell. The sub-cell index starts from 0 in the order defined within the merged cell.

The following is the structure of the grid containing merged cells. Each cell of the Body band is marked with a number, and the red indicates the cell index and the blue indicates the sub-cell index. Although not shown in the figure, the head band has the same structure as the body band, so the index structure is also the same.

Cell and sub-cell indices are ordered from top left to bottom right. The index can be counted by viewing the grid format in Grid Contents Editor, but if the structure is complex, then you can also view the grid code directly from the Design Source tab. In the grid code, the cells are indexed in the order they are listed, so it is better to check in the source.

Example

The following is an example of setting sub-cell properties and reading values in the grid with merged cells.

1. First, click the getSubCellProperty button to check the background property value of the sub-cell corresponding to First Name. Since no color has been set, it is displayed as undefined.

2. Click the setSubCellProperty button to change the background property value of the sub-cell to khaki.

3. Click the getSubCellProperty button again, and check the background property value of the sub-cell to see if it is changed to khaki.

The two buttons specifically function as follows.

• The getSubCellProperty button reads the background property value of the cell corresponding to the First Name from the Body band and displays it as the pop-up. First Name is the 0^th sub-cell from the 5^th cell. If you click the getSubCellProperty button without clicking the setSubCellProperty button, it will appear as 'undefined' because the background property has no value set.

• The setSubCellProperty button changes the background color by setting the background property value of the cell corresponding to First Name in the Body band to 'khaki'. Clicking the button changes the background color of the First Name cell to Khaki.

sample_grid_29.xfdl

Core features used in the example

getSubCellProperty

This is the method that returns the property value of the specified sub-cell when Cell of Grid is the sub-cell structure.

setSubCellProperty

This is the method that sets the property value of the specified sub-cell when Cell of Grid is the sub-cell structure.

How to implement an example

Place the Grid , Button components from the toolbar appropriately as shown in the example figure. Select the component and just click on the form 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 space on the 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.

Double-click the grid to open Grid Contents Editor and configure Column and Row as shown below.

1. Bind the dataset to the grid.

Select the grid and bind Dataset00 to the binddataset property in the Properties window. When binding is attempted, the following Confirm window appears as it attempts to reconfigure the format to fit the dataset. However, since we have made a separate format earlier, select No.

2. Bind the data to the cell.

With the dataset bound to the grid, open Grid Contents Editor and bind the data to the text property of each cell in the body band. Select the cell at the position in the red text below and select the value corresponding to the text from the text property.

Merge cells as shown below. Merge the red part in the A big cell method and the blue part in the Having child cells method.

To merge cells, select the cells you want to merge in Grid Contents Editor by dragging the mouse, then right-click and select [Merge Cells] from the context menu. If you select Merge Cells, then you can select the detailed menu. Select the desired merge method from Merge Cells (A big cell) and Merge Cells (Having child cells).

If the merge is wrong, then you can unmerge with the Split Cell menu. For Split Cell, select the merged cell, click the right mouse button, and select [Split Cell] from the context menu.

When the merge is all complete, click the OK button to close Grid Contents Editor.

• A big cell Merge Method

• Having child cells Merge Method

• Read the background property value of the cell to which the First column is bound from the Body band, and display it as the pop-up. The cell to which the First column is bound is sub-cell 0 of cell 5.

• onclick Event Function of getCellProperty Button

this.btn_getCellProperty_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var varProperty = this.Grid00.getSubCellProperty("body", 5, 0, "background");	
	
    alert("Background value of first name sub cell: " + varProperty);
};

• In the Body band, change the background color by setting the background property value of the cell to which the First column is bound to khaki. The cell to which the First column is bound is sub-cell 0 of cell 5.

• onclick Event Function of setSubCellProperty Button

this.btn_setCellProperty_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var bRet = this.Grid00.setSubCellProperty("body", 5, 0, "background", "khaki");	
};

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

First, click the setSubCellProperty button to see if the background color of the First column changes. Then, click the getSubCellProperty button to check the background color setting value of the First column.

Hiding & Displaying Some Data

If it is difficult to display all data such as phone number or address information among the data displayed on Grid, then it is necessary to hide some of the data. Let us see how to hide some of the displayed strings by specifying them.

Example

Among the data displayed on Grid, display the last 4 digits of the phone number as "****".

sample_grid_41.xfdl

Core features used in the example

maskeditformat

If you specify the value of the maskeditformat property in Grid Contents Editor, then you can hide the desired part and display it. If you wrap the mask character with the "{ }" character, then the mask character is replaced with the "*" character and output. It is used to hide and display some of the characters being input.

How to implement an example

Place Grid on the screen and create the Dataset object. Write the data of the Dataset object as follows.

Bind the Dataset object to which the data was added to the Grid component. Binding is completed by dragging and dropping Dataset in the Invisible Objects area to the Grid component created on Form.

Double-click the Grid component to run Grid Contents Editor. Select the Tel column and set the displaytype property value to "mask" in the property window. In addition, set the maskedittype property value to "string" and the maskeditformat property value to "###-{####}".

The phone number is entered in 7 characters, which means that the last 4 characters excluding the first 3 characters and the "-" character are hidden and displayed.

Run QuickView (Ctrl + F6) to check the result. Check that the last digits of the phone number are displayed as the "*" characters.

Converting Entire Column of Selected Row to Input State

When the edittype property value of the Cell object is specified, the entered value can be edited. However, since it is converted to the input state only when the cell is selected, it is not clear whether the corresponding item can be entered. However, if you show the Grid component itself in the edited state, the readability can be reduced.

This example shows how to improve usability by converting the entire column of Row to look like the input state when a specific Row is selected.

Example

When selecting a specific Row by clicking it with the mouse or moving it with the keyboard, all columns of Row are displayed as input state.

sample_grid_42.xfdl

Core features used in the example

comp.parent

When processing the expr property value in the Grid component Cell object, you cannot directly access the function or component created in Form. Only objects with the expr property can be accessed with the name, comp. Therefore, to access Form, access with comp.parent.

How to implement an example

Place the Grid component and add 2 Dataset objects. One will hold all data and the other will be used to process the Combo control. Bind the first Dataset to the Grid component.

After binding the first Dataset, double-click the Grid component to run Grid Content Editor. Specify each column as follows.

Name
displaytype: expr:comp.parent.iCurrow==currow?'editcontrol':'normal'
edittype: normal

Department
displaytype: expr:comp.parent.iCurrow == currow ? 'combocontrol' : 'combotext'
edittype: combo
combodataset: Dataset01
combocodecol: code
combodatacol: text

Vacation
displaytype: expr:comp.parent.iCurrow == currow ? 'checkboxcontrol' : 'normal'
edittype: checkbox

Whenever the Row position of the Grid component selected by the user changes, the onrowposchanged event of the bound Dataset object occurs. At this time, you can check the changed position information (newrow), and this information is stored as the variable called iCurrow.

this.Dataset00_onrowposchanged = function(obj:nexacro.NormalDataset,e:nexacro.DSRowPosChangeEventInfo)
{
	this.iCurrow = e.newrow;
};

This way, you can explain how the expr specified in the displaytype property value of the Cell object operates. currow used in expr is the position information of all Rows. In other words, it compares the Row position selected by the user with each Row position. Change the value of the displaytype property so that it looks like the input state only when the conditions are met.

comp.parent.iCurrow == currow?'editcontrol':'normal'

Run it with QuickView (Ctrl + F6) and change the selected Row of Grid to check if it is converted into the input state.

Entering Selected Value as Data in PopupDiv

If the item to be entered is simple, you can set the edittype property value to "combo" and select it from the list. However, if the item is described or complicated, then it may be more convenient to open a new window and select it. Let us take a look at how to use the PopupDiv component to enter the selected value.

Example

When the button is clicked in the cell area, the Grid component placed in the PopupDiv component is displayed, and data is input by double-clicking the item to select it.

sample_grid_44.xfdl

Core features used in the example

screenToClientX , screenToClientY

Among the coordinate values obtained from mouse events, the screenx, screeny values are coordinate values displayed based on the monitor in use. If you are using two monitors, then the coordinate values are displayed based on the entire monitor. Therefore, to get the displayed value relative to the actual application, use the screenToClientX or screenToClientY method.

trackPopupByComponent

The PopupDiv component is not displayed on the screen, but is displayed at the specified location when the trackPopupByComponent method is called. The 6^th parameter is the callback function, which is executed when the closePopup method is called. In the example, the PopupDiv component is closed and the callback function is executed when the item is selected in Grid.

closePopup

Closes the PopupDiv component. At this time, if you specify the parameter, the value is transmitted to the callback function. Here, the value selected from the Grid component is transmitted.

How to implement an example

Place the Grid component and add the Dataset object. In the Dataset object, fill only the name column with items and leave the Item column blank. The Item column will fill the selected values in the Grid component in PopupDiv. After setting the data, bind it to the Grid component.

The PopupDiv component repositions when it opens, so it does not matter if you place it anywhere when designing the screen. Place it in an unused area not to block other components. Place the Grid component inside the PopupDiv component. Then, create the Dataset object to be bound, fill in the data, and bind it.

You can add a small button to the cell area. This button is mainly used when calling the extension function. Changing the expandshow property value to "show" adds the magnifying glass image button. You can change the image or size by setting other property values.

Change the value of the expandshow property to write the event function that will be executed when the displayed button is clicked. Save the column, row information arbitrarily as the values must be set again after the PopupDiv component is opened. Set the coordinates using the screenToClientX, screenToClientY methods in order to display the PopupDiv component at the clicked location.

this.col;
this.row;

this.Grid00_onexpandup = function(obj:nexacro.Grid,e:nexacro.GridMouseEventInfo)
{
	this.col = e.cell;
	this.row = e.row;
	var nX = system.screenToClientX(this, e.screenx);
	var nY = system.screenToClientY(this, e.screeny);		
 	this.PopupDiv00.trackPopupByComponent(this, nX, nY, null, null, "call_back");
};

Process the event when the desired item is found in the Grid component placed in the PopupDiv component and double-clicked. Get the selected item value (getColumn) and transmit it to the callback function.

this.PopupDiv00_Grid00_oncelldblclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var value = this.Dataset00.getColumn(e.row , 1);
	this.PopupDiv00.closePopup(value);
};

When executing the closePopup method of the PopupDiv component, the callback function is called. Specify the column, row information arbitrarily saved when processing the onexpandup event function, and the value transmitted as the PopupDiv component is closed as the column values.

this.call_back = function (strId,str)
{
	this.Dataset01.setColumn( this.row, this.col , str)
};

Run it with QuickView (Ctrl + F6) click the expand button at the desired location, and double-click the item displayed in the PopupDiv component.

Displaying Alternative Text Instead of Calendar for No Data

If you only display character strings, then you just have to display nothing when there is no data, but for data of a specific format, it can be unclear how to display it. There may be a number of requirements, especially when displaying date formats. Let us take a look at how to display the data in this case through the example.

Example

Display the alternative text if the data is null.

sample_grid_45.xfdl

Core features used in the example

calendardisplaynulltext

This is the property that specifies the alternative text when the value of the calendardisplaynulltype property is set to "nulltext". If the value of the calendardisplaynulltype property is not set to "nulltext", the value of the calendardisplaynulltext property is not applied.

calendardisplaynulltype

If the property value is "default", then the value is displayed in the format "0000/01/01".

How to implement an example

Place one Grid component first. Then, create and bind the Dataset object to be bound as shown below. Set the type of the date column to "DATE", the second row value to an empty value, and the third Row value to the Empty value.

Select the Grid component and double-click to open Grid Contents Editor. Set the displaytype property value and edittype property value of the date column Cell object to "date".

Run it with QuickView (Ctrl + F6) and check that the data value of the blank item is displayed in the format of "0000-01-01".

Copy the Grid component and create one more. Then, set the calendardisplaynulltype property value to "nulltext" and the calendardisplaynulltext property value to "NULL"

Run it with QuickView (Ctrl + F6) and check how the date value of the blank item is displayed. Also, check how it is displayed in edit mode.

Changing displaytype Property Value by Conditions

When specifying a specific property value of the Cell object, the setCellProperty method is used. If you use the expr property together at this time, then you can specify the property value according to conditions.

Example

If you click the button, then displaytype of the Column0 item of Row with "Y" as the Column2 item is changed.

sample_grid_46.xfdl

Core features used in the example

setCellProperty

Specifies the property value to be set as the fourth parameter and the expr property can be used at this time. For example, by adding the condition such as expr:Column2=='Y', you can specify different property values depending on the value of Column2.

How to implement an example

Place the Grid component and the Button component. Add the Dataset object and set the data value as shown below. Bind the Dataset object to the Grid component.

Change the properties of the Cell object when the Button component is clicked.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.setCellProperty("body", 0, "displaytype", 
		"expr:Column2=='Y'?'checkboxcontrol':'normal'");
	this.Grid00.setCellProperty("body", 0, "edittype", 
		"expr:Column2=='Y'?'checkbox':'none'")
};

Run it with QuickView (Ctrl + F6) and click the button to check that the display format of the first column is changed.

Using checkboxcontrol when Column Value is "Y", "N"

When using the checkbox in the Grid component, the data value should be set to 1, 0. However, the original data can come in many different forms. Let us take a look at how you can control the display of the checkbox in this case.

Example

The original data is checked as "Y", "N", but the checkbox is displayed. When the checkbox is changed, the value of the original data is entered as "Y" or "N".

sample_grid_50.xfdl

Core features used in the example

oncolumnchanged

This is the event that occurs when the column value of the Dataset object is changed. In the example, when the status of the checkbox changes, the value of 1 or 0 is set, which is forcibly changed to "Y" or "N".

How to implement an example

Place the Grid component. Add the Dataset object and set the data value as shown below. Bind the Dataset object to the Grid component.

Double-click the Grid component to run Grid Contents Editor. Add a column. At this time, if you use [Insert] instead of [Add], then you can add a new column in front of the selected column.

Select the cell in the head area and edit the text property value. Select the first body cell added and set it as follows. Use the data of Column0 like the first bound column. However, convert the value to 1 or 0, depending on the data in the expr property.

Run it with QuickView (Ctrl + F6) and check whether the data of the Grid component is displayed in the desired form. However, if you change the status of the checkbox, then you can see that the second column is displayed as 1 instead of "Y". The status of the checkbox does not change, either.

To process data normally when the status of the checkbox area is changed, add the oncolumnchanged event and write the event function. Controlling the enableevent property value is recommended when processing large amounts of data. However, as in the example below, there may be no significant difference in the case of changing 1 data point.

this.Dataset00_oncolumnchanged = function(obj:nexacro.NormalDataset,e:nexacro.DSColChangeEventInfo)
{
	if(e.columnid == "Column0")
	{
		obj.enableevent = false;
		if(e.newvalue == '1')
		{
			obj.setColumn(e.row,"Column0",'Y');
		} else if(e.newvalue == '0')
		{
			
			obj.setColumn(e.row,"Column0",'N');  
		}
		obj.enableevent = true;
	}
};

Run it with QuickView (Ctrl + F6) and check whether the data of the Grid component is displayed and changed in the desired form.

Moving to Site when Clicking URL Link

This is an example of moving to the site when clicking the Grid component when the bound data contains a URL link.

Example

If the bLink column value that is not visible on the screen is "Y", then an underline is displayed in the url column, and the shape of the mouse cursor changes. When the corresponding cell is clicked, it is moved to the specified site.

sample_grid_53.xfdl

Core features used in the example

displaytype

If you set the displaytype property value to "decoratetext", then you can use line breaks or the Decorate tag. If there is no specified tag, then the text is displayed as-is.

execBrowser

Executes the specified URL path in the web browser. If the method is executed in the web browser, then it is executed in a new tab or new window of the web browser.

How to implement an example

Place the Grid component. Add the Dataset object and set the data value as shown below. Bind the Dataset object to the Grid component.

Delete the bLink column as it is not used. Select the url column item and set the displaytype property value to "decoratetext" and the expr property value as shown below. If the bLink column value is "Y", then add the Decorate tag. Otherwise, the url column value is used.

bLink=='Y'?"<u v='true'>"+url+"</u>":url

Set the cssclass property value as follows.

cssclass: expr:bLink=='Y'?'sample_grid_53_cursor':''

.Grid .body .row .cell.sample_grid_53_cursor[status=mouseover]
{
	cursor : pointer;
}

Add the function to move to the site when clicking on the cell. Add the condition to move only when the bLink column value is "Y".

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	if( e.cell == 1 ){
		if( this.Dataset00.getColumn(e.row, "bLink") == "Y")		
			system.execBrowser(this.Dataset00.getColumn(e.row, 1));
	}
};

Run it with QuickView (Ctrl + F6) and check if it is moved to the corresponding site when the URL is clicked.

Properties that Can Be Used in expr

Here are properties that can be used in expr.

Example

The item specified in the expr property value is displayed in the Grid component. When the selected cell is changed, the displayed item changes.

sample_grid_57.xfdl

Core features used in the example

currentcell

Displays the selected cell index. In the case of selecting by Row, the index value is displayed at the first selection. In the example, the selecttype property value of the Grid component is specified as "cell".

How to implement an example

Place the Grid component. Add the Dataset object and set the data value as shown below. Bind the Dataset object to the Grid component.

Double-click the Grid component to run Grid Contents Editor and specify the expr property value of each column as follows.

"this.col: "+this.col+"\n"+"dataset.rowcount: "+dataset.rowcount+"\n"+"dataset.rowposition: "+dataset.rowposition+"\n"+"comp.currentcell: "+comp.currentcell+"\n"+"currow: "+currow

To display all data, set the autofittype property value to "col" and the autosizingtype property value is set to "row". Modify the selecttype property value to "cell" so that the currentcell property value can be well expressed.

Run it with QuickView (Ctrl + F6) and check the data displayed in the Grid component. The col, rowcount, currow property values are fixed and displayed, and the rowposition, currentrow property values change according to the selected cell.

Applying Suppress Property with Script

You can apply the suppress property dynamically within the script.

Example

suppress operates when the Column0, Column1 head areas are clicked. Click the button to return to the initial state.

sample_grid_58.xfdl

Core features used in the example

suppress

When specifying the property value of the Cell object, use the setCellProperty method. In the example, the suppress property value corresponding to Column0, Column1of the body area is changed.

How to implement an example

Place the Grid component. Add the Dataset object and set the data value as shown below. Bind the Dataset object to the Grid component.

When clicking the head area of the Grid component, the suppress property value of the corresponding column is changed. When the first column is clicked, only the first column is changed, and when the second column is clicked, the suppress property values of the first and second columns are changed.

this.Grid00_onheadclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var sCol = e.col;
	if(sCol==0)
	{
		this.Grid00.setCellProperty("Body", 0, "suppress", 1);
	} else if(sCol==1)	{
		this.Grid00.setCellProperty("Body", 0, "suppress", 1);
		this.Grid00.setCellProperty("Body", 1, "suppress", 2);
	}
};

When the button is clicked, the suppress state is initialized.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
		this.Grid00.setCellProperty("Body", 0, "suppress", 0);
		this.Grid00.setCellProperty("Body", 1, "suppress", 0);
};

Run it with QuickView (Ctrl + F6) and click the head area of the Grid component to check that the suppress state is changed.

Filling Areas with No Data

When the number of data changes dynamically, if the size of the Grid component is fixed, the area without data is not displayed. Let us take a look at how to show empty Rows in this case.

Example

The display method under the 7^th Row changes according to the selection of the item of the Combo component.

sample_grid_59.xfdl

Core features used in the example

fillareatype

Specifies how to fill the area where Row is not displayed in the Grid component. In the example, it is reflected when selecting the property value in the Combo component.

How to implement an example

Place the Grid component. Add the Dataset object and set the data value as shown below. Bind the Dataset object to the Grid component.

Add a column to display the constant area displayed when the fillareatype property value is set to "datarow" or "allrow". Double-click the Grid component to run Grid Contents Editor and add the column.

The text property value of the added column specified the fixed string of "TEST". This way, the first column will always be displayed as the string "TEST". Specify the displaytype property value of the Column0 item to "checkboxcontrol".

Set the fillareatype property value in the Combo component. Place the Combo component and set the property value with the innerDataset item value.

Add code that specifies the value of the selected Combo component as the fillareatype property value in the onitemchanged event function.

this.Combo00_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	this.Grid00.fillareatype = e.posttext;
};

Run it with QuickView (Ctrl + F6) and click the head area of the Grid component to check that the suppress state is changed.

Displaying Specific Row to Blink

Using the timer and the cssclass property value, a specific row can be displayed as if it is blinking. We will also take a look at how to use the blinkCell, blinkCellByInterval methods.

Example

As the flag column value of the second Row displayed in the Grid component changes, the background color is displayed as if blinking. When the [blinkCell] button is clicked, the blinkCell, blinkCellByInterval methods are executed to display the background color as if blinking.

sample_grid_62.xfdl

Core features used in the example

cellexprupdatecondition

Specifies the range to update the value when the expr value is changed. The default value is "all". When the expr value corresponding to a specific cell is changed, another Row, Cell are updated together. However, as in the example, if you change the background color of a specific area and do not affect the rest of the area, set the property value to "none". Depending on the settings, the performance of the application may be affected.

blinkCell

Processes the blinking effect on the specified column item of a specific Row. The blinked userstatus is applied and the userstatus is cleared for the specified time repeatedly.

blinkCellByInterval

Processes the blinking effect on the specified column item of a specific Row. The blinked userstatus is applied for 500 milliseconds and the userstatus is cleared for the specified time repeatedly.

How to implement an example

Place the Grid component and the Button component. Add the Dataset object and set the data value as shown below. Bind the Dataset object to the Grid component.

Specify the cssclass property value as follows. At this time, if you select all the columns corresponding to the body row, then you can specify the property values at once.

expr:comp.parent.setblink(currow)

The value is specified only once in the property window, but the actual value is entered into each column property.

<Band id="body">
	<Cell text="bind:label" cssclass="expr:comp.parent.setblink(currow)"/>
	<Cell col="1" text="bind:level" cssclass="expr:comp.parent.setblink(currow)"/>
	<Cell col="2" text="bind:flag" cssclass="expr:comp.parent.setblink(currow)"/>

Select the Grid component and set the cellexprupdatecondition property value. In the case of the Grid component, there are many properties that can be used, so you can find it faster by using the search function. Find the property and set the value to "none".

Set the background color to change every second using the timer function. When the timer event occurs, the flag column value is changed from 1 to 0 or from 0 to 1. When the column value changes, the value returned by the setblink function also changes, and the cssclass property value of each cell changes.

this.styleArr = ["sample_grid_62_blink2", "sample_grid_62_blink1", "sample_grid_62_blinkcell"];
this.idx = 0 ;
this.blinkRow = 0 ;

this.sample_grid_62_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	this.setTimer(1, 1000);
};

this.sample_grid_62_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)
{
	var v = this.Dataset00.getColumn(e.timerid,2)^1;
	this.Dataset00.setColumn(e.timerid, 2, v);
	
	this.idx = v;
	this.blinkRow = e.timerid;
};

The setblink function is the function previously written with expr in the cssclass property value. In the case of the 3^rd and 4^th Rows, specify the cssclass property value to "sample_grid_62_blinkcell" to execute the blinkCell, blinkCellByInterval methods.

this.setblink = function (nRow)
{
	if(nRow >= 2)
	{
		return this.styleArr[2];
	}
	else if(this.blinkRow == nRow)
	{
		return this.styleArr[this.idx ];
	}
	return "";
};

Open the xcss file and add the code below. You can add the selector in the Advanced tab or enter code value directly in the Text tab.

.Grid .body .row .cell.sample_grid_62_blink1
{		
	background : gold;
}

.Grid .body .row .cell.sample_grid_62_blink2
{		
	background : white;
}

.Grid .body .row .cell.sample_grid_62_blinkcell[userstatus=blinked]
{		
	background : gold;
	color : #666666;
}

Execute the blinkCell, blinkCellByInterval methods when the button is clicked.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.blinkCell(2, "label, level, flag", 5000, 5);
	this.Grid00.blinkCellByInterval(3, "label, level, flag", 500, 5);
};

The blinkCell method applies the blinking effect to the third Row with the Row index value of 2. The target columns are all 3 columns and blink 5 times for 5 seconds. The blinkCellByInterval method applies the blinking effect to the fourth Row with the Row index value of 3. The target columns are all 3 columns, and the blinking effect is applied at 1-second intervals.

Run it with QuickView (Ctrl + F6) and check that the background color of the second Row of the Grid component changes. Click the button to see the background color of the third and fourth Rows change as well.

Changing & Displaying Cell Text Color for Data Change

This is an example of changing the Cell style so that you can easily see if the data has changed when the user changes the data of the Grid component.

Example

If you change the status of the checkbox in the third column, the text color of the first column is displayed in red.

sample_grid_64.xfdl

Core features used in the example

getOrgColumn

Returns the initial data value. If the edittype property value of the Cell object is specified and the user modifies the data, then the value returned by the getOrgColumn method may be different from the value of the current state.

How to implement an example

Place the Grid component. Add the Dataset object and set the data value as shown below. Bind the Dataset object to the Grid component.

Modify the edittype, displaytype property values of Column2 Cell. edittype is "checkbox" and displaytype is "checkboxcontrol". Set cssclass of Column0 Cell as below.

expr:Column2==dataset.getOrgColumn(currow,'Column2')?'':'sample_grid_64_changevalue'

If the value of Column2 is the same as the result of the getOrgColumn method, then it is determined that there is no change, and cssclass is not specified. If the value is different, then the cssclass property value is specified as "sample_grid_64_changevalue". In this way, only when the value is changed, the text color of Column0 Cell is displayed in red.

Open the xcss file and add the code below. You can add the selector in the Advanced tab or enter code value directly in the Text tab.

.Grid .body .row .cell.sample_grid_64_changevalue
{
	color : red;
}

Run it with QuickView (Ctrl + F6) and check that the text color of Column0 changes when the status of the checkbox is changed.

Displaying Row Number

Let us take a look at how to display the row number using the currow property value.

Example

The row number of the No column is automatically displayed.

sample_grid_66.xfdl

Core features used in the example

currow

Returns the current Row index if specified as the expr property value of the Cell object. Since the index value starts from 0, the currow+1 formula is used to display the row number.

How to implement an example

Place the Grid component. Add the Dataset object and set the data value as shown below. Bind the Dataset object to the Grid component.

Select Column0 and select the [Insert] menu. Add a new column before the selected column. Enter "No" for the text property value of the added column Head row and currow+1 for the expr property value of the Body row.

Run it with QuickView (Ctrl + F6) and check if the row number is displayed.

Changing & Displaying Text Color by Tree Level

When expressing Grid in the form of Tree, it can be displayed by changing the text color of a specific level or other style properties.

Example

Text is displayed in different colors depending on the tree level. When the button is clicked, it is displayed in a different color.

sample_grid_60.xfdl

Core features used in the example

treeitemtext

It is the sub-Control under the CellTreeItemControl object. This is the area where the text is displayed. You can access it as follows in the XCSS editor.

.GridCellControl .celltreeitem .treeitemtext  /** O **/
{
	color : red;
}

.GridCellControl.sample_grid_60_font_red .celltreeitem .treeitemtext  /** X **/
{
	color : red;
}

How to implement an example

Place the Grid component. Add the Dataset object and set the data value as shown below. Bind the Dataset object to the Grid component.

Among the properties of the Grid component, modify the property value for expressing the tree form as follows.

treeinitstatus="expand,all"
autofittype="col"
treeusecheckbox="false"
treeuseimage="true"
treeuseline="true"

Modify the Cell property of the first column as follows.

displaytype="treeitemcontrol" 
treelevel="bind:level" 
edittype="tree"

Open the xcss file and add the code below. You can add the selector in the Advanced tab or enter code value directly in the Text tab.

.Grid .body .row .cell.sample_grid_60_font_red .celltreeitem .treeitemtext
{		
	color : red;
}

.Grid .body .row .cell.sample_grid_60_font_blue .celltreeitem .treeitemtext
{		
	color : blue;
}

.Grid .body .row .cell.sample_grid_60_font_lightgreen .celltreeitem .treeitemtext
{		
	color : lightgreen;
}

Run Grid Contents Editor again and modify the cssclass property value among Cell properties of the first column as follows. Specify that different style properties are applied according to the value of the level column.

expr:level == 0?'sample_grid_60_font_red':level==1?'sample_grid_60_font_blue':'sample_grid_60_font_lightgreen'

Run it with QuickView (Ctrl + F6) and check that the text color of the first column has changed according to the tree level.

Add the Button component to the screen and create the onclick event function as shown below. You can change the currently set text color by changing the cssclass property value in the script.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.setCellProperty("body", 0, "cssclass", 
		"expr:level == 0?'sample_grid_60_font_lightgreen':level==1?'sample_grid_60_font_red':'sample_grid_60_font_blue'");
};

Run it with QuickView (Ctrl + F6) and check that the text color has changed when the button is clicked.

Changing & Displaying Icon Image

When expressing Grid in the form of Tree, the icon image can be changed and displayed.

Example

Only the Grid component icon on the right is displayed differently.

sample_grid_61.xfdl

Core features used in the example

-nexa-icon

Specifies the icon image file to be used in the TreeItemIconControl object. If it has the sub-level, then it specifies the icon image in its folded or unfolded state, and if it is the last tree, then specifies the icon image that displays the item.

How to implement an example

Place the Grid component. Add the Dataset object and set the data value as shown below. Bind the Dataset object to the Grid component.

Among the properties of the Grid component, modify the property value for expressing the tree form as follows.

treeinitstatus="expand,all"
autofittype="col"
treeusecheckbox="false"
treeuseimage="true"
treeuseline="true"

Modify the Cell property of the first column as follows.

displaytype="treeitemcontrol" 
treelevel="bind:level" 
edittype="tree"

Open the xcss file and add the code below. You can add the selector in the Advanced tab or enter code value directly in the Text tab.

.Grid .body .row .cell.sample_grid_61 .celltreeitem .treeitemimage
{
	-nexa-icon : URL("theme://images/img_WF_Grdimg.png");
}

.Grid .body .row .cell.sample_grid_61 .celltreeitem .treeitemimage[userstatus=expand]
{
	-nexa-icon : URL("theme://images/btn_WF_Popmenunext_D.png");
}

Create the Grid component with the same properties by copying the Grid component created in the previous step. Run Grid Contents Editor and modify the cssclass property value among Cell properties of the first column as follows.

Run it with QuickView (Ctrl + F6) and check that the tree item icon of the Grid component created on the right has changed.

Checking Selected Cell Property

When you select a specific area of the Grid component, you can check which area is the head, body, or summary area.

Example

When the onlbuttondown event occurs, related information is displayed in the lower TextArea area.

sample_grid_70.xfdl

Core features used in the example

row

In the example, the property value of the GridMouseEventInfo object is used, but the row property value information is also provided by other event objects connected to the Grid component.

How to implement an example

Place the Grid component. Add the Dataset object and set the data value as shown below. Bind the Dataset object to the Grid component.

Modify a few things to check various Cell properties. Add Left Column and add one more Head, Body Row each. Also, add Summary Row. Items displaying A, B columns are displayed by merging the rows of the head, body areas.

Write the onlbuttondown event function so that you can check the Cell property information when each area of the Grid component is clicked.

this.Grid00_onlbuttondown = function(obj:nexacro.Grid,e:nexacro.GridMouseEventInfo)
{
	var strRow;
	switch(e.row) {
		case -1:
			strRow = 'Head Band';
			break;
		case -2:
			strRow = 'Summary Band';
			break;
		case -9:
			strRow = 'Blank Body';
			break;		
		default:
			strRow = 'Body Band';
	}
	this.TextArea00.value = strRow+'\n'+'row: '+e.row+'\n'+'subrow: '+e.subrow;
};

Run it with QuickView (Ctrl + F6) and click each area of the Grid to check the information.

Changing & Displaying Selected Item Style in ComboControl

You can change the style within the control, which is displayed in various formats in the Grid component.

Example

Display the list according to the default theme setting in the right Grid component, and the text of the selected item in the list in red according to the specified style in the left Grid component.

sample_grid_71.xfdl

Core features used in the example

combodataset

This is the property of the GridCellControl object. It is used together with the combocodecol, combodatacol properties.

How to implement an example

Place the Grid component. Add the Dataset object and set the data value as shown below. Bind the Dataset object to the Grid component.

Then, create one more Dataset object with the code, data columns.

Specify the property of the Cell object as follows.

displaytype: combocontrol
edittype: combo
combodataset: Dataset01
combodatacol: data
combocodecol: code

After specifying the property, copy and paste the column. When pasting, you can add before (Insert) or after (Append) the selected column.

Specify the cssclass property value of the added Cell object.

Open the xcss file and add the code below. You can add the selector in the Advanced tab or enter code value directly in the Text tab.

.Grid .body .row .cell.sample_grid_71 .cellcombo .combolist .listboxitem[userstatus=selected]
{		
	color : red;
}

Run it with QuickView (Ctrl + F6) and click each area of Grid to check the information.

Entering Only Specific Text in Grid

In cell editing state, you can check and limit the input value.

Example

For Column1, only Korean can be entered. If you try to enter other text, then the input is replaced with the empty value.

sample_grid_68.xfdl

Core features used in the example

getEditValue, setEditValue

Able to import or set the value being edited when editing Cell.

How to implement an example

Place the Grid component. Add the Dataset object and set the data value as shown below. Bind the Dataset object to the Grid component.

Modify the edittype property value of the Column1 Cell object to "normal".

After checking the input value in the oninput event function of the Grid component and determining whether it is Korean or not, input it as-is if it is Korean, and return the empty value ("") if it is not.

this.Grid00_oninput = function(obj:nexacro.Grid,e:nexacro.InputEventInfo)
{
	var strControlValue  = obj.getEditValue();
	if(strControlValue)
	{
		obj.setEditValue(strControlValue.replace(/[^\ㄱ-ㅎㅏ-ㅣ가-힣]/g, ""));
	}
};

Run it with QuickView (Ctrl + F6), make the second column edited, and enter text.

Displaying Cells with Same Horizontal Value as One Cell

The suppresshorzcell property can process the effect of merging cells horizontally when displaying titles in the Left, Right columns. Although it is the Grid component property, it is affected by the suppress property of the Cell object.

Example

The suppresshorzcell property and the suppress property operate together in L1 to L3 columns. Since B1 to B3 columns are Body columns, the suppresshorzcell property is not applied, and only the suppress property value is applied. Columns 1 to 3 show the original data to which the suppress property was not applied.

sample_grid_75.xfdl

Core features used in the example

suppresshorzcell Property

Able to display as one cell if the horizontal values are the same within the Left, Right columns.

How to implement an example

Place the Grid component and the Button component on the screen and create the Dataset object. Set the value of the Dataset object as follows and bind it to the Grid component.

Add the Left column and 3 Body columns each. For the added column, specify Column1 to Column3 as the text property value according to the order.

To classify each column Head text property value, specify L1 to L3, B1 to B3, 1 to 3. Then, select all the Body cells in the L1 to L3 and B1 to B3 columns and specify the suppress property value. If multiple cells are selected and a specific property value is modified, then the same property value is reflected in all cells.

Close the Grid Contents Editor window and set the suppresshorzcell property value to "left" with the Grid component selected.

Change the suppress property value of the L2, L3 column Cell to 0 when the button is clicked.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.setCellProperty("body", 1, "suppress", "0");
	this.Grid00.setCellProperty("body", 2, "suppress", "0");
};

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

Displaying Cells of Desired Area as One Cell

Regardless of the data, the cells in a specified area can be displayed as one cell. This can be used when you need to combine cells while displaying fixed data rather than dynamically configured data. The example below displays cells in the same price range as one cell in a restaurant price list.

It can be explained that the rowspan, colspan functions are processed dynamically in the HTML Table tag. The rowspan, colspan functions can be processed in one mergeCell method.

Example

When the mergeCell button is clicked, the cells in the specified area are displayed as one cell. If you click the splitCell button, then only the Row information for the adult is divided into the original cell and displayed.

sample_grid_77.xfdl

Core features used in the example

mergeCell

Specifies the cell area to be merged with 4 parameters, which are nStartCol, nEndCol, nStartRow, nEndRow, and merges the cells. Only the same Band area can be merged, and if the merge fails or the area is already merged, then the false value is returned.

splitCell

Specifies the cell area to be unmerged with 4 parameters, which are StartCol, nEndCol, nStartRow, nEndRow, and releases the cell merge.

How to implement an example

Items with the type column value of the adult have the same price for dinner and weekend, and items with the type column value of the student have the same price for lunch and dinner. We will be merging cells with the same price.

Change the text property value of the Button component to 'mergeCell', 'splitCell'.

Execute the mergeCell or splitCell method according to the text property value of the Button component.

this.Button_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(obj.text == 'mergeCell')
	{
		this.Grid00.mergeCell(2, 3, 0, 0); // 23900
		this.Grid00.mergeCell(1, 2, 1, 1); // 10900
		this.Grid00.mergeCell(1, 2, 2, 2); // 7500
		trace(this.Grid00.mergeCell(0, 1, 0, 0)); // adult, 14900
	}
	else if(obj.text == 'splitCell')
	{
		this.Grid00.splitCell(2, 3, 0, 0);
	}
};

The parameter specifies the Column index and the Row index. To combine the cells of the dinner and weekend columns of the item with the type column value of "adult" into one cell, the Column index is from 2 to 3, and the Row index is from 0 to 0. Therefore, the parameter value becomes (2, 3, 0, 0).

The fourth script processed when the mergeCell button is clicked has the parameter value of (0, 1, 0, 0), and the type column tries to merge the left and body bands by modifying the band property value to "left". However, since the different bands cannot be combined, they return the false value.

Displaying Cells of Selected Area as One Cell

Let us take a look at how to display multiple cells in the selected area as one cell when the selecttype property value is "area".

Example

Select the cell you want to display as one cell and click the mergeCell button to display the cell of the selected area as one cell. Click the splitCell button to release the merged cells in the selected area.

sample_grid_78.xfdl

Core features used in the example

selectstartcol, selectendcol, selectstartrow, selectendrow

Able to check the Column, Row index information of the selected area. The property value is in the form of an array. When the selecttype property value is "area", the length of the array is 1, and when it is "multiarea", the length of the array can be 1 or more, depending on the selected area.

How to implement an example

Change the text property value of the Button component to 'mergeCell', 'splitCell'.

Execute the mergeCell or splitCell method according to the text property value of the Button component.

this.Button_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(obj.text == 'mergeCell')
	{
		this.Grid00.mergeCell(this.Grid00.selectstartcol[0], 
			this.Grid00.selectendcol[0],
			this.Grid00.selectstartrow[0],
			this.Grid00.selectendrow[0]);
	}
	else if(obj.text == 'splitCell')
	{
		this.Grid00.splitCell(this.Grid00.selectstartcol[0], 
			this.Grid00.selectendcol[0],
			this.Grid00.selectstartrow[0],
			this.Grid00.selectendrow[0]);
	}
};

The parameter specifies the Column index and the Row index of the selected area.

Importing Actual Cell Property Value

If the cell property value is set to expr, then you can import the actual cell property value.

Example

Clicking the cell of the Column0 column displays the actual control name and the script set to expr in the TextArea component.

sample_grid_82.xfdl

Core features used in the example

getCellPropertyValue

Returns the actual value when bound or set to expr. In the example, the value of the displaytype property is set to expr, and the value applied as the actual displaytype property is checked.

How to implement an example

Set the displaytype property value of the Column0 item as follows.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{	
	this.TextArea00.value = obj.getCellPropertyValue(e.row, e.cell, "displaytype")+"\n"
		+obj.getCellProperty("body", e.cell, "displaytype");
};

Specifying Multiple cssclass Property Values

There are several property values that can be specified in the xcss file. All cases can be applied overlapping instead of writing as one class. For example, you can create one class that specifies the background color and several classes that change the text color according to the situation.

Example

Different color styles are applied to each cell depending on the value of the cssclass property.

sample_grid_84.xfdl

Core features used in the example

cssclass

Able to specify multiple classnames. In this case, if duplicate style properties are specified, then the last registered item in the XCSS file is applied. It is the order in the XCSS file, not the order specified by the cssclass property value.

How to implement an example

In sample_grid_84_background, specify both background color and text color, and in sample_grid_84_font_a, sample_grid_84_font_b, specify background color and text color for even-numbered rows.

.Grid .body .row .cell.sample_grid_84_background
{
	-nexa-background-odd : silver;
	background : silver;	
	color : white;
	-nexa-color-odd : white;	
}
.Grid .body .row .cell.sample_grid_84_font_a
{
	background : blue;	
	color : red;
}
.Grid .body .row .cell.sample_grid_84_font_b
{
	background : red;	
	color : pink;
}

<Band id="body">
	<Cell text="bind:Column0" cssclass="sample_grid_84_background, sample_grid_84_font_a"/>
	<Cell col="1" text="bind:Column1" cssclass="sample_grid_84_background, sample_grid_84_font_b"/>
	<Cell col="2" text="bind:Column2"/>
</Band>

Importing Value Being Edited

Depending on the value of the edittype property, you can check the value only when the value entered by the user is confirmed. For example, if the value of the edittype property is "date", then the user directly enters the date value. Therefore, the getEditingValue, getEditingText methods have been added that allow you to check the value in the oninput event even while editing.

Example

You can check how each method processes the value depending on the value of the edittype property.

sample_grid_86.xfdl

Core features used in the example

getEditingValue, getEditingText

This is the method that checks the value being edited. If the edittype property value is "date" or "mask", then the result values of the getEditingValue, getEditingText methods may differ, depending on the mask property value.

setEditingValue

This is the method that is used when you want to check and modify the value being edited.

How to implement an example

this.Grid00_oninput = function(obj:nexacro.Grid,e:nexacro.InputEventInfo)
{
	this.TextArea00.value = "getCurEditType: "+obj.getCurEditType()+"\n"
		+"getEditValue: "+obj.getEditValue()+"\n"
		+"getEditText: "+obj.getEditText()+"\n"
		+"getEditingValue: "+obj.getEditingValue()+"\n"
		+"getEditingText: "+obj.getEditingText();
};

Expanding Child Nodes at Once

If the displaytype property value is "treeitemcontrol", then selecting the parent node expands or collapses the child nodes. At this time, the state of the child node has the previous state. Accessing sub-nodes with deep levels requires multiple unfolding. In this example, we will take a look at how to expand the child nodes from the parent node at once.

Example

When selecting the Menu 1 or Menu 2 item, the child nodes are expanded at once.

sample_grid_89.xfdl

Core features used in the example

TreeItemIconControl

It is the control object corresponding to the expand and collapse icons when displaying the Grid component in the tree format. Since 2 images and buttons are displayed, you can check whether to select the object name and id as the condition.

isTreeLeafRow

Checks if a specific Row is the Row with no child classes. Returns true if there are no child classes.

How to implement an example

displaytype: treeitemcontrol
edittype: tree
text: bind:MenuName
treelevel: bind:Level
treestate: bind:Status

Check if the location where the event occurred is the tree item button, check the Status value of each Row, and then modify the status value when expanding or folding. Before the task, set the value of the enableevent property of the Dataset object to false, and set it to true when the task is completed.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	if(e.fromreferenceobject == "[object TreeItemIconControl]" && e.fromreferenceobject.id == "treeitembutton")
	{
		this.Dataset00.enableevent = false;
		if(this.Dataset00.getColumn(e.row,"Status") == null)
		{
			this.Dataset00.setColumn(e.row,"Status",1);
			for(var i=1; i < this.Dataset00.rowcount; i++)
			{
				if(obj.isTreeLeafRow(e.row+i) == false)
				{
					this.Dataset00.setColumn(e.row+i,"Status",1);
				} else {
					break;
				}
			}
		} else {
			this.Dataset00.setColumn(e.row,"Status",null);
			for(var i=1; i < this.Dataset00.rowcount; i++)
			{
				if(obj.isTreeRootRow(e.row+i) == false)
				{
					this.Dataset00.setColumn(e.row+i,"Status",null);
				} else {
					break;
				}
			}
		}
		this.Dataset00.enableevent = true;
	}
};

Applying Padding Property in Tree Format

This can be used when you want to indent the desired width according to the level when the Grid component is expressed in the tree format.

Example

Clicking the button applies the padding style property.

sample_grid_91.xfdl

Core features used in the example

setCellProperty

Specifies the specific property value of the Cell object. In the example, the cssclass property value is specified when the button is clicked.

How to implement an example

displaytype: treeitemcontrol
edittype: tree
text: bind:Column0
treelevel: bind:level

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Grid00.setCellProperty("body", 0, "cssclass", "expr:level==1?'sample_grid_91_padding1':level==2?'sample_grid_91_padding2':''");
};

You can add the selector in the Advanced tab or enter the code value directly in the Text tab.

.Grid .body .row .cell.sample_grid_91_padding1
{
	-nexa-padding : 4px 4px 4px 40px;
}

.Grid .body .row .cell.sample_grid_91_padding2
{
	-nexa-padding : 4px 4px 4px 80px;
}

Merging & Displaying Checkboxes

This is an example of using the suppress property to process the checkbox value in a specific group unit.

Example

Merges and displays based on Column1. When the checkbox is selected, the data of the merged group is changed to the same value.

sample_grid_92.xfdl

Core features used in the example

suppress

The suppress property can be applied in the settings, except when the displaytype property value of the Cell object is "progressbarcontrol", "treeitemcontrol". In the case of "checkboxcontrol", the merge is processed based on the data value.

How to implement an example

Specify the property value for each column as follows. Since the suppress priority is set to Column1, the checkboxes are merged and displayed based on the value displayed in Column1.

== Column0
displaytype: checkboxcontrol
edittype: checkbox
text: bind:Column0
suppress: 2

== Column1
text: bind:Column1
suppress: 1

== CheckBox
text: bind:Column0

When the user selects the checkbox and changes the value, the value of the Column0 column is changed, and all Column0 column values in the same group are changed to the same value.

this.Dataset00_oncolumnchanged = function(obj:nexacro.NormalDataset,e:nexacro.DSColChangeEventInfo)
{
	if( e.columnid == "Column0" ){
		obj.enableevent = false;
		for(var i=0; i<obj.rowcount; i++)
		{
			if( obj.getColumn(e.row,"Column1") == obj.getColumn(i,"Column1"))
				obj.setColumn(i,e.columnid, e.newvalue);
		}	
		obj.enableevent = true;
	}
};

Displaying String Length Entered in Cell

Let us take a look at the function that immediately displays the length of the input string when using the TextArea type cell.

Example

The number of characters that can be entered and the number of characters that are entered are displayed in the form of the tooltip next to the cell area where text is being input.

sample_grid_101.xfdl

Core features used in the example

getEditingText

Returns the text value being input when editing the cell. Since it is returned only when editing, you need to use the getCellText method to get the length of the text that has already been entered.

getCellText

Returns the text value in the cell at the specified location. In the example, the getEditingText method is used during editing, and the getCellText method is used to display the text length immediately when the cell location is changed.

How to implement an example

In the example, add 3 Rows with no values set to demonstrate entering values in the empty area.

displaytype: textareacontrol
edittype: textarea

Keep the default value (-1) for the third column.

text: "0 / 10"
visible: false
border: 1px solid black
textAlign: center

Process the location of the Static component to be next to the cell when the cell location is changed for the TextArea type cell editing. If the textareamaxlength property value is not set, then process the length not to be displayed.

var maxlength = 0;

this.Grid00_oncellposchanged = function(obj:nexacro.Grid,e:nexacro.GridSelectEventInfo)
{
	if(this.Grid00.getCellProperty("body", e.cell, "edittype") == "textarea")
	{
		maxlength = this.Grid00.getCellProperty("body", e.cell, "textareamaxlength");
		if(maxlength == -1)
		{
			this.Static00.visible = false;
		}
		else
		{
			var objRet = this.Grid00.getCellRect(e.row, e.cell);
			var vL = this.Grid00.getOffsetLeft() + objRet.left + objRet.width;
			var vT = this.Grid00.getOffsetTop() + objRet.top;	
			
			this.Static00.move(vL, vT + 1);
			this.fn_checklength(e.row, e.cell);
			this.Static00.visible = true;		
		}
	}
	else 
		this.Static00.visible = false;
};

When entering the character string, check the number of characters and display it in the Static component.

this.Grid00_oninput = function(obj:nexacro.Grid,e:nexacro.InputEventInfo)
{
	this.fn_checklength();
};

this.fn_checklength = function(row, cell)
{
	var length = 0;
	if(this.Grid00.getEditingText())
		length = this.Grid00.getEditingText().length;
	else if(this.Grid00.getCellText(row, cell))
		length = this.Grid00.getCellText(row, cell).length;
	this.Static00.text = length + " / "+maxlength;
}

Applying Mask Character to Tree Format

Since there is only one displaytype property value that can be processed in the cell, the tree format and mask character cannot be applied at the same time. Let us take a look at how to apply the mask character using a separate function.

Example

It is expressed by applying the mask character to the tree format cell.

sample_grid_104.xfdl

Core features used in the example

getDisplayText

Returns the string value displayed on the screen. The MaskEdit component applies the format property, etc., and finally returns the string value displayed on the screen.

How to implement an example

displaytype: treeitemcontrol
edittype: tree
expr: comp.parent.fn_getMaskString(currow)

The MaskEdit component is not displayed on the screen and is only used to process mask characters.

format: @@@@-@@@@-{@@@@}
type: String
visible: false

Import the code column value, set it as the value property value of the MaskEdit component, and get and return the string displayed on the screen. The returned string is displayed in the Grid component.

this.fn_getMaskString = function(nRow)
{
	var nStr = this.Dataset00.getColumn(nRow,"code");
	this.MaskEdit00.value = nStr;
	var rtn = this.MaskEdit00.getDisplayText();
	return rtn;
};

Checking Merged Cell Checkbox

You can merge two or more cells to make them look like a single cell. However, even if the merged cell has child cells, it operates as a single cell, so you cannot edit it immediately. The example shows how to process checkboxes contained in merged cells.

Example

There are 3 Grid components merged in the same form, but each has different ways of processing checkboxes. The first Grid component does not react even when the checkbox area is selected, the second Grid component selects the checkbox when clicking anywhere in the cell area, and the third Grid component selects the checkbox when clicking the CheckBox control area.

sample_grid_105.xfdl

Core features used in the example

fromreferenceobject

Returns the object that is the starting point of the event. If there is child control, then it returns the child control object. In the example, the cells were merged, but because the child cells need to be maintained, the fromreferenceobject property returns the child control object.

How to implement an example

Select "Merge Cells (Having child Cells)" for the merge option. Make the checkbox control and text visible as-is.

Only change the header text to distinguish.

The two event functions look similar, but the third Grid component checks the value of the fromreferenceobject property of the GridClickEventInfo object and updates its column value only if it is "CheckBoxControl".

this.Grid02_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	if(this.Dataset00.getColumn(e.row, "Column0") == 1) 
		this.Dataset00.setColumn(e.row, "Column0", 0);
	else 
		this.Dataset00.setColumn(e.row, "Column0", 1);
};

this.Grid03_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	if(e.fromreferenceobject == "[object CheckBoxControl]")
	{
		if(this.Dataset00.getColumn(e.row, "Column0") == 1) 
			this.Dataset00.setColumn(e.row, "Column0", 0);
		else 
			this.Dataset00.setColumn(e.row, "Column0", 1);
	}
};