Sort

Handling Basic Sort

Main Source Content

this.Button00_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 this.Dataset00.set_keystring("S:+Group");  //Group Ascending
}
this.Button01_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 this.Dataset00.set_keystring("S:-Group");  //Group Descending
}
this.Button02_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 this.Dataset00.set_keystring("S:+Group+Department");  //Group,Department Ascending
}
this.Button03_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 this.Dataset00.set_keystring("S:-Group-Department");  //Group,Department Descending
}
this.Button04_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)  
{
 this.Dataset00.set_keystring("S:+Group+Department+Name");  //Group,Department,Name Ascending
}
this.Button05_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 this.Dataset00.set_keystring("S:-Group-Department-Name");  //Group,Department,Name Descending
}

By using sort on keystring of Dataset, We can describe how to get the sort result.

Source Location

Sample\Grid\np_Grid_Row_Sort.xfdl

Implementing Sort by using Grid Header Event

Reference Details

Keystring

Keystring method is used to set sorting on the particular column of DataSet.

getCellText, getCellValue

getCellText method  get data on the Grid, it may be processed data by expr. 
(For example we specify mask format or process values by expr, it includes the result values.)

getCellValue method get original values from DataSet.
(For example we are using Mask format and expr, getCellValue get values from bind DataSet)

getFormatColProperty, getCellProperty, getBandProperty

• When bring Grid cell's property, this is method is used to properties of different areas.

• getFormatColProperty is used to show column's information, getCellProperty is used for Cell's information and getBandProperty is used for showing band information.

The main source

/*
 * File Name   : Comp_Grid_Row_Sort
 * Description : Implementing Sorting in Grid
 */
/*  onheaddblclick  */
this.grd_output_onheaddblclick = function(obj: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;  
   
  if (i == e.cell)
  {
   var sColId = (obj.getCellProperty("body", e.col,"text")).toString().split(":");
   if (sHeadText.substr(nLen) == "▲") 
   {
    obj.setCellProperty( "head", i, "text", sHeadText.substr(0, nLen)+ "▼");
    objDs.set_keystring("S:-" + sColId[1]);
   }
   else if (sHeadText.substr(nLen) == "▼") 
   {
    obj.setCellProperty( "head", i, "text", sHeadText.substr(0, nLen)+ "▲");
    objDs.set_keystring("S:+" + sColId[1]);
   }
   else 
   {
    obj.setCellProperty( "head", i, "text", sHeadText+"▲");
    objDs.set_keystring("S:+" + sColId[1]);
   }
  }
  else
  {
   if (sHeadText.substr(nLen) == "▲" || sHeadText.substr(nLen) == "▼") 
   {
    obj.setCellProperty( "head", i, "text", sHeadText.substr(0, nLen));
   }
  }
 } 
}

Source Location

Sample\Grid\np_Grid_Row_HeadSort.xfdl

RowType

Using getRowType we can know the specific changes in the Grid, we can check whether the specific row is modified or not.

We can check status of each row in the grid.

Description about Type is below
0: EMPTY
1: NORMAL
2: INSERT
4: UPDATE
8: DELETE
20: GROUP

Source Location

Sample\Grid\np_Grid_RowType.xfdl

Row Number

Expressing serial number using currow

The front column of main screen of grid can represent serial numbers fetched from Database but these serial numbers can also be generated by the expression.

Setting currow by using expression

We can set desired serial number by using the expression expr 'currow + 1' in cell 
The serial number is represented by a cell in the grid.

Source Location

Sample\Grid\np_Grid_Currow.xfdl

ToolTip

This is used to show the text in the  Grid Cell, when the mouse over on the Cell. When contents in the cell is out of cell's size, by using ToolTipText property it shows full text on mouse over on the cell.

How to specify specific ToolTipText Cell

If we want to express ToolTipText on any specific cell then, it is possible to show Grid Cell's text  by  using DataSet binding.
If we take over mouse on the binding column's text is appeared as ToolTipText expression.

Source Location

Sample\Grid\np_Grid_ToolTipText.xfdl

Freeze

Basic

If there are many columns in the grid scrollbar is automatically appeared. When we move the scrollbar grid columns are also moved. The cell movement can be fixed by using band property. When scroll is appeared these cells are fixed only remaining cells are moving.

Setting to use Grid Contents Editor

