Adjusting Cell Size (Batch Adjustment of Row Size)

If there is a large amount of data in one cell in Grid, then it may not be possible to view the entire contents. In this case, if there is a function to freely adjust the column and row size as in Excel, the user can use Grid more conveniently.

In the cellsizingtype property, the pointer changes when the user moves the mouse over the border of the Cell or Head, and the size of the cell can be changed by pressing and moving the mouse button. The cellsizingtype property can be set to none, col, row, or both. If you set it to col then you can only change the width; if you set it to row then you can only change the height. If set to both, then both width and height can be changed. If set to none, then cell size cannot be changed.

Example

The following is an example of Grid that can change the size of columns and rows.

sample_grid_12.xfdl

Since the cellsizingtype property is set to both, you can change the size of both columns or rows. One thing to note here is that if you change the height of one row, then all row heights are applied the same. To adjust the height for each row separately, you need to set the extendsizetype property separately. Please refer to Adjusting Cell Size (Adjustment of Specific Row Size)for the explanation on this.

To change the width, move it while holding the mouse button when the pointer is changed at the border of Head Column. To change the height, move it while holding the mouse button when the pointer is changed at the border of each Row.

Core features used in the example

cellsizingtype

This is the property that allows the user to change the size of Row or Column with the mouse.

How to implement an example

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

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

1. Select Dataset from the toolbar and click on an appropriate space on the form to create Dataset.

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

Bind Dataset to the Grid component.

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

Select Grid and set the cellsizingtype property to both.

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

Check whether the width changes by dragging the border of the Head Column of Grid or the border of Cell of Grid with the mouse.

Adjusting Cell Size (Adjustment of Specific Row Size)

If there is a large amount of data in one cell in Grid, then it may not be possible to view the entire contents. In this case, if there is a function to freely adjust the column and row size as in Excel, the user can use Grid more conveniently.

The cellsizingtype property of Grid allows the user to change the size of the record by dragging the border between Cell and Head with the mouse. You can adjust the width only, height only, or both depending on the settings.

If you change one of the Cell heights, then all are applied together by default. To adjust the height per Cell, you need to set the extendsizetype property.

Example

The following is an example of Grid that can change the size of columns and rows.

sample_grid_13.xfdl

Since the extendsizetype property is set to row, you can freely change the height for each row.

To change the width, drag the border of Head Column with the mouse, and to change the height, drag the border of each Row with the mouse.

Core features used in the example

cellsizingtype

This is the property that allows the user to change the size of Row or Column with the mouse.

extendsizetype

This is the property that sets how to adjust the height of Row when the height of Row changes.

How to implement an example

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

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

1. Select Dataset from the toolbar and click on an appropriate space on the form to create Dataset.

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

Bind Dataset to the Grid component.

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

Set the cellsizingtype property to both and the extendsizetype property to row in the Properties window.

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

Drag the border of Head Column of Grid with the mouse to check whether the width changes.
Drag the border of Cell of Grid with the mouse to check whether the height changes.

Displaying Multiple Heads & Records

In some cases, there is a lot of information to be displayed in one record in Grid, or the width is too narrow, causing it to be difficult to output all on one screen. At this time, if you use the multiple heads and records of Grid, you can configure the screen more efficiently.

Example

The following is an example of using multiple heads and multiple records in the Head band and the Body band.

Email and Department Column are placed under Address and Company Column respectively to efficiently utilize the narrow horizontal width.

sample_grid_14.xfdl

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, place it on the form, and click it as-is to create it in the default size.

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

1. Select Dataset from the toolbar and click on an appropriate space on the form to create Dataset.

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

Bind Dataset to the Grid component.

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

1. Double-click the Grid component to open Grid Contents Editor.

2. Add Head row, Body row one by one. To add row, click the Add Head Row button and the Add Body Row button once each in Grid Contents Editor. The same context menu that allows you to add row is displayed even if you right-click in Grid Contents Editor.

3. Select each cell under Address, Company Column in the newly added head row, and enter EMail, Department in the text property.

4. Select Department, EMail Column that are no longer needed, and click the Delete button to delete them.

5. Select Cell of Body row3 corresponding to EMail, Department Column, and bind them to EMail, Department of Dataset according to each column.

6. Because of the addition of head row and body row, two rows of Name, Salary Column are created. Combine them into one. Select Cell to merge, and click the Merge Cells button to merge them into one Cell.

When Cell merging is completed, it will finally look like the following. Press the OK button.

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

Check that it is output as multiple heads and records.

Automatic Line Break & Cell Size Adjustment

