Copying/Pasting from Grid to Excel

When using a computer, the Copy (Ctrl+c) / Paste (Ctrl+v) functions through the system clipboard are often used for the convenience of use. Likewise, you can use copy/paste by implementing the function in Nexacro.

This chapter implements the function of copying/pasting the Grid data to applications such as Excel and Notepad in the system and explains how to do so.

Example

The following is an example of copying/pasting the Grid data into Excel.

Select Row of Grid by dragging with the mouse or using the keyboard by pressing Ctrl + c to copy it. Then, press Ctrl + v in Excel on the system to paste.

Since the selecttype property of Grid is set to multirow, you can only select in Row units.

sample_grid_30.xfdl

Core features used in the example

navigatorname

This is the read-only property with the browser name information.

setEventHandler

This is the method that changes the event function of Grid.

selectstartrow

This is the read-only property that has the Row index of the starting cell of the area selected in Grid.

selectendrow

This is the read-only property that has the Row index of the last cell of the area selected in Grid.

selectstartcol

This is the read-only property that has the Column index of the starting cell of the area selected in Grid.

selectendcol

This is the read-only property that has the Column index of the last cell of the area selected in Grid.

getFormatColCount

This is the method that returns the number of Columns defined in the format displayed on Grid.

getCellText

This is the method that returns the text value displayed in the cell at the location transmitted as the argument.

setClipboard

This is the method that saves data in the format specified in the system clipboard.

clearClipboard

This is the method that deletes the contents saved in the system clipboard.

keycode

This is the property that has the code value corresponding to the key entered by the keyboard.

ctrlkey

This is the property that checks whether the Ctrl key is pressed when the event occurs.

shiftkey

This is the property that checks whether the Shift key is pressed when the event occurs.

altkey

This is the property that checks whether the Alt key is pressed when the event occurs.

How to implement an example

Select the grid from the toolbar, and drag it to an appropriate size on Form to create it. If you just click on the form, then it will be created with 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 selecttype property to 'multirow' so that Grid can be multi-selected.

Select Form and write the onload event function as follows.

this.Form_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	this.copyPaste.addGrid(this.Grid00);	
};

Process key input, and implement the function that copies the Grid data to the system clipboard or the Textarea element depending on the browser with the script.

Create the copyPaste object to implement the function. The copyPaste object is configured with 4 methods, which are addGrid for key input processing, makeData for extracting selected Grid data, and copyGridCellData1, copyGridCellData for copying Grid data.

Please refer to the comments in the code below for a detailed description of each method.

this.copyPaste = {    

    //Checks the browser and sets the onkeydown event function for the browser.
    //Determines whether to use the clipboard (copyGridCellData1) or Textarea (copyGridCellData2) depending on the browser.
    addGrid: function(grid)
    {
        //When the browser is Nexacro Runtime or IE
        if (system.navigatorname == "nexacro" || system.navigatorname == "IE" ) 
        {
            //Registers onkeydown event function in grid
            grid.setEventHandler("onkeydown", this.copyGridCellData1(this), this);
        }
        //For other browsers
        else
        {
            //Create the Textarea element of HTML DOM and add it to the body element.
            var objTA = document.createElement("textarea");
            document.body.appendChild(objTA);

            //Registers onkeydown event function in grid
            grid.setEventHandler("onkeydown", this.copyGridCellData2(this, objTA), this);
        }

    },

    //Saves the data of the selected area in Grid to the variable.
    makeData: function(obj)
    {    
        var sBody = "";
        var sSpr = "    ";    //Enter Tab Vale
        var nStartrow = obj.selectstartrow;
        var nEndrow = obj.selectendrow;
        var nStartCol = obj.selectstartcol;
        var nEndCol = obj.selectendcol;

        //When selecttype is row or multirow
        //The selectstartcol, selectendcol values become -1.
        //Therefore, calculate the number of columns and set nStartCol and nEndCol.
        var nLoop = nStartrow.length;

        if(nStartCol == -1 && nEndCol == -1)
        {
            nStartCol = 0;
            nEndCol = obj.getFormatColCount()-1;
        }

        //copy cell data from selected cell
        for(var k=0; k < nLoop; k++)
        {

            for (var i = nStartrow[k]; i <= nEndrow[k]; i++) 
            {            
                for (var j = nStartCol; j <= nEndCol; j++) 
                {
                    if (j < nEndCol) 
                    {
                        sBody += obj.getCellText(i, j) + sSpr;
                    } 
                    else 
                    {
                        sBody += obj.getCellText(i, j) + "\r\n";
                    }
                }
            }        

        }

        return sBody;
    },

    //When IE or Runtime
    //When Ctrl + c is input, the selected data of Grid is copied to the clipboard.
    //The key values are ctrl=17, shift=16, alt=18, c=67.
    copyGridCellData1: function(pThis)
    {    
        return function(obj, e) 
        {
            //When the Ctrl key is pressed
            if (e.ctrlkey && !e.shiftkey && !e.altkey)
            {
                //When the c key is pressed
                if (e.keycode == 67)    //'c'
                {                    
                    var rtnStr = pThis.makeData(obj);

                    system.clearClipboard();                        
                    system.setClipboard("CF_TEXT", rtnStr);
                } 
            }
        }

    },


    //For browsers other than IE or Runtime
    //When Ctrl + c is input, the selected data of Grid is copied to Textarea.
    //The key values are ctrl=17, shift=16, alt=18, c=67.
    copyGridCellData2: function(pThis, objTA)
    {
        return function(obj, e) 
        {
            //When the Ctrl key is pressed
            if (e.ctrlkey && !e.shiftkey && !e.altkey)
            {
                //When the c key is pressed
                if (e.keycode == 67)    
                {
                    var rtnStr = pThis.makeData(obj);

                    objTA.value = rtnStr;
                    objTA.select();
                } 
            }

        }

    }//end of copyGridCellData2: function(pThis, objTA)    

}//end of this.copyPaste

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

Select Grid using the mouse and keyboard, copy it with Ctrl +c, and paste it with Ctrl + v in the system Excel. Check if all the selected items have been copied to Excel.

Finding Total/Subtotal

In Grid, you can use not only the function of expressing data in the form of a table but also the function of automatically calculating data if necessary. The operations supported by default include sum, average, count, and maximum/minimum values. The most frequently used of these is the sum. Sum refers to the total sum of columns, and subtotal is the sum of columns with the same value by the group.

This chapter explains how to find the total and subtotal of the column.

Example

The following Grid is an example of calculating subtotals for each group by calculating the total of the Salary column and grouping it with the Company column.

The total is displayed at the bottom of Grid, and the subtotal is displayed by creating a new Row under each group.

sample_grid_31.xfdl

Core features used in the example

expr

This is the property that sets the formula to be applied to the text property value of Cell in Grid.

getSum

This is the method to get the total of the column values or calculation expressions in the range specified in Dataset.

suppress

This is the property that sets the suppress function for Cell in Grid. The suppress function combines cells into one cell when multiple cells with the same value are repeatedly listed in one column.

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.set_keystring( "column0" );
this.Dataset00.set_keystring( "G:column0" );
this.Dataset00.set_keystring( "G:+column0-column1" );
this.Dataset00.set_keystring( "G:+column0,S:-column1" );

prop

This is the property that sets the type of values displayed in logical records grouped by the keystring property of Dataset.

displaytype

This is the property that sets the format in which data is displayed in Cell of Grid.

How to implement an example

Select the grid from the toolbar, and drag it to an appropriate size on Form to create it. If you just click on the form, then it will be created with 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 display format of the Salary column to currency. Open Grid Contents Editor and set the displaytype property of the Salary column to 'currency'.

To calculate and display the total, first decide which part of Grid to display, then calculate the total using expr or the script to display the result at that location. This sample displays the total in the summary band.

1. Add a new row to the summary band. Double-click Grid to open Grid Contents Editor, and right-click and select [Add Summary Row] from the context menu.

2. In order to display as TOTAL on Grid, combine col0 to col3 of the newly added row into one cell. After selecting cells from col0 to col3 as shown in the figure below, right-click and select the [Merge Cells] menu from the context menu. When cells are combined into one, set the text property of the combined cells to 'TOTAL'.

3. Select the col4 cell to display the total, and set the displaytype, expr properties as shown in the figure below. The script described in expr means to return the total of all Salary column values.

To calculate and display subtotals, first, need to determine and group the columns by which you want to subtotal. Then, use the prop property of Dataset to determine what operation to perform. This sample sets it to SUM as we need to find the subtotal.

1. Set the keystring property of Dataset00 to 'G:+Company' to create the group based on the Company column as in the sample. Here, 'G' means group and '+' means sort in ascending order.

2. To calculate the subtotal for each group, open Dataset Editor and set the type property of the Salary column to 'INT' and the prop property to 'SUM' as shown in the figure below. If you do not set the value for the prop property, then it operates as SUM.

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

Check that the data in Grid is grouped based on the Company column, subtotals are displayed for each group, and the total is displayed at the bottom of Grid.

Setting Subtotal Name & Background Color

In the previous Finding Total/Subtotal, we took a look at how to find totals and subtotals. For the total, there is the style defined for the Summary band area in the default theme so you can see it at a glance. However, in the case of subtotals, it is between the rows and there is no indication of subtotal, so the user cannot see at a glance. This is because there is no style defined for subtotals in the default theme. Subtotal is the logical result created by the Dataset operation, so it is difficult to define the style of the theme that is applied unconditionally because it cannot be predicted in which location and in what form. Therefore, the developer should analyze the contents of the dataset and set the style at the time of designing the screen.

This chapter explains how to set names and backgrounds for subtotals. For the example to be used, the ${sample}created in the previous chapter is used as-is. If there is no example sample, then refer to the previous chapter and create the Grid example with total/subtotal applied first.

Example

The following is an example of Grid calculating subtotals for each group by calculating the total of Salary Column and grouping with Company Column. The total is displayed at the bottom of Grid, and the subtotal is displayed by creating a new Row under each group.

sample_grid_31_style.xfdl

The name of the subtotal is set using the expr property of Cell. The expr script determines whether the Row is an ungrouped general Row or a subtotal Row created by grouping, and outputs the appropriate result. Whether it is the subtotal Row can be checked by the level value of Row. The general Row has the value of 0, and the grouped Row has the value of 1 or more.

The background color of the subtotal is set using the XCSS file that defines the cssclass property and style of Cell. The expr script determines whether the Row is a general Row or a subtotal Row, and if it is the subtotal Row, the class selector defined in XCSS is set in the cssclass property.

Core features used in the example

getRowLevel

This is the method that returns the level value of the specified Row when Dataset is grouped. The level value of the general Row is 0, and the grouped Row has the value of 1 or more depending on the degree of grouping.

cssclass

This is the property that applies the style of the class selector defined in the XCSS file to Cell. Enters the class selector name as the setting value.

expr

This is the property that applies the result value to the text property of Cell by entering the formula.

How to implement an example

Create Grid including Total/Subtotal by referring to Finding Total/Subtotal.

Since it is grouped by Company Column, output the subtotal name in the subtotal Row corresponding to the Company column.

1. Double-click Grid on the design screen to open Grid Contents Editor.

2. Select row1 Cell of the Body band area where data is output from Company Column and set the expr property.