By setting the band attribute of Position property, which is property of col. We can fix the cell, so the scrollbar moves this column will not move.

If you want to set the specific column location by band.  Then column in front of this column band should also be fixed.

Example) 
If you want to set band on col 1 then band in front of the column col 0 is required.
If we wants to fix more than one consecutive columns one time. There are two ways to fix these columns first press shift and click mouse on the column up to where you want to fix the columns. The second way is choose the column by pressing the control key, and choose the column up to where you want to fix.

Ways to use setFormatColProperty

By using the script we can freeze the desired column.

this.Button00_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
    //Note Cell's index is starting form 0
    //setFormatColProperty method to set Property values for each Column of Format Columns which is currently set in Grid
    this.Grid01.setFormatColProperty(1, "band", "left");
    this.Grid01.setFormatColProperty(8, "band", "right");
}

By clicking bend setting button we can confirm that the set values.

More Details

• We can not fix the middle cell.

• If merged cell has already exists , bend property can not be used in merged area.

• When we setting band the following message is displayed.

Source Location

Sample\Grid\np_Grid_Band.xfdl

Fixing the column when click on the merged header of Grid

From runtime display, user can fix the column. When we click header, by using setFormatColProperty, we can fix the column.

Source Code

/*
 * File Name   : Cell_HeaderClickFix
 * Description : Fix the column when click on the merged header of Grid
 */
 
 /*  Header Click  */
this.grd_output_onheadclick = function(obj:Grid, e:nexacro.GridClickEventInfo)
{
    var iCnt=0;
   // this.alert("inside the method  !");
    for (var j = e.cell; j >= 0; j--) 
    {
        var iColCur = this.grd_output.getCellProperty("Head", j, "col");
        var iCell = e.cell;
        for (var i = iCell; i >= 0; i--) 
        {
            if (this.grd_output.getCellProperty("Head", i, "row") == 0 
            && iColCur == this.grd_output.getCellProperty("Head", i, "col")) 
            {
             //this.alert("Hi ");
                if (iCnt==0) 
                {
                    var iCol = this.grd_output.getCellProperty("Head", i, "col");
                    var iSpan = this.grd_output.getCellProperty("Head", i, "colspan")-1;
                    var iTotCol = iCol + iSpan;
                    //this.alert(" this is alert ");
                    for (var k = 0; k <= iTotCol; k++)
                    {
                        this.grd_output.setFormatColProperty(k, "band", "left");
                        //this.alert("Hi 3333");
                    }
                }
                iCnt++;
            } 
        }
    } 
}

Related Method

setFormatColProperty

This method is used to change the property value of currently set column

Source Location

Sample\Grid\np_Grid_Cell_HeaderClickFix.xfdl

Paging

Here is description of paging processing techniques using Grid.

Paging processing using filter

Main source content

this.fn_retrieve = function()
{   
    var nStrat = parseInt((this.fv_nNowPage - 1) / this.fv_nPageScale) * (this.fv_nPageScale * this.fv_nPageSize) + 1;
    var nEnd   = parseInt((this.fv_nNowPage - 1) / this.fv_nPageScale) * (this.fv_nPageScale * this.fv_nPageSize) + (this.fv_nPageScale * this.fv_nPageSize);
    this.ds_data0.filter("COL0 >= " + nStrat + " && COL0 <= " + nEnd);    
    this.fn_makePage(); 
    this.fn_Paging();            
}
this.fn_Paging = function()
{
    this.fv_nEnd   = this.fv_nNowPage * this.fv_nPageSize;
    this.fv_nStart = this.fv_nEnd - this.fv_nPageSize + 1;
    this.ds_data1.copyData(this.ds_data0, true);
    this.ds_data1.filter("COL0 >= " + this.fv_nStart + " && COL0 <= " + this.fv_nEnd);     
}

Related method

filter

This method shows the record from the Dataset which satisfy the condition.

Source Location

Sample\Grid\np_Grid_Format_Paging_filter.xfdl

Paging processing using onscroll event of Grid

Data represented in the Grid does not contain whole data if records are more than size of grid, a scroll is appeared on the Grid, if we move scroll down, remaining data will be searched by paging.

Main source content

/*  onvscroll  */
this.grd_output_onvscroll = function(obj:Grid, e:nexacro.ScrollEventInfo)
{
 if ((e.type == "lastover") || (e.type == "tracklastover") || (e.type == "wheellastover") || (e.type == "selectlastover")) 
 {
  if (this.fv_bNext)
  {  
   this.fn_retrieve(true);
    }
 } 
}