If the length of the data is too long or consists of several lines than the size of Cell, the data may appear cut off. In this case, if you use the automatic line break and cell height adjustment function, it can be displayed in Grid regardless of the data length.

Automatic line break is the function that automatically performs line break of the data to fit the width of Cell so that the data is not cut off and visible when the data length is larger than the width of Cell. You can use the wordwrap property of Cell for the line break by character or word.

Automatic Cell height adjustment is the function that automatically sets the Cell height so that the data is not cut off when the data length is long or consists of multiple lines. You can use the autosizingtype property of Grid to set Column, Row.

Example

The following is an example of Grid with the automatic line break and automatic Cell height adjustment applied.

The automatic line break function looks different as follows depending on the setting of wordwrap. 1 is the case that the wordwrap property is set to char, and line break is applied to characters that exceed the width of Cell in the character unit. 2 is wordwrap the case that the wordwrap property is set to English, and line break is applied to characters that exceed the width of Cell in in the word unit.

The autosizingtype property of Grid is set to row, so even if the automatic line break occurs, then the height of Cell is automatically adjusted and the data is not cut off.

sample_grid_15.xfdl

Core features used in the example

autosizingtype

This is the property that sets whether to automatically adjust the size of Row, Column so that all data is displayed on 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, place it on the form, and click it as-is to create it in the default size.

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

1. Select Dataset from the toolbar and click on an appropriate 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 autosizingtype property to row in the Properties window.

1. Double-click Grid to open Grid Contents Editor.

2. Select row of the Body band corresponding to Address Column.

3. Set the wordWrap property to char as shown in the figure below.

4. Select row of the Body band corresponding to Department Column.

5. Set the wordWrap property to English as shown in the figure below.

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

Check that line break in the character unit is performed for Address Column of Grid and line break in in the word unit is performed for Department Column.

Check that the data with line breaks is not cut off in Grid.

Entering Multiple Lines in Head Column

Head Column of Grid is processed as a single line of text by default. However, there are times when the text is too long or you need to type it in multiple lines to make the text meaningful. Grid Contents Editor provides a way to enter multiple lines with simple keyboard input processing.

Example

The following is an example of Grid in which the text of Head Colum is entered in multiple lines using Grid Contents Editor.

In Grid, 1is processed into two lines and 2 is processed into three lines, so you can get the effect of reducing the horizontal size compared to Head Column of Grid consisting of one line.

sample_grid_16.xfdl

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, place it on the form, and click it as-is to create it in the default size.

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

1. Select Dataset from the toolbar and click on an appropriate 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.

Modify Address Column and Company Column of the Head band as shown below.

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

• Address Column Setting

Select 1Address Column of the Head band. Click the 2 button in the text property of the Properties window to open a small window where you can edit 3. Enter the following in order in 3.

After completing the input, check whether the corrections are reflected in the left Head Column as shown in the figure below.

• Setting of Company Column

Select 1Company Column of the Head band. Click the 2 button in the text property of the Properties window to open a small window where you can edit 3. Enter the following in order in 3.

After completing the input, check whether the corrections are reflected in the left Head Column as shown in the figure below.

When all modifications are complete, click the OK button to close Grid Contents Editor.

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

Check that Head Columns of Address and Company are displayed in two and three lines, respectively.

Frame Fixing - Column

Since the size of Grid increases in proportion to the amount of data, it is difficult to see all the data at once on the screen with a limited size. It is not inconvenient to move the scrollbar and view the data, especially when you need to compare and view data. In this case, if the data to be placed on the screen can be viewed by fixing it on one side of Gird, then the utility of the Grid can be further improved.

This function is called frame fixing. Frame fixing is the function that allows you to fix a specific Column or Row of Grid in one place regardless of scrolling. It is similar to the frame fixing function frequently used in Excel.

Grid does not support frame fixing by default, but you can implement the frame fixing function by using Band that divides Grid according to zones. The figure below shows the band section of Grid.

The part marked in red is the left, right bands, and Column belonging to this band is fixed and does not move.

One thing to note here is that the frame of Column or Row belonging to the body band cannot be fixed. In other words, Column, Row in the middle of Grid cannot be fixed, and only Column, Row on the left (left band), right (right band), top (head band), and bottom (summary band) of Grid change the band to which they belong for the frame fixing.

This chapter explains the frame fixing of Column.

Example

The following is an example of Grid in which Name and Salary Column are fixed.

Since Name, Salary Column indicated by the red boxes are set to the left, right bands respectively, and the frame is fixed, moving the scrollbar moves only Address, Company, Department Column located in the middle.

sample_grid_17.xfdl