The expr formula means that if the current Row level value is 1 in the dataset bound to Grid, then the string "SUBTOTAL" is output to the current Row, and if not, then the Row value of Company Column that should be displayed originally is output.

Whether the current Row is the subtotal row can be determined by the level value of Row. The level value has the value of 0 if it is the general Row, and the value of 1 or more if it is the grouped Row. The dataset in this example has the value of 1 because it is grouped only once by Company Column. The current Row index can be obtained using the currow variable, and the Row level value can be obtained with the getRowLevel method.

1. Create a new XCSS file by selecting [File> New> Nexacro Style Sheet(.xcss)] from the Menu.

Set the XCSS name, path, and application target as follows in the New Style Sheet window.

When you click the Finish button, the created XCSS file appears in Project Explorer as follows and automatically opens as Xcss Editor.

2. Click the Add Selector button to add a new selector in Xcss Editor.

3. Select the Grid component to define the style and click the Add button in the Add Selector window. This will create a new Grid selector with no content.

Since the target to apply the style to is Cell, which is the child of Grid, the selector type applied to Cell is .Grid .body .row .cell. In Xcss Editor, leave a space behind the .Grid selector and then enter the . to automatically output the child selector that can be entered to the context menu. Select body, row, and cell in order.

4. Add the class selector named subtotal after .Grid .body .row .cell. The class selector name set here is used when setting the cssclass property of the component on the form design screen.

.Grid .body .row .cell.subtotal

5. Use Xcss Editor to set the style of Cell to be applied to the subtotal.

Save the XCSS file after setting the background and font properties as follows. The user can also enter directly without using Xcss Editor.

To set the background color for subtotal Row, use the cssclass property. When the value is set in cssclass, it finds the class selector corresponding to the value set in the XCSS file and applies the defined style to the component.

1. Double-click Grid to open Grid Contents Editor and select all Cells of the Body band. If you set a specific property after multiple selections of one or more Cells, then you can set the properties of all the selected Cells to the same value at once.

2. Set the cssclass property as follows.

The set expr formula means that if the current Row level value is 1 in the dataset bound to Grid, "subtotal" is set in the cssclass property, otherwise it is not set. The "subtotal" value set in the cssclass property is the class selector name defined in grid_subtotal.xcss.

Run QuickView (Ctrl + F6) and check that the name and background color are set for the subtotal Row. It can also be checked on the design screen as soon as cssclass is set.

Representing in Tree Format

Tree in Korean language expression is the same as Tree in English. Trees take the shape of several branches extending out of one branch, and when expressing the relationship between data, the method of expressing in the same form as this tree is called the tree.

Grid organizes and displays a large amount of data in a table format. However, there are cases where it is better to express some data in tree format than in table format. An example would be an organizational structure. There can be a group, there may be multiple teams under the group, and again there may be multiple team members under that team. In this case, representing groups, teams, and team members in the tree format rather than in the table format can show the relationship more effectively.

The following is the navigation pane of Windows Explorer that shows the use of the tree well. Here, the tree is used as a way to show the structure of the directory.

As such, the tree is effective because the data relevance is at a glance, but the tree format is not suitable for data that are not related to each other. It is good to use the tree structure when data are related to each other and can be organized into parent and child relationships.

This chapter describes how to represent Grid in the form of the tree.

Example

The following is an example of setting Grid as the tree. You can operate the tree by using the (Expand) button and the (Collapse) button like the navigation pane of Windows Explorer.

The Level value is the value to set the depth of the tree. The lower the depth, the higher the node. In this example, the level values range from 0 to 2, where 0 means company, 1 means team, and 2 means team members.

sample_grid_32.xfdl

Core features used in the example

displaytype

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

edittype

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

treelevel

This is the property that sets the column to be used as the level value of the tree when Cell is in tree format.

textAlign

This is the property that sets the horizontal sorting method of the data displayed in Cell.

treeusecheckbox

This is the property that sets whether to show the checkbox when Cell is in tree format. To use the checkbox, you must also set the treecheck property of Cell.

How to implement an example

Select the grid from the toolbar, and drag it to an appropriate size on Form to create it. If you just click on the form, then it will be created with 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 treeusecheckbox property of Grid as follows to disable the checkbox. If nothing is set, then it is applied as 'true' and the checkbox is shown.

Open Grid Contents Editor and set Cell properties of the Label column as follows.

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

Check whether the tree is displayed properly according to the Level value (0 to 2). The smaller the value, the higher the tree.
Click the expand/collapse button to check the operation of the tree.

Editing in Tree

When Grid is made in the form of the tree, it cannot be edited because the edittype property is set to the tree. To edit the tree format Grid Cell, you need to make the column editable using the Cell event.

This chapter describes how to edit Grid Cell when Grid is made in tree format.

Example

The following is an example of Grid set in tree format. However, unlike general trees, it is designed to be editable, so you can edit the contents by double-clicking Cell.

sample_grid_33.xfdl

Core features used in the example

edittype

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

setCellProperty

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

editautoselect

This is the property that sets whether to select all text automatically when the edit area of Cell is enabled.

autoenter

This is the property that sets to automatically change to edit mode when Cell is selected when the edittype property is set.

setCellPos

This is the method that moves the focus to a specific Cell. In the example, when Cell is double-clicked, the focus is specified again so that it can be edited immediately.

How to implement an example

Select the grid from the toolbar, and drag it to an appropriate size on Form to create it. If you just click on the form, then it will be created with 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 treeusecheckbox property of Grid as follows to disable the checkbox. If nothing is set, then it is applied as 'true' and the checkbox is shown. Set the autoenter property to change to the edit mode immediately when the focus is on the corresponding Cell.

Open Grid Contents Editor and set Cell properties of the Label column as follows.

Write the event function that processes conversion to edit mode when Cell is double-clicked.

this.Grid00_oncelldblclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	//if tree cell column
	if(e.col == 0)
	{
		var nCellIdx = this.Grid00.currentcell;
		this.Grid00.setCellProperty("body", nCellIdx, "edittype", "normal");
		this.Grid00.setCellPos(nCellIdx);
	}
	
};

Write the event function that processes changing the Cell contents and then changing the selection area so that it appears in the tree format.

this.Grid00_onselectchanged = function(obj:nexacro.Grid,e:nexacro.GridSelectEventInfo)
{
	var nCellIdx = this.Grid00.currentcell;
	this.Grid00.setCellProperty("body", nCellIdx, "edittype", "tree");
	
};

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

Double-click the tree Cell to see if it changes to edit mode. After editing, click another cell or press the Enter key to see if the changed contents are reflected and changed back to the tree format.

Sorting Using Header Event

Sorting refers to arranging data in a certain order according to conditions. Sorting is essential to make it easier for the user to find the desired data, especially when displaying large amounts of data in the grid.

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 each header Cell, then ascending order (▲) and descending order (▼) are displayed in the header Cell, and the corresponding column is sorted.

sample_grid_34.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. When setting the argument, you must specify the group type, where 'S' means sort and 'G' means group. If the group type is omitted, then 'G' is applied as the default value.

this.Dataset00.set_keystring( "S:column0" );
this.Dataset00.set_keystring( "S:column0+column0" );
this.Dataset00.set_keystring( "G:+column0,S:-column1" );

objects

This is the property that has the list of all objects (components) registered in the form. As an array type, you can access each object as follows.

var object1 = this.objects[2];
var object2 = this.objects["Grid00"];

getCellCount

This is the method that returns the number of Cells defined in a specific band in Grid.

var nCount = this.Grid00.getCellCount( "head" );

getCellText

This is the method that returns the Cell Text property value of a specified location.

/* Returns the Text value of the second Cell in the first Row of the Body band */
var strText = this.Grid00.getCellText(0, 1);

getCellProperty

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

setCellProperty

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

split

This is the method that divides the string into multiple substrings and returns it as an array.

substr

This is the method that cuts and returns the string of the specified length from the specified location in the string.

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 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 in Form and add the onheadclick event function as follows.

this.Grid00_onheadclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var objDs = this.objects[obj.binddataset];
 										
	for (var i = 0; i < obj.getCellCount("head"); i++)
	{		
		var sHeadText = obj.getCellText(-1, i);
        var nLen      = sHeadText.length - 1;
		
		/* In case of the clicked head cell */
		if (i == e.cell)
		{
            var sColId = (obj.getCellProperty("body", e.col,"text")).toString().split(":");
			
			/* If the previous sort in ascending order, it will be sorted in descending order */
			if (sHeadText.substr(nLen) == "▲") 
			{
				obj.setCellProperty( "head", i, "text", sHeadText.substr(0, nLen)+ "▼");
				objDs.set_keystring("S:-" + sColId[1]);
			}
			/* If the previous sort in descending order, it will be sorted in ascending order */
			else if (sHeadText.substr(nLen) == "▼") 
			{
				obj.setCellProperty( "head", i, "text", sHeadText.substr(0, nLen)+ "▲");
				objDs.set_keystring("S:+" + sColId[1]);
			}
			/* If first sort, it will sort in ascending order */
			else 
			{
				obj.setCellProperty( "head", i, "text", sHeadText+"▲");
				objDs.set_keystring("S:+" + sColId[1]);
			}
		}
		/* In case of it's not the clicked head cell */
		else
		{

			/* Remove the arrow indication is displayed in the head cell which are arranged previously */
			if (sHeadText.substr(nLen) == "▲" || sHeadText.substr(nLen) == "▼") 
			{
				obj.setCellProperty( "head", i, "text", sHeadText.substr(0, nLen));
			}

		}
	}		
};

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

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

Selecting/Deselecting All

When using Grid, you may have to select and process only necessary data. In this case, you can conveniently select data by using the checkbox function of Grid.

Data selection in Grid is the basic function of the checkbox, so no special processing is required, but in the case of selecting/deselecting all data, the function must be implemented with the script.

This chapter describes how to select/deselect all Grid checkboxes.

Example

The following is an example of Grid set with the checkbox.

You can select/deselect all by clicking the checkbox in the head column.

sample_grid_35.xfdl

Core features used in the example

displaytype

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

edittype

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

onheadclick

This is the event that occurs when Cell in the Head area is clicked on Grid.

getRowCount

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

setColumn

This is the method that changes the value corresponding to Column of Row specified in Dataset.

getCellProperty

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

setCellProperty

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

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 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. Open Grid Contents Editor and delete the Check column.

2. Create a new column to display the checkbox on the far left of Grid. To create a column, use the Add Left Column menu as follows.

3. Set the properties of the head cell of the newly created column as follows.

4. Set the properties of the body cell of the newly created column as follows.

Select Grid, create the onheadclick event function, and write the script as follows.

this.Grid00_onheadclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
    //Calls the gf_setCheckAll function when the first head column set as the checkbox is clicked.
    if(e.cell == 0)
    {
        this.gf_setCheckAll(obj, e);
    }
};

Write the function that processes selection/deselection of all checkboxes as follows.