After communicating with server we bring the maximum number of records.
Maximum number of records is 10, if current page is page 1, then 1-10 records will be fetched from server.
Fetched data is added to bind Dataset with Grid.

Reference Details

type

This contains different kinds of type on onvscroll event.

Source Location

Sample\Grid\np_Grid_Format_Paging_onvscroll.xfdl

Suppress

Using the expression Suppress

When multiple rows have same column value, then value of this particular column will be shown as single value, even other column values exist but it will not be visible it shows the blank space instead of these values.

Like the above picture we can see the difference before and after applying suppress.

How to use

Assign the value to the cell which we want to Suppress in the increasing order.

Example)
In this case setting the value for group and department.
Setting value 1 for group Setting value 2 for department.

Source Location

Sample\Grid\np_Grid_Suppress.xfdl

Combo Filter

We can create excel's filter on the Grid by creating combo box and by implementing it with filter method of Dataset

Related Method

setCellProperty

Method to change special cell's property on the Grid.

filter

This method is used to show the records from Dataset records by satisfied conditions.

Main Source content

/*
 * File Name   : Grid_Row_ExcelFilter
 * Description : Implementing Excel's filter on the Grid
 */
 
 /* execute Filter*/
this.btn_execute_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 this.ds_data0.insertRow(0);
 
 // set Combo
 this.grd_output.setCellProperty("Body", 0, "displaytype", "expr:currow==0 ? 'combo' : 'normal'");
 this.grd_output.setCellProperty("Body", 0, "edittype"   , "expr:currow==0 ? 'combo' : 'normal'");
 
 // set List
 this.grd_output.setCellProperty("Body", 0, "combodataset" , "expr:currow==0 ? 'ds_data1' : ''");
 this.grd_output.setCellProperty("Body", 0, "combocodecol" , "expr:currow==0 ? 'COL0' : ''");
 this.grd_output.setCellProperty("Body", 0, "combodatacol" , "expr:currow==0 ? 'COL0' : ''");
 
 // display Combo
 this.grd_output.setCellProperty("Body", 0, "combodisplay", "expr:currow==0 ? 'display' : 'edit'");
}
      
 /* change the list*/ 
this.grd_output_oncloseup = function(obj:Grid, e:nexacro.GridEditEventInfo)
{
    if (e.value.length < 1)
    {
        this.ds_data0.filter("");
    }
    else 
    { 
        this.ds_data0.filter("COL0=='"+ e.value +"' || currow==0");
    }
}

Source Location

Sample\Grid\np_Grid_Row_ExcelFilter.xfdl

Expr usage

Based on conditions change display and edit type

Ways of setting by using Property

If we want to use expr on the cell, we can use the expression on the cell, after changing displaytype and edittype will show the expression format.

Example)
If Column2 of DataSet has value Y then the checkbox is appeared
If value is not Y, then it is normal.

expr:Column2=='Y'?'checkbox':'normal'

expr:Column2=='Y'?'checkbox':'none'

Way of setting by using Script

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

Source Location

Sample\Grid\np_Grid_Expr_Case1.xfdl

Expr three conditions arithmetic expression

By using Expr can process multiple cases by comparing them.

Way to set up using the Property

Choose the background property of the cell and write the
expression, we can show the background color by expression.

EXPR(Column0=='1'?'red':Column0=='2'?'pink':Column0=='3'?'silver':'yellow')

Source Location

Sample\Grid\np_Grid_Expr_Case2.xfdl

Expression setting using rowlevel, rowtype of DataSet

While creating Group on DataSet by keystring, following the rowlevel property value we can set value by expression. 
Using the expr on cell grid by the following way dataset.getRowLevel(rowidx), dataset.getRowType(rowidx) , the rowlevel and rowtype value will be appeared on the grid.

Setting the background according to rowlevel

If we want show different background color by sub-level, so we should set getRowLevel(rowidx) expression in background property.

Keystring setting of DataSet

Setting background according to different rowtype.

Changing edittype following by rowtype

Following the rowType on the Grid we can express the edit. We can edit the only row type 2 which is newly inserted. We can express rowtype by expression getRowType(rowidx).

Source Location

Sample\Grid\np_Grid_Expr_Case3.xfdl