Core features used in the example

band

This is the property that sets the band name to which Colum will belong in Grid. The left, right bands are displayed on the left and fight fixed areas of Grid respectively, and are fixed when scrolling and do not move.

To get or set the value of the band property, use the getFormatColProperty, setFormatColProperty methods respectively.

this.Grid00.setFormatColProperty( 0, "band", "left" );

How to implement an example

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

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

1. Select Dataset from the toolbar and click on an appropriate 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, 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 Name Column belonging to the Body band to the left band and Salary Column to the right band.

1. Double-click Grid to open Grid Contents Editor.

2. Select col0 that Name Column belongs to in the body band, and set the band property to left in the Properties window on the right.

3. Select col4 that Salary Column belongs to in the body band, and set the band property to right in the Properties window on the right.

4. Check that Name, Salary Column have been changed to the left, right bands, respectively, as shown in the red boxes in the figure below, and then click the OK button to complete the setting.

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

Move the scrollbar of Grid to check that Name Column on the left and Salary Column on the right are fixed and not moving.

Frame Fixing - Row

Since the size of Grid increases in proportion to the amount of data, it is difficult to see all the data at once on the screen with a limited size. It is not inconvenient to move the scrollbar and view the data, especially when you need to compare and view data. In this case, if the data to be placed on the screen can be viewed by fixing it on one side of Gird, the utility of the Grid can be further improved.

This function is called frame fixing. Frame fixing is the function that allows you to fix a specific Column or Row of Grid in one place, regardless of scrolling. It is similar to the frame fixing function frequently used in Excel.

Grid does not support frame fixing function separately, but you can implement the frame fixing function by using Band that divides Grid according to zones. Row frame fixing is automatically implemented without any additional setting simply by adding the row to the head or summary band.

The figure below shows the band section of Grid.

The parts marked in red are the head, summary bands, and Row belonging to these bands is fixed and does not move regardless of scrolling. Frame fixing is available for both the head and summary bands, but the purpose of fixing the frame is different from the left, right bands.

In the case of head, it is recommended to use it only for displaying the Column name. You can add the row to the head to display the result of data operation or the string, but it can be confusing from the perspective of viewing because it is visible in the head area. Therefore, the Row frame is not fixed in this area.

In the case of summary, it is generally used for displaying data-operated values or fixed strings, such as sum and average.

In conclusion, fixing the lower Row frame is not used to fix the Row data bound to Grid, but to fix the contents that should always be displayed on the grid. For reference, nothing is displayed, even if Dataset is bound to Row of the head, summary.

This chapter explains how to fix the lower Row frame.

Example

The following is an example of Grid in which Average (average value), Max (maximum value), and Min (minimum value) Row of Salary Column are added to the Summary band and the frame is fixed.

Since Average, Max, Min Row marked in the red box are added as the summary band, moving the scrollbar moves only Row belonging to the body band located in the middle.

sample_grid_18.xfdl

Core features used in the example

band

This is the read-only property that has the band name to which Row belongs in Grid. The head, summary bands are displayed in the upper and lower fixed areas of Grid respectively, and are fixed and do not move when scrolling.

To get the value of the band property of Row, use the getFormatRowProperty method.

var strBand = this.Grid00.getFormatRowProperty( 1, "band" );

How to implement an example

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

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

1. Select Dataset from the toolbar and click on an appropriate 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. Double-click Gird to open Grid Contents and add Average, Max, Min Row to the Summary band as shown in the figure below. If you click the button (Add Summary Row) in Grid Contents Editor, then Row is added to the Summary band.

2. Setting of Average, Max, Min Row

Set the properties of each cell as shown in the table below.

When all the settings are complete, click the OK button in Grid Contents Editor.

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

Move the scrollbar of Grid up and down to check that Average, Max, Min Row are fixed and not moving.

Moving Column Position

By setting the cellmovingtype property of Grid, the user can change the position of Column by dragging and dropping the mouse.

Example

The following is an example of Grid in which the cellmovingtype property is set to col. The user can move the position of Column to the desired location.

To move the position of Column, drag the Column header with the mouse and drop it on the Column header at the desired location. For example, if you drag the Department header and drop it on the Address header, then Department Column will be located at that location, and Address Column will be pushed one space to the right. When Column is moved to a new position, the position and all the columns to the right are pushed one by one to the right.

sample_grid_19.xfdl

Core features used in the example

cellmovingtype

This is the property that changes the Column order by dragging the Head area of Column in Grid.

How to implement an example

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

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

1. Select Dataset from the toolbar and click on an appropriate 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 Grid and set the cellmovingtype property to col in the Properties window on the right.