this.gv_isCheckAll = 0;
this.gf_setCheckAll = function(obj:Grid, e:GridClickEventInfo)
{
    var strColID = obj.getCellProperty("body", e.cell, "text").replace(/bind:/i, "");

    //If the checkbox is checked, uncheck it
    //Check if not checked
    this.gv_isCheckAll = (this.gv_isCheckAll ? 0 : 1);

    //Turn off the Dataset event
    //this.Dataset00.enableevent = false;

    //check to body column
    for(var i=0; i< this.Dataset00.getRowCount(); i++)
    {
        this.Dataset00.setColumn(i, strColID, this.gv_isCheckAll);
    }

    //check to head column
    obj.setCellProperty("Head", 0, "text", this.gv_isCheckAll);

    // Turn on the Dataset event
    //this.Dataset00.enableevent = true;

}

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

Click the head cell of Grid set as the checkbox to check whether all selection/deselection operates.

Copying/Pasting between Grids

When using a computer, the Copy (Ctrl+c) / Paste (Ctrl+v) functions are often used. Likewise, you can use copy/paste by implementing the function in Nexacro.

In general, copy/paste when using a computer uses a temporary memory space provided by the OS called the clipboard. However, in the web environment, there are restrictions on using the clipboard provided by the OS due to security issues. Therefore, the developer needs to first figure out what kind of environment it is and then implements the copy/paste function. For example, in the case of Nexacro runtime or Internet Explorer, you can use the clipboard. However, other browsers do not allow access to the clipboard, so a separate temporary storage space such as variables or components must be provided in the script.

This chapter implements the function of copying/pasting data between Grids and describes how to do so.

Example

The following shows an example of copying/pasting Row from Grid to Grid.

sample_grid_37.xfdl

The copy/paste operation is the same as the operation in Windows. First, select Row you want to copy from Grid above, and then type Ctrl + c. Then, click the location you want to paste in another Grid and paste it with Ctrl + v.

To delete, first select Row you want to delete and then press the Delete key.

In this example, it was processed in Row units, but depending on the implementation of the function, it can be operated in Col units or areas.

Core features used in the example

selectstartrow

This is the read-only property that has the Row index of the starting cell of the area selected in Grid.

selectendrow

This is the read-only property that has the Row index of the last cell of the area selected in Grid.

selectstartcol

This is the read-only property that has the Column index of the starting cell of the area selected in Grid.

selectendcol

This is the read-only property that has the Column index of the last cell of the area selected in Grid.

getCellValue

This is the method that returns the value set in the text property of Cell in the corresponding location.

getCellCount

This is the method that returns the number of Cells defined in a specific band in Grid.

getCellPos

This is the method that returns the index value of Cell. Cells defined in each band have Cell indices sequentially from top left to bottom right, so this can be used as the location value.

getCellProperty

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

getRowCount

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

deleteRow

This is the method that deletes Row specified in Dataset.

rowposition

This is the property that has the index value of the currently selected Row in Dataset.

setColumn

This is the method that changes the value corresponding to Column of Row specified in Dataset.

keycode

This is the property that has the code value corresponding to the key entered by the keyboard.

ctrlkey

This is the property that checks whether the Ctrl key is pressed when the event occurs.

split

This is the method that divides the string into multiple substrings and returns it as an array.

substr

This is the method that cuts and returns the string of the specified length from the specified location in the string.

How to implement an example

Place two Grid components from the toolbar appropriately as shown in the example figure. Repeat the Grid creation task once more to place two Grids on the form.

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. Since you need to create two Datasets to be bound to Grid00 and Grid01, repeat the same task once more.

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

Create only Column and do not enter data.

Bind Dataset to the Grid component. Drag and drop Dataset in the Invisible Objects area to the Grid component created on Form and bind it.

Bind Dataset00 to Grid00 and Dataset01 to Grid01.

Write the onkeydown event function of Grid as follows. Since it will be used in common with both Grids, connect the Grid_onkeydown event function for both Grids.

Please refer to the comments for a detailed explanation of the script.

var Buff = null;

this.Grid_onkeydown = function(obj:nexacro.Grid,e:nexacro.KeyEventInfo)
{
    //Check if the Ctrl key has been pressed
    if (e.ctrlkey)
    {
        //Check if the c key is pressed while the Ctrl key is pressed
        if (e.keycode == 67)
        {
            //Get column, row information currently selected in Grid
            var nStartrow = obj.selectstartrow;
            var nEndrow = obj.selectendrow;
            var nStartCol = obj.selectstartcol;
            var nEndCol = obj.selectendcol;

            //Variable to temporarily store data
            var sClip = "";
            var sSpr  = "    ";

            /*
            In the case of selecting multirow, set the number of times to execute the iteration statement.
            In selectstartrow, selectendrow, selected row information is stored in an array format
            */
            var nLoopCnt = nStartrow.length;

            /*
            In the case of row unit selection, column information is displayed as -1.
            Therefore, set as the starting and ending index values of the actual column.
            */
            if(nStartCol == -1 && nEndCol == -1)
            {
                var objDs    = this.objects[obj.binddataset];    

                nStartCol = 0;
                nEndCol = objDs.colcount-1;
            }

            //Extract the data of the selected Row
            for(var k=0; k < nLoopCnt; k++)
            {
                for (var i = nStartrow[k]; i <= nEndrow[k]; i++) 
                {
                    for (var j = nStartCol; j <= nEndCol; j++) 
                    {                
                        if (j < nEndCol) 
                        {
                            sClip += obj.getCellValue(i, j) + sSpr;
                        } 
                        else 
                        {
                            sClip = sClip + obj.getCellValue(i, j) +  "\n";
                        }
                    }
                }

            }

            //Copy the extracted data to Textarea
            Buff = sClip.substr(0, sClip.length-1);        
        }

        //Check if the v key is pressed while the Ctrl key is pressed
        else if (e.keycode == 86)
        {
            var nIndex = 0;
            var objDs = this.objects[obj.binddataset];
            var nCellCnt = obj.getCellCount("body");
            var nCellPos = obj.getCellPos();
            var nRowPos = objDs.rowposition;

            /*
            Receive the value stored in the Buff variable as the variable. Based on the newline character,
            Cur and save in the form of an array
            */
            var sClip = Buff;
            var arrRow = sClip.split("\n");
            var arrCol = new Array();

            for (var i = 0; i <arrRow.length; i++) 
            {                
                /*
                Cut Row based on the tab character and save it in an array form
                */
                arrCol = arrRow[i].split("    "); //tab

                /*
                If Row to paste based on the current Row position is larger than the current Row
                Add an empty Row
                */
                if (objDs.getRowCount() <= nRowPos) 
                {
                    objDs.addRow();
                }

                /*
                Paste Row at the currently selected Row position
                */
                for (var j = 0; j < objDs.getColCount(); j++) 
                {    
                    objDs.setColumn(nRowPos, j, arrCol[nIndex++]);
                }                

                /*
                Move the position to the next Row to paste
                */
                nRowPos++;
                objDs.set_rowposition(nRowPos);
                nIndex = 0;
            }            
        }
    }

    //Check that the Delete key has been pressed
    if (e.keycode == 46)
    {
        var objDs = this.objects[obj.binddataset];

        // Gets the row information currently selected in Grid.
        var nStartrow = obj.selectstartrow;
        var nEndrow = obj.selectendrow;

        /*
        In the case of selecting multirow, set the number of times to execute the iteration statement.
        In selectstartrow, selectendrow, selected row information is stored in an array format
        */        
        var nLoopCnt = nStartrow.length;

        //Delete the selected Row
        for(var k=nLoopCnt; k >= 0; k--)
        {
            for (var i = nEndrow[k]; i >= nStartrow[k]; i--) 
            {                
                objDs.deleteRow(i);
            }        
        }
    }

}

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

After selecting Grid using the mouse and keyboard, copy it with Ctrl +c and paste it with Ctrl + v to another Grid.

Select Row and press the Delete key to check that it is deleted.

Implementing Page Function

If there is a lot of data in Grid and it cannot be displayed all at once, then it is convenient to view the data at a glance by dividing it into pages by several units.

Example

The following is an example of Grid that adds the page function to effectively view a large amount of data.

Pressing the Inquire button at the top loads the data in Grid and displays the pages divided so that you can see 10 at a time. If you look at the page navigation bar at the bottom, the you will see the Prev button that moves to the front page, the Next button that moves to the back page, and the number button that moves directly to the page.

If you operate the Inquire button once, then it will disappear after loading the data. This is because the button is invisible so that data loading cannot be performed repeatedly.

sample_grid_38.xfdl

Core features used in the example

visible

This is the property that sets whether to display the component on the screen. If set to false, then it will not be displayed on the screen.

filter

This is the method that filters the data loaded into Dataset so that only data that meets the conditions can be viewed.

clearData

This is the method that deletes all data (Row) except for the column information of Dataset.

copyData

This is the method that copies the data (Row) of Dataset specified as the argument to the current Dataset.

getRowcount

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

How to implement an example

Create one grid component and create the button to be used for data search.

Create the navigation bar to use to change pages as follows.

Create the Div component to use as the base of the navigation bar, and create 12 Static components inside Div to use as page selection buttons. The created Static components are set from the front as shown in the table below.

After creating 2 Datasets with the list of data items to be displayed on Grid, set the IDs to ds_server, ds_client respectively. ds_server is assumed to be data downloaded from the server through the transaction, and ds_client is used in UI by binding to Grid. This example assumes the transaction with the server.

1. When entering data into ds_server, the amount of data to be entered is large, so use Dataset Source Editor, which can directly input data in the XML format. Dataset Source Editor is displayed by double-clicking Dataset to open Dataset Editor and then clicking the Source tab at the bottom.

Copy/paste the XML data of the following link at once using Dataset Source Editor.

2. Enter data into ds_client. Double-click Dataset to open Dataset Editor and enter only the column without entering data as follows.

Drag and drop ds_client to the Grid component to bind it. Since there is no data, only the column name is displayed.

Open Grid Contents Editor and set the head columns and body columns as follows.

Create the onclick event function of the Inquire button and write it as follows.

/*
list inquire
*/
this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	obj.set_visible(false);
	this.div_page.set_visible(true);
	
	/* transaction call */
	
	this.fn_callback("tr1", 0, "success");	
};

This example can also be used in actual situations by writing the code that calls the transaction function in the comment section written as transaction call in the middle of the example code.

Create the onclick event functions for each component in the navigation bar created with the Div and Static components.

If you look at the following code, then you will notive there are three onclick event functions. div_page_stt_onclick connects all numbered buttons from 1 to 10, and div_page_stt_prev_onclick, div_page_stt_next_onclick connect with the Prev and Next buttons, respectively.

/*
click event function for page number(1~10)
*/
this.div_page_stt_onclick = function(obj:Static,  e:nexacro.ClickEventInfo)
{
	var iNo = new Number(obj.text);
	var iFirstNum = (iNo-1) * this.gv_iMaxPageNum + 1;
	var iLastNum = iFirstNum + this.gv_iMaxPageNum;

	this.fn_SetStyle();
	obj.set_color("red");
	
	this.ds_client.filter("");
	this.ds_client.filter("ROWNO >= " + iFirstNum+" && ROWNO < " + iLastNum);
}

/*
click event function for prev
*/
this.div_page_stt_prev_onclick = function(obj:Static,  e:nexacro.ClickEventInfo)
{

	this.gv_iStartPageNo = this.gv_iStartPageNo - 1;
	
	/* transaction function call */
	
	this.fn_callback("tr1", 0, "success");
}