By using expr way of returning function execution result.

Calling function from expr

On expr of Grid cell, declaring the function we can call the function and can get return value on Script. Like below obtaining the sum on the specific cell, we should declare fn_sum(rowidx) on expr, it return result in fn_sum after calculation.

Calling function declaration part from expr

this.fn_sum = function(row)
{
 var sum= this.Dataset00.getColumn(row,"Column0")+this.Dataset00.getColumn(row,"Column2");
 return sum; 
}

Source Location

Sample\Grid\np_Grid_Expr_Case4.xfdl

Way to implement casesum, caseavg on summary using Grid expr

On summary area of the grid by using the expr casesum and caseavg we can calculate the sum and average within the DataSet specified conditions.

Way to implement casesum, caseavg on summary using expr

If the column value dataset is greater than 10, it will be considered to calculate the sum.

If the column value dataset is greater than 10, it will be considered to calculate the avg.

Source Location

Sample\Grid\np_Grid_Expr_Case5.xfdl

How to get execution result expr

Each component can be expressed expr attribute to a variety of formulas. 
When we are using display expr property it will show the used expression and when we are using displaytext property it will show execution result of expression.

Using displaytext gets the execution result

this.Edit01.set_value(this.Button01.expr);
this.Edit02.set_value(this.Button01.displaytext);

Way of verifying the executed value on the Grid

dn = eval("this." + this.Grid00.binddataset); 
this.Edit00.set_value(this.Grid00.getCellText(dn.rowposition,2));

Source Location

Sample\Grid\np_Grid_Expr_Case6.xfdl

Grid cell can be represented in the expression expr (Way of specifying the scope)

Source Location

Sample\Grid\np_Grid_Expr_Case7.xfdl

Grid Rows/Column Sum

This describes the expression how to represent sum of column/rows on the Grid.

Getting total (row)

We can get total sum by getSum method of DataSet.

expr:dataset.getSum("pay")

Getting total of Columns

We can get sum by using expr.

expr:pay-tax

Source Location

Sample\Grid\np_Grid_ColRow_SumMid.xfdl

Grid Subtotal/Total

Using keystring of DataSet by specifying the group key, we can show sub total and total automatically.

Way of creating level on group by using "," in keystring

For example "G:column1, column2" means fisrt make group with column1 then making group again with column2.

Setting keystring on DataSet

Setting expr by rowlevel

Source Location

Sample\DataSet\np_Grid_DataSet_KeyString_Group1.xfdl

Way of merging more than two columns on keystring into one by group key

"G:+column1-column2" input together column1 and column2 values will be shown together in group.

Way of using keystring on DataSet

Setting expr by rowlevel

Source Location

Sample\DataSet\np_Grid_DataSet_KeyString_Group2.xfdl

While using keystring of dataset, deleting subtotal when the number of grouped rowdata is one

Subtotal is expressed on grid using keystring of dataset.
When the number of  grouped rowdata is one, we delete the subtotal using script.

Main Source Content

for(var i=this.Dataset01.getRowCount()-1; i>=0 ;i-- )
 {  
  if( this.Dataset01.getRowLevel(i) > 0 &&  this.Dataset01.getGroupRangeCount(i) < 2){
   this.Dataset01.deleteRow(i); 
  } 
 }

Source Location

Sample\Grid\Grid_DataSet_KeyString_Group_3.xfdl

fillareatype

If there is no data to be displayed on the Grid, we can add the following expressions.

fillareatype Description

Source Location

Sample\Grid\np_Grid_FillAreaType.xfdl

password

This method describes to express important information like phone no, Social Security Number as password type in the cell.

Setting up a password using the mask

In the data in mask field are processing password type
property, all the content inside {} will be shown as *

Source Location

Sample\Grid\np_Grid_Password.xfdl

CheckBox select / deselect

Creating checkbox on the Head Cell of Grid and changing the value on the body grid by checking checkbox. Below is an example while selecting/ deselecting the checkbox on head row.

implement

• Set edit type and display type property on grid header

There is onheadclick event on head. In this event when we click on the cell (Checkbox cell) event is generated. Based on the header row click, corresponding checkbox on the row are selected/ deselected. Following is the script to check all the checkboxes

this.Grid00_onheadclick = function (obj:Grid, e:GridClickEventInfo)
{
 if (e.cell == 0) 
 {
  this.gf_SetGridCheckAll(obj, e);
 }
}