Run QuickView (Ctrl + F6) to check the result. Drag the header of Colum you want to change position with the mouse and drop it at the desired location.

Copying Format of Changed Column

This is similar to the example of Moving Column Position, but it is an example that utilizes the status information changed by the user.

Example

When dragging with the mouse to change the column position of the first Grid component and clicking the [Change] button, the changed column position is applied to the second Grid component.

sample_grid_43.xfdl

Core features used in the example

formats

When you bind the Dataset object to the Grid component in Nexacro Studio, the formats property is automatically created. This is information that is automatically generated with the information of the Dataset object. You can also specify the format information created directly.

getCurFormatString

When the column position of the Grid component is changed, the changed content is not reflected when checking the formats property value. To check the format information of the changed content, you must use the getCurFormatString method.

How to implement an example

Place two Grid components and add the Dataset object. Data of the Dataset object is specified as follows. Bind the same Dataset object to the two Grid components.

Place the Button component and write the onclick event function. Import the format information of the first Grid component and specify it as the formats property value of the second Grid component. At this time, the value obtained from the getCurFormatString method does not have the <Formats> tag, so add the corresponding tag.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var sFormatContents = this.Grid00.getCurFormatString();
	this.Grid01.set_formats("<Formats> "+sFormatContents+" </Formats>");
	
};

Run QuickView (Ctrl + F6) to check the result. Drag the column header of the first Grid component with the mouse to change its position. If you click the button, then you can see that the column position of the second Grid component has changed.

Checking Format Information

The format property value of the Grid component is set in the XML format. In Nexacro Studio, you can run the Grid Contents Editor to see which formatids are available, but you cannot check them while the application is running. In the example, we will take a look at the function to check the format information that can be used simply.

Example

When the button is clicked, the format information of the Grid component is displayed in the TextArea component.

sample_grid_49.xfdl

Core features used in the example

getFormatString

Returns format information as the string in the XML format. Since the returned string itself is not XML, it uses DOMParser to convert it to the XML document and checks the relevant information.

How to implement an example

Place the Grid component and then place the Button component and the TextArea component. In this example, the Dataset object is not created as only format information is used without binding.

Double-click the Grid component to run Grid Contents Editor. Select the [Add Head Row] item to add Head Row, and select the [Add Body Column] item to add 3 columns. Then, select the cell area of Head Row and specify the text property value.

Right-click on the default format and select the [Copy & Add Format] item from the context menu displayed. Rename the copied format and delete the third column.

When the Button component is clicked, the information specified as the format property value of the Grid component is imported and converted into XML format (parseFromString). Create the information corresponding to the "Format" tag in the form of a collection. Check the number of formats or ID information from the corresponding information.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var parser, xmlDoc;
	parser = new DOMParser();
	xmlDoc = parser.parseFromString(this.Grid00.getFormatString(), "text/xml");
	var formatList = xmlDoc.getElementsByTagName('Format');
	var formatStr = "== format info =="+"\n"
		+"format length: "+formatList.length+"\n"
		+"format id:"+this.getFormatid(formatList, formatList.length)+"\n"
		+"current format:"+this.Grid00.formatid;
	this.TextArea00.set_value(formatStr);
};

If there are multiple formats, then add another function to display the id information value.

this.getFormatid = function(arr, length)
{
	var str = "";
	for(var i=0;i<length;i++)
	{
		str += arr[i].getAttribute("id");
		if(i!=length-1) str += ", ";
	}
	return str;
}

Run QuickView (Ctrl + F6) and click the button to display the format information in the TextArea component.

Frame Fixing - Selected Column

You can use the frame fixing function when designing the screen. However, in some cases, you may need to allow the user to specify the frame fixing position. In this example, the function to fix the frame based on the selected column is explained.

Example

If you click the column head area you want to fix, then the column is changed to a fixed state.

sample_grid_52.xfdl

Core features used in the example

setFormatColProperty

This is the method that sets the column properties. You can specify 2 parameters, which are band, size. In the example, the band property is changed.

How to implement an example

Place the Grid component and create the Dataset object. In the example, the data of the Dataset object is not specified since we are only taking a look at the column fixing function.

Add one Head Row.

Then, combine Head row as shown below.

Configure it to be in the following format. The order is irrelevant. This is to check the function that operates in the state of combining two or more Head areas.

When the head area of the Grid component is clicked, the frame fixing function is enabled.