/*
click event function for next
*/
this.div_page_stt_next_onclick = function(obj:Static,  e:nexacro.ClickEventInfo)
{

	this.gv_iStartPageNo = this.gv_iStartPageNo + 1;
	
	/* transaction function call */
	
	this.fn_callback("tr1", 0, "success");
}

At the top of the script, declare the variables as follows. The following variables are used as initial settings, and if you change these values, then the screen is reconfigured accordingly.

this.gv_iStartPageNo    = 0;		/* current page number */
this.gv_iUnitSelRowNo   = 100;	/* number of rows to retrieve when server is called once */
this.gv_iStartSelRowNo  = 1;		/* row number to start when calling server */
this.gv_iMaxPageNum     = 10;	/* maximum page number to display on screen */
this.gv_iServerRowCount = 0;	/* number of rows retrieved from the server */

The following is the function to set the button of the Page navigation by the user control.

/*
page number setting
*/
this.fn_SetPageNo = function()
{
	var sPage = this.gv_iStartPageNo * this.gv_iMaxPageNum;
	
	/* prev button setting */
	if (this.gv_iStartPageNo < 1)
	{
		this.div_page.form.stt_prev.set_visible(false);
	} 
	else 
	{
		this.div_page.form.stt_prev.set_visible(true);
	}

	/* next button setting */
	if (this.gv_iServerRowCount < this.gv_iUnitSelRowNo)
	{
		this.div_page.form.stt_next.set_visible(false);
	}
	else
	{
		this.div_page.form.stt_next.set_visible(true);
	}

	/* page button setting */
	for (var i = 0; i < this.gv_iMaxPageNum; i++)
	{
		this.div_page.form.components["stt_"+i].set_visible(true);
		
		this.div_page.form.components["stt_"+i].set_text(sPage+i+1);
		
		if (this.gv_iServerRowCount < (i * this.gv_iMaxPageNum))
		{
			this.div_page.form.components["stt_"+i].set_visible(false);
		} 
		else 
		{
			this.div_page.form.components["stt_"+i].set_visible(true);
		}
	}	
}

/*
style settings
*/
this.fn_SetStyle = function()
{
	for (var i = 0; i < this.gv_iMaxPageNum; i++)
	{
		this.div_page.form.components["stt_"+i].set_color("blue");			
	}	
}

Write the callback function to process the data received from the server.

It is the callback function that is called for post-processing after the transaction is completed, but since the actual transaction is not used in the example, it is randomly called and used at the location where the transaction function is called.

The code in lines 26 to 28 is the code that copies the data from ds_server to ds_client. This is the necessary part because it is assumed that the data of the server is stored in ds_server in advance and the transaction is performed. This code is not necessary for the actual transaction situation.

/*
callback function
*/
this.fn_callback = function(sTrId, ErrorCode, ErrorMsg)
{
	if (sTrId == "tr1")	
	{
		if (ErrorCode < 0)
		{
			trace("Error");
		}
		else
		{
			var iLastRow = this.gv_iStartPageNo * this.gv_iUnitSelRowNo;
			this.ds_server.filter("ROWNO >= "+(iLastRow + this.gv_iStartSelRowNo)+" && ROWNO <= "+(iLastRow + this.gv_iUnitSelRowNo));
		
			if (this.ds_server.getRowCount() == 0)
			{
				alert("No more data to view.");
				this.ds_server.filter("");
				return;
			}
			else
			{
				/* if transaction call using, delete the three lines below */
				this.ds_client.clearData();
				this.ds_client.copyData(this.ds_server, true);
				this.ds_client.filter("ROWNO >= "+(iLastRow + this.gv_iStartSelRowNo)+" && ROWNO <= "+(iLastRow + this.gv_iMaxPageNum));
								
				this.gv_iServerRowCount = this.ds_server.getRowCount();
				this.fn_SetStyle();
				this.fn_SetPageNo();
				
				this.div_page.form.stt_0.set_color("red");
			}
		}
	}
}

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

Press the Prev, number, and Next buttons on the page navigation to check whether the data is displayed normally according to the page movement.

Implementing Simple Survey in Grid

In addition to short answer questions or choosing a specific answer among survey items, the most frequently used is the method of scoring the items. For example, after visiting a restaurant, you can conduct a survey that selects a score from 1 to 5 about the service, price, or taste.

In order to implement this method in the Grid component, you can specify the value of the edittype property as 'text" to directly enter the value, or you can specify the value as "combo" to select the value. However, it is difficult to check what value the user needs to enter for the direct input, and the combo box method is inconvenient as you need to select the item by opening the combolist. In the example, the edittype property value is set to "checkbox" and implemented so that the user can participate in the survey simply by checking the corresponding score.

Example

The actual data has only 3 values, Restaurant, Service, and Value. You can check the score of 1 to 3 points for evaluating the service and price of the restaurant. When the corresponding score is checked in Grid above, it is reflected in Dataset and in the other Grid component bound (Grid at the bottom is placed so that you can see the data change).

sample_grid_40.xfdl

Core features used in the example

setColumn

Specifies Row, Column to the Dataset object and changes the value. Row can be specified by index only, and the Column item can be specified by index or column name. In the example, when a specific cell is clicked, the column name to be changed according to the cell location is specified.

currow

This is one of the variables that can be used when the expression (expr) is supported when specifying the property value of the GridCellControl object. Returns the current row position as the index value. You can check the list of variables supported by the GridCellControl object help item.

How to implement an example

Place two Grid components up and down, and add Dataset. Dataset has Column, Row information as shown in the figure below.

Bind Dataset created earlier to the two Grid components. Since the lower Grid component is used to check the data of Dataset, it remains bound as-is. However, in the upper Grid component, to create the survey format, double-click the corresponding grid or right-click and select [Edit] from the context menu to run Grid Contents Editor.

The order of adding Rows and Columns in Grid Contents Editor does not mean much. You can proceed the way you are comfortable with. In the example, Head Row was added first. Since each score of the Service, Value items is displayed as a column, 2 lines must be displayed in Head Row.

Add 4 columns. The Add Column menu is the method of adding a column after the last column. If you want to add a column at a specific location, then use the Insert menu. In the example, since everything except the Restaurant column will be modified, it does not matter which method you use.

Merge Head Row items as shown in the figure below. It is not necessary to maintain individual Child Cells because it is for showing on the screen. The code shown in the figure below is the code created after merging.

After merging, in Head row1 item, enter 1, 2, 3 score values as text property values under the Service, Value items.

Specify the Cell property value corresponding to each score. Set the displaytype property value to "checkboxcontrol" and the edittype property value to "checkbox". Then, add a little processing for the text property value to not show the column value of Dataset as-is.

Since Dataset contains only the Service, Value item scores, you need to determine which checkbox should be displayed as checked. Use the formula (expr) to display only the checkboxes of Cells corresponding to the same score as checked.

Enter the text property value directly or enter it after executing the [Edit Expression Value] window. When entering the text property value directly, you must enter the text "expr:". If you open the [Edit Expression Value] window after clicking the button (Set Expression) at the far right of the property window, you only need to enter the formula.

The formula must contain the desired expression on a single line, so use the ternary operator instead of the if statement. The ternary operator executes the conditional expression and returns the value if the conditional expression is true and false. In the example, the getColumn method is used to check whether the Service column value of the current Row is 1. If 1 is correct, it returns 1, otherwise, it returns 0. Therefore, if the condition is met, then the checkbox is checked and if not, then it is displayed as unchecked.

In Cell displaying 2 points and 3 points, it checks whether the column value is 2 or 3 and returns 1 or 0 value.

expr:dataset.getColumn(currow, "Service")==1?1:0
expr:dataset.getColumn(currow, "Service")==2?1:0
expr:dataset.getColumn(currow, "Service")==3?1:0

It is the same for the Value column. Only the column values are different, and the rest use the same expression.

expr:dataset.getColumn(currow, "Value")==1?1:0
expr:dataset.getColumn(currow, "Value")==2?1:0
expr:dataset.getColumn(currow, "Value")==3?1:0

Now, the score value in Dataset can be displayed in the form of the checkbox in the Grid component.

Although showing the score on the screen was processed, if the checkbox is clicked, then nothing happens. This is because the checkbox and the Dataset column values are not directly bound. The value of the checkbox is 1 or 0, but the value that must be entered in Dataset is from 1 point to 3 points, so they do not even match.

Add the oncellclick event to the Grid component and update the Dataset column value with Column, Row information when Cell is clicked. In the example, since you can check which score of item it is by using the Column information, the value is specified as follows.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	if(e.col>0 && e.col<4)
	{
		this.Dataset00.setColumn(e.row, "Service", e.col);
	}	else
	if(e.col>=4 && e.col<7)
	{
		this.Dataset00.setColumn(e.row, "Value", e.col-3);
	}	
};

Run it with QuickView (Ctrl + F6) and check whether the score is displayed in the upper Grid component or the data is reflected when clicking the empty checkbox Cell.

Implementing a simple survey in Grid (use radioitem)

In the example of implementing a simple survey in Grid, the edittype property value is set to "checkbox" and used like radio. This example implements a simpler example using the newly added radioitem type.

Example

The actual data has only 3 values: Restaurant, Service, and Value. You can check the score from 1 to 3 to evaluate the service and price of the restaurant. If you check the corresponding score in the Grid component above, it is reflected in the Dataset object and other bound Grid components (the Grid component at the bottom is placed so that you can see the data change).

sample_grid_108.xfdl

Core features used in the example

displaytype

You can set the property value to "radioitemcontrol". If the data bound to the text property value matches the radioitemcodevalue property value, it is displayed as selected. If the values are different, it is displayed as unselected.

edittype

The property value can be set to “radioitem”. When the cell area is clicked, it is displayed as selected and the bound data is changed to the radioitemcodevalue property value.

radioitemcodevalue

Sets the value to be processed as a selected state as a string. In this example, Service and Value scores are set to the radioitemcodevalue property values of each cell.

How to implement an example

The Dataset object has Column and Row information as shown in the figure below.

Add a Head Row, a Body column, and merge the cells displaying the title so that it looks like the format below. Enter the score (1, 2, 3) as the text property value under the Service and Value in head row1.

Select all the cells of the body row2 item from the col1 column to the col6 column (do not include col0 column cell), and then set the displaytype and edittype property values in the property window as follows.

Now select the cells of the body row2 item from col1 column to col3 column corresponding to the service item, and set the text property value to "bind:Service" in the property window. Then select the cells of the body row2 item from col4 column to col6 column corresponding to the Value item, and set the text property value to "bind:Value" in the property window.

The radioitemcodevalue value must be set to the value of the bound Dataset object so that the cell at the location is displayed as selected. Select the cell corresponding to each score and set the corresponding score as follows.

Paging Processing Using Mouse Wheel Motion

This is one of the ways to process only the data displayed on the screen without processing all data at once when there is a lot of data. When loading the first time, it shows the specified data and adds the data to be displayed when the mouse wheel is moved.

Example

When the button is clicked, 10 data points are shown. When the mouse wheel is moved, data in units of 10 is added and displayed.

sample_grid_47.xfdl

Core features used in the example

filter

Uses only data that satisfies the conditions among the data of the Dataset object. It does not delete or control the data itself.

onvscroll