• The following method is calling the onheadclick event.

/******************************************************************************
 ** function name        : gf_SetGridCheckAll()
 ** function description : This function is used to set the "Checked" column 
                           values 1 and 0 while selecting or deselecting 
                           the checkbox. 
                           When we are selecting or deselecting 
                           the head checkbox. 
                           All values will be selected/deselected.
 ** argument             : obj : Grid Object
 **                        e   : GridClickEventInfo;
 ** return Type          :
 ** return description   :
 *****************************************************************************/
this.gv_IsGridCheckAll = 0;
this.gf_SetGridCheckAll = function (obj:Grid, e:GridClickEventInfo){
 var dsObj = eval("this." +obj.binddataset);
 var v_Colid = obj.getCellProperty("body", e.cell, "text").split("bind:").join("");
 this.gv_IsGridCheckAll = (this.gv_IsGridCheckAll ? 0 : 1);
 dsObj.set_enableevent(false);
 for (var i = 0; i < dsObj.getRowCount(); i++) 
 {
  dsObj.setColumn(i, v_Colid, this.gv_IsGridCheckAll);
 }
 obj.setCellProperty("Head", 0, "expr", this.gv_IsGridCheckAll);
 dsObj.set_enableevent(true);
}

Source Location

Sample\Grid\np_Grid_Head_CheckAll.xfdl

Cell background color changing using Timer

Setting EXPR on Cell's background whose cell color to be change

Setting Timer on onload event on form

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

Implementation Sources

this.setCellColor = "white";
this.fn_SetBlinkColor = function ()
{
 if (this.setCellColor == 'white') 
 {
  this.Dataset00.setColumn(1, "flag", 1);
  this.setCellColor = 'red';
 }
 else 
 {
  this.Dataset00.setColumn(1, "flag", 0);
  this.setCellColor = 'white';
 }
}
this.Grid_Brank_ontimer = function (obj:Form, e:TimerEventInfo)
{
 if (e.timerid == 1) 
 {
  this.fn_SetBlinkColor();
 }
}
this.Button01_onclick = function (obj:Button, e:ClickEventInfo)
{
 this.Dataset00.setColumn(1, "flag", 1);
}
this.decode = function ()
{
 var varRtnValue = null;
 var arrArgument = this.decode.arguments;
 var varValue = arrArgument[0];
 var bIsDefault = false;
 var nCount = 0;
 if ((arrArgument.length % 2) == 0) 
 {
  nCount = arrArgument.length - 1;
  bIsDefault = true;
 }
 else 
 {
  nCount = arrArgument.length;
  bIsDefault = false;
 }
 for (var i = 1; i < nCount; i += 2) 
 {
  if (varValue == arrArgument[i]) 
  {
   varRtnValue = arrArgument[i + 1];
   i = nCount;
  }
 }
 if (varRtnValue == null && bIsDefault) 
 {
  varRtnValue = arrArgument[arrArgument.length - 1];
 }
 return varRtnValue;
}

Source Location

Sample\Grid\np_Grid_SetBlinkColor.xfdl

Creating Dynamic Grid

Creating grid using script

Implementation of Source

We can create DataSet and Grid dynamically using Script.

this.Button00_onclick = function (obj:Button, e:ClickEventInfo)
{
 var objGrid = new Grid();
 objGrid.init("GridNm", "absolute", 37, 100, 367, 352,null,null);
 // Add Object to Parent Form
 this.addChild("Grid02", objGrid);
 objGrid.createFormat();
 // Show Object
 objGrid.show();
 // Create dataset 
 var objDs = new Dataset();
 objDs.set_name("ds_test");
 objDs.addColumn("no", "string");
 objDs.addColumn("name", "string");
 objDs.addColumn("age", "int");
 // Dataset Data Input
 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));
 }
 
 //objGrid.set_binddataset("ds_test");
    objGrid.set_binddataset(objDs);
 objGrid.appendContentsRow("head");
 objGrid.appendContentsRow("body");
 objGrid.appendContentsRow("summ");
 // Col Generation
 // Append one column by default from  appendContentsRow()
 objGrid.appendContentsCol();
 objGrid.appendContentsCol();
 // Col Size Setting
 objGrid.setFormatColProperty(0, "size", 100);
 objGrid.setFormatColProperty(1, "size", 100);
 objGrid.setFormatColProperty(2, "size", 100);
 // band setting by cell properties
 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");
  }
 }
}