this.Grid00_onheadclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var iCnt=0;
	
    for (var j = e.cell; j >= 0; j--) 
    {
        var iColCur = this.Grid00.getCellProperty("Head", j, "col");
        var iCell = e.cell;
		
        for (var i = iCell; i >= 0; i--) 
        {
            if (this.Grid00.getCellProperty("Head", i, "row") == 0 
				&& iColCur == this.Grid00.getCellProperty("Head", i, "col")) 
            {             
                if (iCnt==0) 
                {
                    var iCol = this.Grid00.getCellProperty("Head", i, "col");					
                    var iSpan = this.Grid00.getCellProperty("Head", i, "colspan")-1;
                    var iTotCol = iCol + iSpan;                    
                    for (var k = 0; k <= iTotCol; k++)
                    {
                        this.Grid00.setFormatColProperty(k, "band", "left");
                    }
					for(var l = iTotCol;l<this.Grid00.getCellCount("head"); l++)
					{
					   this.Grid00.setFormatColProperty(k, "band", "body");
					}
                }
                iCnt++;
            } 
        }
    } 
};

Run QuickView (Ctrl + F6) and click the head area to check if the frame is fixed.

Limiting Column Resizing Function

You can allow the column size to be manually adjusted by the user. However, if it is adjusted too small, then it can be difficult to see the data, and this may limit some of its functionality.

Example

The user can resize the column, but if it is too small, then it will be resized to the specified size.

sample_grid_54.xfdl

Core features used in the example

oncolresized

This is the event that occurs when the column width is changed. You can check the size value before the change (oldvalue) or the changed size value (newvalue) through the GridSizeChangedEventInfo object.

How to implement an example

Place the Grid component and create the Dataset object. In the example, the data of the Dataset object is not specified since we are only taking a look at the function of changing the column size.

Set the cellsizingtype property value to "col" so that the column can be resized.

Add the function that fixes the column size to the specified size if it is smaller than the specified size when resizing the column. In the example, the size of the column is specified to 80.

this.Grid00_oncolresized = function(obj:nexacro.Grid,e:nexacro.GridSizeChangedEventInfo)
{
	this.Grid00.setFormatColProperty(e.formatindex,"size",e.newvalue);
	if( e.newvalue < 70 ){
		this.Grid00.setFormatColProperty(e.formatindex,"size",70);
		this.Grid00.formats = "<Formats>"+this.Grid00.getCurFormatString()+"</Formats>";
		obj.setFocus();
	}
};

Run QuickView (Ctrl + F6) to check how it changes when the column size is reduced.

Getting Column Title Text of Merged Head Area

If the column title (Head) area and the Body area are the same in the Grid component, then you can check the Head text of the column with column index information. However, if the Head column is merged, the index changes, and the desired information cannot be imported immediately. Let us find out how to check the column title in this case.

Example

Clicking the cell in the Body area displays the corresponding column title in the cell.

sample_grid_96.xfdl

Core features used in the example

getCellCount

Returns the number of cells. The merged cells are calculated as one.

getHeadValue

Returns the text property value of a specific cell in the Head band area. Returns the same value as getCellProperty("Head", i, "text").

How to implement an example

When clicking the cell, check the column title text in the Head area with the index information of the cell, and set the text as the text property value of the cell.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var str = this.fn_getHeadText(obj, e.cell);
	obj.setCellProperty("body", e.cell, "text", str);
};

this.fn_getHeadText = function(obj, nCell)
{
	for(j=nCell; j>=0; j--) {
		var nCellColIndex = obj.getCellProperty("Body", j, "col");
		var icell = obj.getCellCount("Head");
	
		for(i=icell; i>=0; i--) {
			if(obj.getCellProperty("Head", i, "row")==0 && nCellColIndex == obj.getCellProperty("Head", i, "col")) {
				return obj.getHeadValue(i);
			} else if(obj.getCellProperty("Head", i, "row")==1 && nCellColIndex == obj.getCellProperty("Head", i, "col")) {
				return obj.getHeadValue(i);
			}
		}
	}
}

Specifying Child Cell Property of Merged Cell

Let us take a look at how to select the child cells of merged cell and specify properties in Nexacro Studio.

Example

In the merged cell, the color property value of the lower child cell is displayed differently. Clicking the cell displays the color property value of the child cell in the Edit component.

sample_grid_97.xfdl

Core features used in the example

getSubCellProperty

Returns the property value of the sub-cell. You can check the values set in Nexacro Studio.

How to implement an example

Select the Body area and select [Add Body Row] from the context menu to add Row.

When clicking the cell, display the color property value of the second child cell in the Edit component with the cell index information.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	this.Edit00.set_value(obj.getSubCellProperty("body", e.cell, 1, "color"))
};