This is the event that occurs when the vertical scrollbar moves. You can know the current status of the scrollbar based on the value of the type property of the ScrollEventInfo object. In the example, data is added when the value of the type property is "wheellastover".

How to implement an example

Place the Grid component and the Button component. Create 2 Dataset objects and fill one with data and create only the column information for the other one. The Dataset object with data is the original and the Dataset object with only column information is used to show data in the Grid component.

Bind Dataset01 object without data to the Grid component.

Call the fn_retrieve function. The fn_retrieve function checks the entire data and determines and processes how much data to add to Dataset bound to the Grid component.

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

Process one page into 10 data units. When the button is clicked, 10 data are fetched from Dataset00 and added to Dataset01 (appendData).

this.fv_nTotCount = 0;
this.fv_nNowPage = 0;
this.fv_nPageSize = 10;
this.fv_bNext = true;
this.fn_retrieve = function(bNext)
{		
	if (bNext == false)
	{
        this.fv_nTotCount  = this.Dataset00.getRowCount();
    }
    
    if (this.Dataset01.rowcount >= this.fv_nTotCount)
    {
        this.fv_bNext = false;
        return;
    }
	
    var nStrat = this.fv_nNowPage * this.fv_nPageSize + 1;
    var nEnd   = this.fv_nNowPage * this.fv_nPageSize + this.fv_nPageSize;
    this.Dataset00.filter("COL0 >= " + nStrat + " && COL0 <= " + nEnd);		
    this.Dataset01.appendData(this.Dataset00);	
    this.Dataset01.set_rowposition(this.Dataset01.rowcount - 1);
    this.fv_nNowPage++;   	
}

When the onvscroll event occurs, check the value of the type property of ScrollEventInfo and if it is "wheellastover", then call the fn_retrieve function to add data.

this.Grid00_onvscroll = function(obj:nexacro.Grid,e:nexacro.ScrollEventInfo)
{
	if (e.type == "wheellastover") 
	{
		if (this.fv_bNext)
		{  
			this.fn_retrieve(true);
        }
	}
};

Run it with QuickView (Ctrl + F6) and click the button to set the initial value and move the mouse wheel to see the data added.

Deleting Subtotal with Only 1 Item

By specifying the keystring property value in the Dataset object, grouping can be set and subtotals can be output. However, in the default setting, even if there is only one grouped item, the subtotal is still output. This is subtotal items being output unnecessarily. In this example, we will take a look at how to delete the grouped item if there is only one item.

Example

If you click the button while showing the subtotal with 1 grouped item, then the subtotal Row with 1 grouped item will be deleted.

sample_grid_48.xfdl

Core features used in the example

getRowType

Returns the type information of the specified Row. For grouped information, it returns Dataset.ROWTYPE_GROUP information. If there are two or more items specified as the keystring property value and you need to classify each column information, then use the getRowLevel method.

getGroupRangeCount

In the case of grouped information, it returns the referenced Row information. Since the example deletes only the subtotal with 1 item, the conditional expression is processed when the return value is less than 2.

How to implement an example

Place the Grid component and the Button component. Create the Dataset object and set the data as shown below.

The first column needs to be grouped. Set the keystring property value of the Dataset object to "Column0".

Bind the Dataset object to the Grid component and set the suppress property value of the Column0 cell item to 1 in Grid Contents Editor.

When the button is clicked, the data with 1 grouped item is deleted. Since Rows that match the conditions are deleted, the for iteration statement is not started from 0, but is processed repeatedly starting with the largest index value and with the smallest index value.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	for(var i=this.Dataset00.getRowCount()-1; i>=0 ;i-- )
	{		
		if( this.Dataset00.getRowType(i) == Dataset.ROWTYPE_GROUP 
			&&  this.Dataset00.getGroupRangeCount(i) < 2){
			this.Dataset00.deleteRow(i);
		}
	}
};

Run it with QuickView (Ctrl + F6) and click the button to check if the data with 1 grouped item is deleted.

Expanding Only Parent Tree of Specific Location

This function expands only the parent tree of the item when selecting the item in a specific location in the folded Grid component.

Example

If the item from the Grid component on the right is selected, then only the parent tree that the item belongs to is expanded.

sample_grid_51.xfdl

Core features used in the example

treeinitstatus

This is the property that sets the initial format when the Grid component is displayed in the tree format. If the corresponding property is changed in the middle, then it is displayed as initialized according to the specified property value. In the example, when selecting the item, we start with all items folded first.

setTreeStatus

Specifies the state of the specified Row as folded or unfolded. In the example, the iteration statement is used to expand the tree above the selected item.

How to implement an example

Place 2 Grid components. Create the Dataset object and set the data as shown below. Then, bind the same Dataset object to the two Grid components.

Run Grid Contents Editor to show the first Grid component in the form of the tree. If you double-click on the Grid component, then Editor is executed. Delete Column1 created while binding the Dataset object. Select the body cell area of Column0 and change the displaytype, edittype property values as follows.

Then, set the treelevel property value to Column1. Use the search window above the property window to quickly find the property value.

Write the oncellclick event function to process the event when a specific item is selected from the entire data list. Separately process the parent tree item of the corresponding item by the findParentArr function and receive as an array. Expand items in the array one by one using the setTreeStatus method.

this.Grid01_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	this.Grid00.set_treeinitstatus("collapse,all");
	
	var path_Arr = this.findParentArr(this.Grid00, e.row);
	for(var i =  path_Arr.length  ; i > 0 ; i--) // Should be expanded in reverse.
	{
		this.Grid00.setTreeStatus(this.Grid00.getTreeRow(path_Arr[i]), true);
	}
	this.Dataset00.set_rowposition(path_Arr[0]);
};

Search the parent Row based on the index value of the selected Row. For example, if item 12 (index is 11) is selected, then the parent item is 10 (index is 9), and the parent item of item 10 is 8 (index is 7). The array will contain the values 11,9,7.

this.findParentArr = function (obj, idx)
{
	var arr = [];
	arr[arr.length] = idx;
	for(;;)
	{	
		var _p = obj.getTreeParentRow(arr[arr.length-1]);
		if(_p < 0){return arr;}
		arr[arr.length] = _p; 	
	}
};

Run it with QuickView (Ctrl + F6) and select the right Grid item to check that the tree state of the left Grid component changes.

Calculating Receipts

To get total or subtotal, you can specify the column property as "SUM" or use the getSum method. However, if there are unit prices and quantity, then you cannot get the total directly. Let us take a look at how we can calculate in this case.

Example

The total of unit price and quantity is displayed.

sample_grid_55.xfdl

Core features used in the example

displaytype

If the property value is set to "currency", then it is displayed based on the currency of the current locale setting.

How to implement an example

Place the Grid component. Create the Dataset object and set the data as shown below. When setting the column type, the price, amount items are specified as "INT". If the corresponding type is not specified, the getSum method will not be executed normally. Bind the created Dataset object to the Grid component.

Run Grid Contents Editor and add a column. It is the column to display the calculated value of unit price and quantity. Click the [Add Column] button to add the column. Select the head area and enter "Total" for the text property value.

Then, select the Total cell item and enter expr as below. The total for each item is calculated by multiplying the price column value and the amount column value and displayed on the screen.

expr:price * amount

Set the displaytype property value for each column as follows.

<Band id="body">
	<Cell text="bind:item"/>
	<Cell col="1" text="bind:price" displaytype="number"/>
	<Cell col="2" text="bind:amount" displaytype="number"/>
	<Cell col="3" expr="expr:price * amount" displaytype="currency"/>
</Band>

...
	<Cell col="3" expr="expr:comp.parent.fn_total(rowidx)" displaytype="currency"/>
...

Then, create the function called fn_sum as follows.

this.fn_total = function(row)
{
	var total= this.Dataset00.getColumn(row,"price") * this.Dataset00.getColumn(row,"amount");
	return total;
};

Click the [Add Summary Row] button to add Row to display the total.

Specify the displaytype property value of the summary row cell corresponding to the Total column to "currency" and the expr item as follows. The getSum method can specify the column ID or the calculation formula of the column ID as the parameter.

expr:dataset.getSum('price*amount')

Run it with QuickView (Ctrl + F6) and check that the total by item and the total are displayed.

Calculating Subtotal by Specifying Level to Group

If there is more than one group and you need to calculate the subtotal value, then you need to specify which groups are grouped first. In this example, let us take a look at how to process more than one group.

Example

The Grid component displayed on the left has two columns C1 and C2 leveled. Grid on the right grouped columns C1 and C2 only with grouping conditions without specifying the level.

sample_grid_56.xfdl

Core features used in the example

keystring

Uses "," to give the group a level. In the example, the Dataset object specified as "G:+C1,+C2" is bound to the left Grid component, which means that the subtotal is calculated based on C1 and based on C1, C2. The keystring property value of the Dataset object bound to the right Grid component is "G:+C1+C2". Therefore, the subtotal is calculated and displayed based on C1 and C2.

How to implement an example

Place 2 Grid components. Create 2 Dataset objects and enter the data the same way.

Specify the keystring property value of the Dataset object as follows. It is the difference between whether the "," goes in the middle or not. The Dataset00 object is bound to the left Grid component, and the Dataset01 object is bound to the right Grid component.

Dataset00: G:+C1,+C2
Dataset01: G:+C1+C2

Double-click the Grid component to run Grid Contents Editor and specify the suppress property value. Specify 1 for column C1 and 2 for column C2.

Display the text in front of the subtotal in the left Grid component. Specify the expr item as follows.

expr:dataset.getRowLevel(rowidx)==2?'sum ' + dataset.getColumn(rowidx-2,'C1'):C2
expr:dataset.getRowLevel(rowidx)==1?'sum ' + dataset.getColumn(rowidx-1,'C2'):C3

Run it with QuickView (Ctrl + F6) and check the items displayed in the Grid component.

Dynamically Creating Grid Component & Binding Data

The Grid component is used to show data according to the set data format. However, depending on the situation, it may be necessary to dynamically create the Grid component in the script and set the data. In this example, we will look at how to dynamically create and format the Grid component.

Example

Clicking the button displays the dynamically created Grid component at the bottom.

sample_grid_63.xfdl

Core features used in the example

appendContentsRow

This is the method that adds "head", "body", and "summary" Rows. Processes the same functions as [Add Head Row], [Add Body Row], and [Add Summary Row] in Grid Contents Editor.

appendContentsCol

This is the method that adds the column. You can select the "left", "body", and "right" band areas. If no band area is specified, then it is added to the "body" band area. In the example, 3 columns are needed, but the appendContentsCol method was run twice. Since the first column is already added as the appendContentsRow method is executed, run the appendContentsCol method only twice.

How to implement an example

Place only one button on the screen. When the button is clicked, the Grid component is created and placed.

Place and create Grid when the button is clicked. Divide the entire code into parts and explain. First, create the Grid component and add it as the child of the form object.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objGrid = new Grid();
	objGrid.init("GridNm", 30, 80, 350, 200,null,null);
	this.addChild("Grid00", objGrid);	
	objGrid.show();
...

Create the Dataset object and set Columns, Rows information.

var objDs = new Dataset();
objDs.set_name("ds_test");
objDs.addColumn("no", "string");
objDs.addColumn("name", "string");
objDs.addColumn("age", "int");
	