Source Location

Sample\Grid\np_Grid_DynamicCreate.xfdl

Change background color of cell when column value changes

By using getOrgColumn method of Dataset, we can verify if the column value is changed.

Related Method

getOrgColumn

This method gets value from Original Buffer of DataSet.

If we want to change the value of the Background and Background2 of Grid cell property by checking previous record, we should enter the "COL2==ds_data.getOrgColumn(currow,'COL2')?'':'red'"  expression.

Source Location

Sample\Grid\np_Grid_Cell_ChangeValueColor.xfdl

Regular Expressions

Insert only Korean Characters in the Grid's input item.

By using the expression we can allow only Korean character to enter into input item.

Related Method

ontextchange

This event is executed when we enter any value in the input field like Korean Character, English Character or Number.

주요 소스 내용

/*
 * File Name   : Grid_Cell_InputHanGul
 * Description : Insert only Korean Characters in the Grid's input item.
 */

/*  Call Type  */
this.grd_output_ontextchange = function(obj:Grid, e:nexacro.GridEditTextChangeEventInfo)
{ 
 var objRegExp = new RegExp("[^ㄱ-힣 ]", "g");      
 this.alert("  Input text  33");
 var objResult = objRegExp.exec( e.chartext );
 this.alert("  Input text 444 ");
 if (objResult == null)
 {
  return true;
 }
 else
 {
  return false;
 }
}

Source Location

Sample\Grid\np_Grid_Cell_InputHanGul.xfdl

Merge

On Grid '┌' shape merging effect

By using Cell's line property making line thickness 0 , bottom and right line will be not be visible and looks like merge.

Changing line color through properties window

By using Grid's line property applying color order and concept.

We can set line property of right and bottom in Grid.
Top and left property follow the line property of the left cell's right, top cell's bottom.

Way to set up general line property

When we set value 2 ~ 4 in line property, the applied order is below.

Source Location

Sample\Grid\np_Grid_Cell_MergeHeader.xfdl

Distinguishing band (Head, Body) on clicking Grid

Using oncellclick event on band (Body, Head...) the Grid we can distinguish header, body and band part. When we click ontside the grid event will not occured. If necessary we can distinguish using the button down event.

Main source content

this.grd_output_onlbuttondown = function(obj:Grid, e:nexacro.GridMouseEventInfo)
{
 if (e.row == -1)
 {
  alert("Head Band");
 }
 else if (e.row == -9)
 {
  alert("Blank Body");  
 }
 else if (e.row == -2)
 {
  alert("Summary Band");  
 } 
  else
     {
  alert("Body Band");
  } 
}

Source Location

Sample\Grid\np_Grid_Format_CheckPosition.xfdl

Scroll

Scroll two grids at the same time

In case of moving scrollbar using vscroll property on the one Grid, same time another scrollbar change position on another grid.

Main Source Content

/*
 * File Name   : Grid_Format_ScrollTwoGrid
 * Discription : Scroll two grids at same time
 */
 
/*  onmouseenter */
this.grd_output0_onmouseenter = function(obj:Grid, e:nexacro.MouseEventInfo)
{
    // Remove Scroll Event on Opposite Grid
    this.grd_output1.removeEventHandler("onvscroll", this.grd_output1_onvscroll, this);    
    // Connecting your own Scroll Event.
    obj.addEventHandler("onvscroll", this.grd_output0_onvscroll, this);
}
/*  onmouseenter */
this.grd_output1_onmouseenter = function(obj:Grid, e:nexacro.MouseEventInfo)
{
    // Remove the Scroll Event from Opposite of Grid
    this.grd_output0.removeEventHandler("onvscroll", this.grd_output0_onvscroll, this);
    // Connecting your own Scroll Event.
    this.grd_output1.addEventHandler("onvscroll", this.grd_output1_onvscroll, this);
}
/*  onvscroll */
this.grd_output0_onvscroll = function(obj:Grid, e:nexacro.ScrollEventInfo)
{
    this.grd_output1.vscrollbar.set_pos(e.pos);
}
/*  onvscroll */
this.grd_output1_onvscroll = function(obj:Grid, e:nexacro.ScrollEventInfo)
{
    this.grd_output0.vscrollbar.set_pos(e.pos);
}