for (var i = 0; i < 5; i++) 
{
	var nRow = objDs.addRow();
	
	objDs.setColumn(nRow, "no", i);
	objDs.setColumn(nRow, "name", 'employ_' + i);
	objDs.setColumn(nRow, "age", (10 + i));
}

Set binding information. If you call the createFormat method of the Grid component after setting the binding information, then the format information is automatically set based on the information of the Dataset object. However, since there are some adjustments in the example, the createFormat method is not used.

objGrid.set_binddataset(objDs);

Set the Row band information and add the column. When the appendContentsRow method is executed, the first column is automatically created, so execute the appendContentsCol method only twice.

objGrid.appendContentsRow("head");
objGrid.appendContentsRow("body");
objGrid.appendContentsRow("summ");
	
objGrid.appendContentsCol();
objGrid.appendContentsCol();
	
objGrid.setFormatColProperty(0, "size", 100);
objGrid.setFormatColProperty(1, "size", 100);
objGrid.setFormatColProperty(2, "size", 100);

Specify the character string of the head area displayed on the screen and the Cell property to be displayed in the body area.

for (var r = 0; r < objDs.getColCount(); r++) 
{
	var colinfo = objDs.getColumnInfo(r);
	objGrid.setCellProperty("head", r, "text", colinfo.name);
	objGrid.setCellProperty("body", r, "text", "bind:" + colinfo.name);
	if (r == 2) 
	{
		objGrid.setCellProperty("summ", r, "text", "expr:dataset.getSum('"+colinfo.name+"')");
	}
	else if(r == 1)
	{
		objGrid.setCellProperty("summ", r, "text", "total");
	}
}

Run it with QuickView (Ctrl + F6) and check the Grid component created when clicking the button.

Moving String of Grid Component by Drag & Drop

This is an example of moving the data displayed in the Grid component to another component using the drag and drop function.

Example

You can drag a specific cell of the Grid component and move it to the Edit component. Among the Edit components, the 2^nd and 4^th components are restricted, so that the dragged string cannot be moved.

sample_grid_65.xfdl

Core features used in the example

getCellValue

Returns the string displayed on the Grid component. In the case of using the getCellProperty method, the desired result can be obtained when the text property value is specified as the character string, but the desired string cannot be obtained when the bound column value is used or the expr property is specified.

getCellRect

Returns the coordinate value of the selected Cell area. In the example, the Static component is set to be displayed at the corresponding location at the start of dragging.

How to implement an example

Place the Grid component and the Edit component. Place 2 Static components and set the visible property value to false. Static components change the visible property according to the drag and drop state. Create the Dataset object and bind it to the Grid component.

In the example, set 2 of the Edit components to be able to move the dragged string and the other two to not to. In the onload event function, specify the components that can move the string and those that cannot as an array.

var arr1 = [];
var arr2 = [];

this.sample_grid_65_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	// Drop unavailable
	arr1[0] = this.Edit00;
	arr1[1] = this.Edit02;

	// Drop possible
	arr2[0] = this.Edit01;
	arr2[1] = this.Edit03;
};

Write the ondrag event function in the Grid component. The event occurs when the drag operation starts in the Grid area. If the row property value of the GridDragEventInfo object is -1 or -2, then the drag operation has occurred in the head, summary Row bands; therefore, invalidate the event. Otherwise, check the location value of the selected Cell area and display the Static component on top of it.

this.Grid00_ondrag = function(obj:nexacro.Grid, e:nexacro.GridDragEventInfo)
{
	if(e.row == -1 || e.row == -2)
	{
		return false;
	}	
	
	sTextDragData = obj.getCellValue(e.row, e.cell);

	var cell_rect = obj.getCellRect(e.row, e.cell);
	this.Static00.set_left(cell_rect.left);
	this.Static00.set_top(cell_rect.top);
	this.Static00.set_width(cell_rect.width);
	this.Static00.set_height(cell_rect.height);
	this.Static00.set_text(sTextDragData);
	this.Static00.set_visible(true);
	return true;
};

In the ondragmove event function, move the static component according to the mouse movement. If the string is moved above the Edit component, then check if it is the component that cannot be moved, and adjust the visible property value of the Static component.

this.DragTextMove = function(obj, e)
{
    if( this.Static00.visible == true )
    {	
		for(var i = 0; i < arr1.length; i++)
		{
			if(arr1[i].name == e.fromobject.name)
			{
				this.equal_Obj(obj, e);
				break;
			}	else	{
				this.different_Obj(obj, e);
			}
		}
		this.Static00.move(e.clientx+5, e.clienty-15);
    }
};

this.equal_Obj = function(obj, e)
{
	this.Static01.set_visible(true);
	this.Static01.move(e.clientx-10, e.clienty+5);
};

this.different_Obj = function(obj, e)
{
	this.Static01.set_visible(false);
};

When the ondrop event occurs, the Edit component determines whether the string can be moved or not. If the component can be moved, then set the value property value. Enable all the Static components to be invisible.

this.sample_grid_65_ondrop = function(obj:nexacro.Form,e:nexacro.DragEventInfo)
{
	for(var i = 0; i < arr1.length; i++ )
	{
		if(e.fromobject != undefined && e.fromobject.name == arr1[i].name)
		{
			this.Static00.set_visible(false);
			this.Static01.set_visible(false);
			return false;
		}
	}

   for(var i = 0; i < arr2.length; i++ )
	{
		if(e.fromobject != undefined && e.fromobject.name == arr2[i].name)
		{
			e.fromobject.set_value(sTextDragData);
			this.Static00.set_visible(false);
		}
	}
	this.Static00.set_visible(false);
};

Run it with QuickView (Ctrl + F6) and drag and drop the string of the Grid component to the Edit component.

Moving Scroll of 2 Grid Components Simultaneously

You can change the scroll position of another Grid component within the event function that occurs when the Grid component is scrolled. You can make two Grid components look like one as well.

Example

The Grid component placed on the left is set so that the scrollbar is not visible. When the scrollbar of the right Grid component is moved, it moves together.

sample_grid_69.xfdl

Core features used in the example

scrollTo

Moves the horizontal and vertical scrollbar positions to the specified position.

How to implement an example

Place the Grid component as shown in the example screen. For the Grid component placed on the left, specify the scrollbartype property value to "none". Set only one value ("none") so that both horizontal and vertical scrollbars are not visible.

In the example, two Dataset objects were created, but it is okay to bind and use the same Dataset object. Match only the number of data in each Dataset object.

Write the onvscroll event function of the right Grid component. Whenever scrolling is enabled, the event occurs and changes the scroll position of the left Grid component.

this.Grid01_onvscroll = function(obj:nexacro.Grid,e:nexacro.ScrollEventInfo)
{
	this.Grid00.scrollTo(0,e.pos);
};

Run it with QuickView (Ctrl + F6) and check if the left Grid component is scrolled when the scrollbar of the right Grid component is moved.

Returning Checked Row Number

The text property value of the CheckBoxControl object is processed as expr. It saves the checked state as a separate variable and returns the result when the button is clicked.

Example

The result of selecting the checkbox in the Grid component is returned when the Button component is clicked.

sample_grid_72.xfdl

Core features used in the example

redrawExprCell

Specifies the update range of the expr value set in the Cell object. One of head, body, and summary can be set. If the range is not specified, then the expr value of the entire band area is updated.

How to implement an example

Place the Grid component and the Button component as shown in the example screen. Create and bind the Dataset object as shown below.

Modify the properties of Column0 column Cell object as follows. Whether the checkbox is checked is processed by the function called ck_func.

displaytype: checkboxcontrol
edittype: checkbox
text: expr:comp.parent.ck_func(currow)

In the ck_func function, set the value of 0 or 1 by specifying the row corresponding to the array variable as an index value. Save it and return the value. The value in the actual array variable is changed in toggle form when you click the Cell area. When the value is changed, call the redrawExprCell method to process the value set by expr.

this.ck_arr = [];

this.ck_func = function(nRow)
{	
	return this.ck_arr[nRow] == null ? 0 :  this.ck_arr[nRow];
}

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	if(e.cell == 0 )
	{
		this.ck_arr[e.row] = this.ck_arr[e.row] == null ? 1 : this.ck_arr[e.row]^1;
		this.Grid00.redrawExprCell('body');
	}
	
};

Check the value contained in the array variable when the Button component is clicked, and display the number of selected values in the TextArea component.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var cnt = 0;
	for(var i = 0 ; i < this.ck_arr.length ; i++)
	{
		if(this.ck_arr[i])
		{
			cnt = cnt + 1;
		}	
	}
	
	this.TextArea00.set_value("No. of selected rows : " + cnt);
	
	if(cnt == 0){
		this.TextArea00.set_value("There is no selected row " );
	}
	
};

Run it with QuickView (Ctrl + F6), change the state of the checkbox, and click the Button component to check the value being displayed in the TextArea component.

Searching by Like Condition

You can use conditional expressions in the filter method to display search results that only partially match the entered string.

Example

Entering the search word and clicking the [%Like%] button displays all results that include the search word. Clicking the [Like%] button displays only results that start with the search word. When the [Init] button is clicked, the search results are initialized.

sample_grid_73.xfdl

Core features used in the example

filter

If the filter method is executed without parameters, then it is processed as the value specified in the filterstr property value. If the filter method is executed without parameters in the absence of the filterstr property value, then the undefined value is transmitted and it is processed as false for no value to be displayed.

How to implement an example

Place the Grid component and the Button component as shown in the example screen. Create and bind the Dataset object as shown below. In the example, the case-insensitive search was excluded.

When the [%Like%] button is clicked, all result values including the entered value are returned. Use the indexOf method to display all data that returns 0 or more values if the search word is included.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.filter("String(Name).indexOf('"+this.Edit00.value+"')>=0");
};

When the [Like%] button is clicked, the result value starting with the entered value is returned. Display only data with the index matching the search word of 0 when the indexOf method is executed.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.filter("String(Name).indexOf('"+this.Edit00.value+"')==0");
};

When the [Init] button is clicked, the value is initialized. Even if only the filterstr property value is specified, the onrowsetchanged event occurs and initialization is processed.

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

Run it with QuickView (Ctrl + F6) and enter the search word to check the search results.

Removing Duplicates

You can use conditional expressions in the filter method to remove duplicate data. You can implement operation similar to the DISTINCT keyword in SQL statements.

Example

If you enter the search word and click the [Column0] button, then duplicate items are removed from the data in Column0 column and the remaining results are displayed. If you click the [Column1 && Column2] button, duplicate items are removed from the data in Column0 column and the remaining results are displayed. When the [Init] button is clicked, the search results are initialized.

sample_grid_74.xfdl

Core features used in the example

findRowExpr

Returns the index of the first Row among the results corresponding to the condition. If the condition is met but it is not the first Row index, then it is determined as a duplicate result and filtered.

How to implement an example

Place the Grid component and the Button component as shown in the example screen. Create and bind the Dataset object as shown below.

When the [Column0] button is clicked, duplicate items in the Column0 column are removed.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var sExpr	= "rowidx==dataset.findRowExpr(\"Column0=='\" + Column0 + \"'\")";		
	this.Dataset00.filter(sExpr);   
};

When the [Column1 && Column2] button is clicked, the duplicate items of both Column1, Column2 columns are removed. In the example, column information is received as the parameter and processed so that it can be processed even when other columns are set.

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

this.gf_distincDsFilter = function(objDs, sColID)
{
	var arrArgs	= sColID.split(",");
	var sFilterExpr		= "";
	var sFindRowExpr	= "";
	
	for (var i=0; i<arrArgs.length; i++)
	{
		if (objDs.getColumnInfo(arrArgs[i]) == null) continue;
		
		sFindRowExpr	+= (sFindRowExpr) ? " && " : "";
		sFindRowExpr	+= "" + arrArgs[i] + "=='\" + " + arrArgs[i] + " + \"'";
	}
	
	if (sFindRowExpr) {
		sFilterExpr	= "rowidx==dataset.findRowExpr(\"" + sFindRowExpr + "\")";
	}
	objDs.filter(sFilterExpr);
};

When the [Init] button is clicked, the value is initialized.

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

Run it with QuickView (Ctrl + F6) and click the button to see if the duplicates are removed.

Displaying Radio Button

Radio control is not provided as displaytype of the Cell object. However, the Radio control may be more familiar to the user than the CheckBox if only one needs to be selected from the presented list as needed.

Example

The Radio control is shown in the first column. When the item is selected, if there is the existing selected item, then deselect it and select only one item.

sample_grid_76.xfdl

Core features used in the example

displaytype

Sets the format in which the bound data is displayed on the screen. When "imagecontrol" is specified as the property value, the path where the image file is located or the BLOB value must be specified in the text property value. In the example, the image path is changed according to the Column0 value so that the checked state can be displayed.

How to implement an example

Place the Grid component as shown in the example screen. Create and bind the Dataset object as shown below.

The Column0 column will only display the Radio control image. Change the size to about 30 and clear the text property of the head cell. Then, change the displaytype property value to "imagecontrol" and the text property value to the image path in the body cell property.

The set text property value is as follows.

expr:Column0==1?"theme://images/rdo_WF_Radio_S.png":"theme://images/rdo_WF_Radio_O.png"

Clicking on the cell where the Radio control is displayed updates the Column0 value. Set the data corresponding to the clicked cell to 1 and the rest to 0.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	if (e.cell == 0)
	{
		this.Dataset00.set_enableevent(false);
		for(var i=0; i<this.Dataset00.rowcount; i++)
		{
			if (e.row == i)
			{
				this.Dataset00.setColumn(e.row,"Column0","1");
			}else{
				this.Dataset00.setColumn(i,"Column0","0");
			}	
		}
		this.Dataset00.set_enableevent(true);
	}
};

Run it with QuickView (Ctrl + F6) and try clicking on the cell where the Radio control is displayed.

Displaying World Time

Let us take a look at how to display world time in the Grid component with the simple script. This is not a very accurate time because it uses the timer and gets time information at the time it is updated.

Example

When the screen is loaded, the timer event is processed and the time value is refreshed and displayed every second.

sample_grid_80.xfdl

Core features used in the example

getTimezoneOffset

Returns the time difference between the Date object and UTC (Universal Time Coordinated). In the example, the getTimezoneOffset method is used to get the current time information from the Date object and set it to UTC.

How to implement an example

You can check different time zones by modifying the offset column value to the desired value.

Set the timer in the onload event function is set, and in the ontimer event function, receive time information every second to set the value in the timevalue column value of the Grid component.

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

this.sample_grid_80_ontimer = function(obj:nexacro.Form,e:nexacro.TimerEventInfo)
{
	for(var i=0;i<this.Dataset00.getRowCount();i++)
	{
		this.Dataset00.setColumn(i, 1, 
			this.getWorldTime(this.Dataset00.getColumn(i, 2)));
	}
};

this.getWorldTime = function(offSet)
{
	var objDate = new Date();
	var nTime = objDate.getTime() + (objDate.getTimezoneOffset() * 60000) + (offSet * 3600000);
	objDate.setTime(nTime);
	
	  var s =
    this.fn_getDate(objDate.getFullYear(), 4) + '-' +
    this.fn_getDate(objDate.getMonth() + 1, 2) + '-' +
    this.fn_getDate(objDate.getDate(), 2) + ' ' +

    this.fn_getDate(objDate.getHours(), 2) + ':' +
    this.fn_getDate(objDate.getMinutes(), 2) + ':' +
    this.fn_getDate(objDate.getSeconds(), 2);
	
  return s;
}

The fn_getDate function displays if the time value is less than the specified number of digits with "0" in the front.

this.fn_getDate = function(n, digits) 
{
  var zero = '';
  n = n.toString();

  if (n.length < digits) {
    for (i = 0; i < digits - n.length; i++)
      zero += '0';
  }
  return zero + n;
}

Displaying Selected Cell Borders Using PopupDiv Component

Use the PopupDiv component to create the colored border around the cell selected by the user.

Example

Clicking on a specific cell displays a red border around the cell. If you click another area other than the Grid component or click another cell, then the previous borderline disappears.

sample_grid_81.xfdl

Core features used in the example

getCellRect

Returns the coordinates of the selected cell. The PopupDiv component is displayed according to the corresponding coordinate value.

How to implement an example

1px solid coral

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var aryRect = this.Grid00.getCellRect(e.row, e.cell);
	
	var nX = aryRect.left;	
	var nW = aryRect.width;
	var nH = aryRect.height;
	var nY = nY = aryRect.top + 2;
	
	this.PopupDiv00.trackPopupByComponent(this.Grid00, nX, nY, nW, nH, "", false);
};

Checking Child Information in Tree Structure

Check the child information of the selected cell in the Grid component represented in the tree structure.

Example

When a specific cell is clicked, subtree information is displayed in the TextArea component. If there is no such information, then it indicates that there is no child information.

sample_grid_79.xfdl

Core features used in the example

getTreeChildCount

Returns child Row information under a specific Row. In the case of the tree structure, it is used to check if there is any sub-information.

treeuseline

Displays connecting lines in the case of the tree format. In the example, the value was set to false so that the connecting line is not visible. Even if there are no connecting lines, it is still displayed indented according to the level.

treeusebutton

If there is child Row information, then you can process the folding or unfolding function. In the example, the treeusebutton property value is set to "noclick" so that the tree cannot be collapsed. This makes the button invisible, and clicking the button area does not trigger the event.

How to implement an example

Set the treeusebutton property value to "noclick" so that the tree structure cannot be collapsed, and set the treeinitstatus property value to "expand,all" so that all initial statuses are displayed as expanded.

Use the getTreeChildCount method to check if there is child information, and if there is, then use the getTreeChildRow method to check the index information of the Row and display the information in the TextArea component.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var numChildcount = this.Grid00.getTreeChildCount(this.Dataset00.rowposition);
	var strChildInfo = "ChildCount = "+numChildcount+"\n";

	for(var i=0; i<numChildcount; i++)
	{
		var numChildRow = this.Grid00.getTreeChildRow(this.Dataset00.rowposition, i, false);
		strChildInfo += "Row = "+numChildRow+", RowText = "+this.Grid00.getCellText(numChildRow, 0)+"\n";
	}
	this.TextArea00.set_value(strChildInfo);
};

Adjusting Column Width to Data Width

Let us take a look at how to dynamically adjust the column width according to the data width without specifying the autosizingtype property value of the Grid component. It is not a function supported by the Grid component and requires a little trick.

Example

When you click the Grid component column header area, the column width is adjusted to the data width.

sample_grid_90.xfdl

Core features used in the example

getOffsetWidth

Returns the dynamically calculated component width.

setFormatColProperty

Sets the column property value. In the example, it redefines the width value.

How to implement an example

When you click the column header area, the longest string is checked among the data at the corresponding column location and the string is set as the text property value of the Static component. When the resetScroll method is executed, the width of the Static component is adjusted according to the fittocontents property setting. Then, adjust the column width value based on the corresponding width value.

this.Grid00_onheadclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var nMaxVal = 0;
	var nCurrVal = 0;
	var sMaxText = null;
	for(var i=0; i<this.Dataset00.rowcount; i++) {		
		nCurrVal = this.Dataset00.getColumn(i, e.col).length;
		if(nCurrVal > nMaxVal) {
			nMaxVal = nCurrVal;
			sMaxText = this.Dataset00.getColumn(i, e.col);
		}
	}
	this.staTemp.set_text(sMaxText);
	this.resetScroll();
	this.Grid00.setFormatColProperty(e.col, "size", this.staTemp.getOffsetWidth()+10);
};

Adding Total Row for Specific Grid Component Only

Let us look at how to add the user property to the Grid component and add a specific function according to the user property value.

Example

When the button is clicked, the total value is displayed in the last Row of the first and second Grid components.

sample_grid_93.xfdl

Core features used in the example

getSum

Returns the total of the unfiltered Row area in the Dataset object.

getCellCount

Returns the number of Cells in a specific band (body band in the example) of the Grid component. In the example, since there is only one Row in the body band, the number of Cells is the same as the number of columns. Using the getColCount method of the bound Dataset object instead of getCellCount returns the same result.

How to implement an example

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

Processing the total is processed by the fn_setSumm function. Find the Grid component among the child classes belonging to Form, and find the item with the property value of the user property summ of the Grid component being "Y".

Find the Dataset object bound to the Grid component, add Row, and set the total value.

this.fn_setSumm = function(obj)
{
	var colNm;
	var objGrd;
	var objDs;
	for(var i=0; i<obj.all.length; i++){
		if( obj.all[i].toString() == "[object Grid]" ){
			objGrd = obj.all[i];
			if( objGrd.summ == "Y"){
				objDs = obj.all[objGrd.binddataset];	
				var idx = objDs.addRow();
				for(var j=0; j<objGrd.getCellCount("body"); j++){
					colNm = objGrd.getCellProperty("body", j, "text").split(":");
					objDs.setColumn(idx, colNm[1], objDs.getSum(colNm[1], 0, objDs.rowcount-1));
				}
			}	
		}
	}
}

Since the third Grid component does not have the property called summ, the value of objGrd.summ is processed as null and false in the conditional statement.

Displaying Total of Selected Area

When the selecttype property value of the Grid component is set to "area", the total of the selected area is displayed.

Example

When you select the cell in a specific area by using the SHIFT key together, the total of the selected cells is displayed.

sample_grid_98.xfdl

Core features used in the example

getSum

The first parameter of the getSum method can specify the column ID, but can also set the calculation expression. In the example, if there are 2 columns selected, then the expression that adds the values of the 2 columns is specified as the first parameter.

How to implement an example

Place the Static component inside the PopupDiv component. Display the total value in the Static component.

When selecting multiple areas by pressing the SHIFT key in the Grid component, set a specific variable value.

this.nShift = 0;
this.Grid00_onkeydown = function(obj:nexacro.Grid,e:nexacro.KeyEventInfo)
{
	if(e.keycode == 16) {
		this.nShift = 1;
	} else {
		this.nShift = 0;
	}
};

Process the total value when the mouse button is released while holding down the SHIFT key in a specific cell of the Grid component.