Source Location

Sample\Grid\np_Grid_Format_ScrollTwoGrid.xfdl

Formats

Getting format information from the Grid changed by user

• By using the getCurFormatString method of Grid, We can get information of Grid as XML format.

• getCurFormatString can get all information about Grid's size, merger and value etc as well as sequence.

Related Method

getCurFormatString

This method provides information of currently viewing screen as String.

formats

This property is used to assign screen's information of the Grid.

The main source

/*
 * File Name   : Grid_Format_UserFormat
 * Description : Getting format information from the Grid changed by user
 */
 
 /* Get gridformat*/
this.btn_execute_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
 var sFormatContents = this.grd_output0.getCurFormatString();
 
 this.txt_output.set_value(sFormatContents);
 this.grd_output1.set_formats("<Formats> "+sFormatContents+" </Formats>");
}

Source Location

Sample\Grid\np_Grid_Format_UserFormat.xfdl

Changing currently focusing record to editable input type

By using the Grid cells editdisplay property expression ,only current focusing record can be changed.

Related Properties

editdisplay, combodisplay

Using editdisplay property currently focusing record can change into editable input type, and using combodisplay property currently focusing record's display type can change into editable combo type.

Main Source Content

/*
 * File Name   : Grid_Row_FocusEdit
 * Discription : Only the records having focus can be changed by input.
 */
this.iCurrow = 0;
this.ds_employees_onrowposchanged = function(obj:Dataset, e:nexacro.DSRowPosChangeEventInfo)
{
 this.iCurrow = e.newrow;
}

Source Location

Sample\Grid\np_Grid_Row_FocusEdit.xfdl

Selecting data using Popup Div

In this technique we are not input data directly in Grid, We choose data from the list display on the popup, then this data is inserted in the list.

Main Source Content

this.col;
this.row;
this.Grid00_onexpandup = function(obj:Grid, e:nexacro.GridMouseEventInfo)
{
 this.col = e.cell;
 this.row = e.row;
 
 var nX = system.screenToClientX(this, system.clientToScreenX(obj, (e.cell*232) +150));
 var nY = system.screenToClientY(this, system.clientToScreenY(obj, (e.row*24)+35));  
  this.PopupDiv00.trackPopup(nX, nY, null, null, "call_back");
 
}
this.call_back = function (strId,str)
{
 this.Dataset00.setColumn( this.row, this.col , str)
}
this.PopupDiv00_Grid01_oncelldblclick = function(obj:Grid, e:nexacro.GridClickEventInfo)
{
 var value = this.ds_popup.getColumn(e.row , 1 );
 this.PopupDiv00.closePopup(value);
}

Source Location

Sample\Grid\np_Grid_Row_PopupChose.xfdl

Drag & Drop

Pasting grid data using Drag & Drop

We can paste cell data in grid into EditBox using drag.

Main Source Content

this.drag_data = "";
this.Grid00_ondrag = function (obj:Grid, e:GridDragEventInfo)
{
 var col_id = obj.getCellProperty("body", e.cell, "text");
 col_id = col_id.slice(5);
 this.drag_data = this.ds_bind.getColumn(e.row, col_id);
 return true;
 
}
this.Edit00_ondrop = function (obj:Edit, e:DragEventInfo)
{
  this.Edit00.set_value(this.drag_data);
  this.drag_data = "";
}

Source Location

Sample\Grid\np_Grid_DragDrop_Paste.xfdl

A way to handle when column value of CheckBox in grid is not 1 or 0

we can receive value using CheckBox in particular column in grid.
The value of checkbox in grid should be 0 or 1. So this explains to use other values.

Main Source Content

Setting Expr in Grid

Input following stript in Cell expr expressing CheckBox
expr:CHK=='Y'?'1':'0'

Dataset Event Script

this.ds_data_oncolumnchanged = function(obj:Dataset, e:nexacro.DSColChangeEventInfo)
{
 if(e.columnid == "CHK")
 {
  obj.enableevent = false; //false can stop event temporarily  
  if(e.newvalue == '1')
  {
   obj.setColumn(e.row,"CHK",'Y');
  } else if(e.newvalue == '0')
  {
  obj.setColumn(e.row,"CHK",'N');  
  }
  obj.enableevent = true;
 }
}

Source Location

Sample\Grid\np_Grid_CheckBox.xfdl