this.Grid00_onlbuttonup = function(obj:nexacro.Grid,e:nexacro.GridMouseEventInfo)
{
	if(this.nShift == 1) {
		var strColExpr;
		if(obj.selectstartcol==0) {
			if(obj.selectendcol==1) {
				strColExpr = "Column0+Column1";
			} else {
				strColExpr = "Column0";
			}
		} else {
			strColExpr = "Column1";
		}
		
		var nTot = this.Dataset00.getSum(strColExpr, obj.selectstartrow, Number(obj.selectendrow)+1);
		
		this.PopupDiv00.form.Static00.set_text("SUM : "+nTot);
		this.PopupDiv00.form.Static00.set_fittocontents('width');
		this.PopupDiv00.form.resetScroll();
		this.PopupDiv00.trackPopupByComponent(obj,e.canvasx,e.canvasy);
		this.nShift = 0;
	}
};

this.PopupDiv00_oncloseup = function(obj:nexacro.PopupDiv,e:nexacro.EventInfo)
{
	obj.form.Static00.set_text("");
};

Displaying Clicked Cell

When the selecttype property value of the Grid component is set to "row", the selected Row is displayed, but the clicked cell is not displayed. This is an example of displaying the clicked cell in a different format.

Example

Clicked cell is displayed with a different background color.

sample_grid_99.xfdl

Core features used in the example

getBindCellIndex

Returns the index of the first Cell bound to a specific column of the Dataset object. It is used to check the index of the clicked cell in the Grid component.

getCellPos

Returns the index value of the selected cell. In the example, the value returned by the getBindCellIndex method is compared with the value returned by the getCellPos method.

How to implement an example

Specify the column ID string of the getBindCellIndex method for each column.

expr:comp.getBindCellIndex("body","Column0")==comp.getCellPos()?'sample_grid_99_cellclick':''

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	obj.redrawExprCell("body");
};

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_99_cellclick[userstatus=selected]
{
	-nexa-background-odd : lawngreen;
	background : lawngreen; 
}

Display clicked (currently selected) cell

In the example of displaying the clicked cell, only the feature for displaying the cell directly clicked by the user in a different style was implemented. In this example, a newly added property is used to set the currently selected cell to be displayed.

Example

The currently selected cell is displayed with a different Border style. The currently selected cell is displayed when moving with arrow keys as well as clicking without using a separate event handler function.

sample_grid_107.xfdl

Core features used in the example

showcellselection

Sets whether to apply the specified style to the currently selected cell (cells corresponding to the currentcell property value).

How to implement an example

The style set in the default theme is applied when a cell in the third column is selected.

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

.Grid .body .row .cell.sample_grid_107_cellclick .cellselection
{
	-nexa-border : 3px solid lawngreen;
}

The Border style displayed on the selected cell is displayed only when the Grid component receives the focus. If the focus is moved to another component (the Edit component in the case below), the cell Border style is not displayed.

Showing Lower-level Data when Expanding/Collapsing Tree

If there is little data in the tree format, then there is no problem, but if there is more data than the Grid component area, then there is a problem that the lower-level data is not immediately visible when the tree is expanded. Let us take a look at how the selected lower-level data selected can be shown better in the example.

Example

When the "3" item is expanded, the lower-level data is not visible because the right Grid does not adjust the scroll position. In the left Grid, the position of the selected item is adjusted to be shown at the top.

sample_grid_100.xfdl

Core features used in the example

getRealRowSize

Returns the height of a specific Row. The height value of the Row specified when setting the Grid component can change the actual height according to other property settings or data, so check the actual height value using the getRealRowSize method.

getTreeRow

Returns the Row position in the tree structure. In the example, when you click the "2" item, the index of the selected Row is 6, but the index of the displayed Row is 2, excluding the unfolded tree item. The getTreeRow method returns the Row index displayed on the screen, excluding unfolded tree items.

How to implement an example

<ColumnInfo>
  <Column id="Column0" type="STRING" size="256"/>
  <Column id="Column1" type="STRING" size="256"/>
</ColumnInfo>
<Rows>
  <Row>
    <Col id="Column0">0</Col>
    <Col id="Column1">ROOT</Col>
  </Row>
  <Row>
    <Col id="Column0">1</Col>
    <Col id="Column1">1</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">1-2</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">1-3</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">1-4</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">1-5</Col>
  </Row>
  <Row>
    <Col id="Column0">1</Col>
    <Col id="Column1">2</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">2-1</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">2-2</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">2-3</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">2-4</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">2-5</Col>
  </Row>
  <Row>
    <Col id="Column0">1</Col>
    <Col id="Column1">3</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">3-1</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">3-2</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">3-3</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">3-4</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">3-5</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">3-6</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">3-7</Col>
  </Row>
  <Row>
    <Col id="Column0">1</Col>
    <Col id="Column1">4</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">4-1</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">4-2</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">4-3</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">4-4</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">4-5</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">4-6</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">4-7</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">4-8</Col>
  </Row>
  <Row>
    <Col id="Column0">2</Col>
    <Col id="Column1">4-9</Col>
  </Row>
</Rows>

displaytype: treeitemcontrol
edittype: tree
treelevel: bind:Column0

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	if(obj.getBindDataset().getColumn(e.row, "Column0" ) == '1')
	{
		var nRowSize = obj.getRealRowSize(0);
		var nPos = obj.getTreeRow(e.row) * nRowSize;
		trace(e.row);
		trace(obj.getTreeRow(e.row));
		obj.vscrollbar.set_pos(nPos);
	}	
};

Creating Calendar-type Schedule with Grid Component

This is an example of creating a schedule that displays a date with the schedule on the calendar, and it allows you to check the detailed schedule when the date is selected. The calendar is represented with the Grid component and the detailed schedule of the selected date is displayed in the ListBox component.

In the example, the September and October 2020 schedules were added directly to the Dataset object.

Example

Dates with the schedule are underlined, and clicking on the date displays the detailed list of schedules.

sample_grid_103.xfdl

Core features used in the example

getCaseCountNF

Returns the total number of Rows satisfying the Conditional Expression. In the example, it was used to check if there is a schedule for that day in the data. In order to show the data in the ListBox component, the getCaseCountNF method was used instead of the getCaseCount method because it was filtered.

How to implement an example

The seven columns cover Sunday through Saturday. By adding 5 Rows, you can express the 7*5 Grid component.

Display Sundays and Saturdays in red and blue. Check and underline dates with the schedule in the fn_checkTable function.

Sun: comp.parent.fn_checkTable(cal0)>0?"<fc v='red'><u v='true'>"+cal0+"</u></fc>":cal0?"<fc v='red'>"+cal0+"</fc>":cal0
Mon~Fri: comp.parent.fn_checkTable(cal1)>0?"<u v='true'>"+cal1+"</u>":cal1
Sat: comp.parent.fn_checkTable(cal6)>0?"<fc v='blue'><u v='true'>"+cal6+"</u></fc>":cal6?"<fc v='blue'>"+cal6+"</fc>":cal6

this.fn_checkTable = function(strDay)
{
	return this.Dataset00.getCaseCountNF("date == '"+this.fn_getDateString(strDay)+"'");
}

this.fn_getDateString = function(strDay)
{
	return new nexacro.Date(this.Combo00.value ,this.Combo01.value ,strDay).toString();
}

For data, enter the date in the form of "YYYYMMDD" in the date column, and enter the text to be displayed in the ListBox component in the title column.

In the example, since only data for September and October 2020 were created, the date was set to September 1^st, 2020. Then, set the data to be displayed in the Combo component based on the year and month, and process the date to be displayed in the Grid calendar.

this.sample_grid_103_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var date = new nexacro.Date(2020,8,1);
	this.fn_setYear(date.getFullYear());
	this.fn_setMonth(date.getMonth());
	this.fn_setCalendar();	
};

Based on 2020, add 100 years before (1920) and 100 years after (2120) to the Dataset object and make it visible in the Combo component.

this.minYear = -100;
this.maxYear = 100;

this.fn_setYear = function(numCurrentYear)
{
	this.ds_Year.set_enableevent(false);
	for(var i=numCurrentYear+this.minYear ; i<=numCurrentYear+this.maxYear ; i++)
	{
		var nRow = this.ds_Year.addRow();
		this.ds_Year.setColumn(nRow, 0, i);
		this.ds_Year.setColumn(nRow, 1, i);
	}
	this.ds_Year.set_enableevent(true);
	this.Combo00.set_value(numCurrentYear);
}

this.fn_setMonth = function(numCurrentMonth)
{
	this.ds_Month.set_enableevent(false);
	for(var i=0 ; i<12 ; i++)
	{
		var nRow = this.ds_Month.addRow();
		this.ds_Month.setColumn(nRow, 0, i);
		this.ds_Month.setColumn(nRow, 1, i+1);
	}
	this.ds_Month.set_enableevent(true);
	this.Combo01.set_value(numCurrentMonth);
}

When the year or month selection value is changed, the date displayed in the Grid component is updated.

this.Combo_onitemchanged = function(obj:Combo, e:nexacro.ItemChangeEventInfo)
{
	this.fn_setCalendar();
}

Create an array of the date values corresponding to the selected year and month, and set the data in the Dataset object bound to the Grid component according to the order of the array values.

this.fn_setCalendar = function()
{
	var y = nexacro.toNumber(this.Combo00.value);	
	var m = nexacro.toNumber(this.Combo01.value);
	
	var arr = this.getCalendarArr(y,m);

	this.ds_calendar.set_enableevent(false);
	this.ds_calendar.clearData();
	for(var i = 0 ; i < arr.length ; i++){
		this.ds_calendar.addRow();
		for(var y = 0 ; y < arr[i].length; y++)
		{
			if(arr[i][y] != null){ this.ds_calendar.setColumn(i,y, arr[i][y]); }
		}
	}
	this.ds_calendar.set_enableevent(true);
	this.Dataset00.filter("date == '00000000'");
	this.Grid00.clearSelect();
}

this.getCalendarArr = function(y,m,d)
{
	var date = new nexacro.Date();
	date.setFullYear(y, m , 1);
	return this.get_DateArr(date, new Array(), m);
}

this.get_DateArr = function(date, arr , month)
{
	if(month != date.getMonth())
		return arr;
		
	var idx = date.getDay();
	if(arr.length == 0 ) {
		arr[0] = new Array();
	} else {
		if(idx == 0) {
			arr[arr.length] = new Array();
		}
	}
	arr[arr.length-1][idx] = date.getDate();
	date.addDate(1);
	return this.get_DateArr(date, arr, month);
}

Add User Properties to process the onclick event function in one.

Change the year and month when the button is clicked.

this.Button_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
	if(obj.dataType == "month")
	{
		var numMonth = nexacro.toNumber(this.Combo01.value)+nexacro.toNumber(obj.dataValue);
		var value = (numMonth%12)!=0 ? (numMonth%12) : 0;
		trace(value);
		this.Combo01.set_value(value);
	} 
	else if(obj.dataType == "year") 
	{
		var numYear = nexacro.toNumber(this.Combo00.value)+nexacro.toNumber(obj.dataValue);
		this.Combo00.set_value(numYear);
	}
	this.fn_setCalendar();
}

Filter the data in the Dataset object bound to the ListBox component according to the selected date.

this.Grid00_oncellclick = function(obj:Grid, e:nexacro.GridClickEventInfo)
{
	this.Dataset00.filter("date == '"+this.fn_getDateString(this.ds_calendar.getColumn(e.row,e.cell))+"'");
}