정렬

기본 Sort 처리방법

주요 소스 내용

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
}

DataSet의 keystring에 Sort방법을 기술하여 원하는 정렬결과를 얻을 수 있습니다.

소스 위치

Sample\Grid\np_Grid_Row_Sort.xfdl

Grid Header이벤트를 이용한 정렬 구현하기

DataSet의 keystring 속성을 이용하여 Grid에 보여지는 데이터를 정렬합니다.

참고사항

keystring

Dataset의 소계 처리를 위하여 그룹핑 하거나 정렬 시 사용하는 속성

getCellText, getCellValue

getCellText 메소드는 그리드 해당 셀에 표시되는 텍스트 값을 가져오는 메소드입니다.
(예를 들어 mask포멧을 지정한 경우나, expr를 통해 계산된 값을 표현합니다.)

getCellValue는 그리드에 bind된 dataset의 값을 보여줍니다.
 (예를 들어 mask포멧 및 expr된 값이라도 getCellValue는 bind된 dataset정보를 이용하여 표현합니다.)

getFormatColProperty, getCellProperty, getBandProperty

• Grid 셀의 속성값을 가져올 때 영역에 따라 사용하는 메소드.

• getFormatColProperty 메소드는 칼럼, getCellProperty 메소드는 셀, getBandProperty는 밴드 속성을 가져올 때 사용합니다.

주요 소스 내용

/*
 * File Name   : Comp_Grid_Row_Sort
 * Description : 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));
   }
  }
 } 
}

소스 위치

Sample\Grid\np_Grid_Row_HeadSort.xfdl

RowType

getRowType을 이용하여 그리드에서 표현되는 각 Row별 변경유무를 확인할 수 있습니다.

그리드에서 각 Row별 상태를 체크할 수 있습니다. 

각 Type에 대한 설명은 아래와 같습니다. 
0 : EMPTY
1 : NORMAL
2 : INSERT
4 : UPDATE
8 : DELETE
20 : GROUP

소스 위치

Sample\Grid\np_Grid_RowType.xfdl

행 번호

currow를 이용한 일련번호 표현

그리드 화면을 표현시 맨 앞 컬럼에 일련번호를 표현해야 하는 경우에 Database를 통해 
일련번호를 가져와 보여줄 수 있지만 그리드의 기본 기능을 이용하여 표현이 가능합니다.

expr를 이용하여 currow 설정

일련번호를 표현하고자 하는 cell의 속성 expr에 'currow + 1'를 설정하게 되면 
그리드 cell에 일련번호가 표현됩니다.

소스 위치

Sample\Grid\np_Grid_Currow.xfdl

ToolTipText

Grid Cell별 ToolTipText를 표현하는 방법에 대한 설명입니다.

Cell별 ToolTipText 지정방법

Cell별 ToolTipText는 표현하고자 하는 Cell속성에 DataSet컬럼을 바인딩 하면 바인딩된 컬럼에 
대해 그리드 해당 Cell영역에 마우스가 위치하는 경우 ToolTipText가 표현됩니다.

소스 위치

Sample\Grid\np_Grid_ToolTipText.xfdl

틀 고정

기본

그리드를 이용하여 데이터를 표현하는 경우 컬럼의 수가 많게 되면 가로 스크롤이 생기게 됩니다.
이 경우 왼쪽 또는 오른쪽에 일정 Cell를 고정시킨 후 값을 보고자 하는 경우 그리드 cell 기능 중 
band를 사용하여 틀 고정이 가능합니다.

Grid Contents Editor를 이용한 설정

그리드 Col속성의 band값을 설정하여 Cell고정이 가능합니다.

setFormatColProperty 를 이용한 설정방법

스크립트를 이용하여 원하는 위치에 틀 고정을 시킬 수 있습니다.

this.Button00_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
    //주의사항 Cell의 index의 시작은 0부터 사용합니다. 
    //setFormatColProperty Method는 그리드에 현재 설정된
    //Format Columns의 각 열의 속성값을 설정하는 메소드입니다
    this.Grid01.setFormatColProperty(1, "band", "left");
    this.Grid01.setFormatColProperty(8, "band", "right");
}

band setting 버튼을 클릭하게 되면 값이 설정되는 것을 확인할 수 있습니다.

참고사항

• 중간 Cell은 틀 고정을 할 수 없습니다.

• 고정하고자 하는 영역에 Merge band가 있는 경우 사용할 수 없습니다.

• 설정시 아래와 같은 메시지가 출력됩니다.

소스 위치

Sample\Grid\np_Grid_Band.xfdl

Grid에서 병합된 헤더 클릭시 틀 고정하기

화면 실행타임에서 사용자가 헤더를 클릭할 경우 setFormatColProperty 메소드를 이용하여 MS의 엑셀 
틀 고정과 같은 형태로 칼럼을 고정할 수 있습니다.

소스 코드

/*
 * 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++;
            } 
        }
    } 
}

관련 메소드

setFormatColProperty

Grid에 현재 설정된 칼럼의 속성값을 변경하는 메소드

소스 위치

Sample\Grid\np_Grid_Cell_HeaderClickFix.xfdl

Paging

그리드를 이용하여 페이징 처리하는 방법에 대해 기술합니다.

filter를 이용한 페이징 처리

주요 소스 내용

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);     
}

관련 메소드

filter

Dataset 에서 조건식을 만족하는 레코드만 보이게 하는 메소드이다.

소스 위치

Sample\Grid\np_Grid_Format_Paging_filter.xfdl

Grid 이벤트(onvscroll)를 이용한 페이징 처리

그리드에 표현되는 데이터를 한꺼번에 가져오지 않고 Grid에서 스크롤을 움직일 때  페이징 단위로 값을 가져오는 방법입니다.

주요 소스 내용

/*  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);
    }
 } 
}

서버와 통신시 최대 레코드 수를 이용해 데이터를 가져온다. 
최대 레코드수가 10개, 현재 페이지가 1페이지라면 서버에서 1~10라인까지 데이터를 가져온다. 
가져온 데이터는 Grid에 바인딩 되어 있는 Dataset에 추가한다.

참고사항

type

Scroll 이 발생된 종류에 대한 값을 가진 속성이다.

소스 위치

Sample\Grid\np_Grid_Format_Paging_onvscroll.xfdl

Suppress

Suppress 를 이용한 표현방법

복수개의 행에서 같은 열에 있는 셀의 값이 같을 경우에 이를 하나로 표현해 주는 속성입니다.

위의 그림처럼 suppress를 적용 전과 적용 후의 차이를 확인할 수 있습니다.

설정방법

suppress를 적용하고자 하는 cell 속성에서 순차적으로 값을 지정해 주면 됩니다. 
예) group과 department에 설정을 할 경우 group속성에 1, department속성에 2 를 지정해 
주면 됩니다.

소스 위치

Sample\Grid\np_Grid_Suppress.xfdl

Combo Filter

Grid에서 엑셀의 필터기능 구현하기

Grid 셀의 Combo기능과 Dataset.의 filter 메소드를 이용하여 엑셀의 필터기능을 구현할 수 있습니다.

관련 메소드

setCellProperty

Grid의 특정 셀의 속성값을 변경하는 메소드

filter

Dataset의 레코드 중 조건식에 만족하는 레코드만 보이게 하는 메소드

주요 소스 내용

/*
 * 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");
    }
}

소스 위치

Sample\Grid\np_Grid_Row_ExcelFilter.xfdl

Expr 사용방법

조건에 따른 display, edittype변경

Property를 이용한 설정방법

expr를 처리하고자 하는 Cell의 속성 중 displaytype, edittpye에서 expr를 구현할 수 있습니다.
예) DataSet의 Column2의 값이 Y이면 checkbox를 표현합니다. Y가 아닌 경우에는 normal를 표현합니다.

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

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

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'")
}

소스 위치

Sample\Grid\np_Grid_Expr_Case1.xfdl

Expr 삼항연산식

Expr 처리시 비교조건이 여러 개일 경우 처리방법에 대해 기술합니다.

Property를 이용한 설정방법

BackGround를 설정하고자 하는 Cell를 선택 후 Cell속성 background에서 expr를 기술합니다.

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

소스 위치

Sample\Grid\np_Grid_Expr_Case2.xfdl

Dataset의 rowlevel, rowtype을 이용한 expr설정

• Dataset의 keystring에 Group설정 시 소계 부분에서 rowlevel 에 따라 property값을 expr로 처리할 수 있습니다.

• Grid cell의 expr에 아래와 같이 dataset.getRowLevel(rowidx) , dataset.getRowType(rowidx) 선언 시 각row의 level과 type을 Grid에 나타낼 수 있습니다.

rowlevel에 따른 background 설정

Grid에서 소계 level에 따라 background색상을 다르게 주고 싶을 경우 background에 getRowLevel(rowidx) 을 이용하여 expr 처리 할 수 있습니다.

DataSet의 keystring 설정

rowtype에 따른 background 설정

rowtype에 따른 edittype 변경

Grid에서 rowtype에 따라 edit를 제어할 수 있습니다. 
예를 들어 addRow하여 신규로 생성된 recode에 대해서만 색상을 준다던지, edit를 제어하고 싶을 경우 getRowType(rowidx)을 이용하여 expr로 처리 가능합니다.

소스 위치

Sample\Grid\np_Grid_Expr_Case3.xfdl

expr를 이용한 함수실행 결과 return방법

expr에서 함수 호출하기

Grid cell의 expr 에 함수를 선언하여 스크립트에서 처리된 값을 return 받을 수 있습니다.
아래처럼 특정 cell의 합을 구하기 위해 expr에 fn_sum(rowidx) 선언을 한 후 스크립트에서는
fn_sum 함수 내에서 로직 처리 후 return 해 줍니다.

expr에서 호출하는 function선언 부분

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

소스 위치

Sample\Grid\np_Grid_Expr_Case4.xfdl

Grid의 summery 영역 expr에서 casesum, caseavg 사용방법

Grid의 summery영역에 expr에서 getCaseSum, getCaseAvg 함수를 이용하여 Dataset의 지정된 범위 내에서 조건에 맞는 행을 대상으로 합계 또는 평균을 구할 수 있습니다.

summary 영역에 expr를 사용하여 casesum, caseavg 구현방법

DataSet의 column0 컬럼의 값이 10보다 큰 경우에만 sum을 구합니다.

DataSet의 column0 컬럼의 값이 10보다 큰 경우에만 avg을 구합니다.

소스 위치

Sample\Grid\np_Grid_Expr_Case5.xfdl

expr 실행 결과값 얻는방법

각 컴포넌트는 expr속성이 있어 다양한 수식 표현이 가능합니다. 
이때 expr값에 설정된 값을 확인해 보면 수식이 표현되는데 수식내용이 아닌 실행된 결과를 얻고자 하는 경우에 대한 방법을 기술합니다.

displaytext를 이용한 expr 실행결과 얻기

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

Grid의 expr 실행 값을 확인하는 방법

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

소스 위치

Sample\Grid\np_Grid_Expr_Case6.xfdl

Grid cell에서 expr로 표현 가능식(Scope 지정하는방법)

Grid cell의 expr에서 다양한 표현이 가능합니다.

소스 위치

Sample\Grid\np_Grid_Expr_Case7.xfdl

그리드 행/열 합계

그리드에 Row별 행/열에 대한 합계를 표현하는 방법에 대해 기술합니다.

Row(합계) 구하기

DataSet의 메소드 getSum을 이용하여 합계를 구할 수 있습니다.

expr:dataset.getSum("pay")

열의 합계 구하기

expr를 이용하여 합계를 구할 수 있습니다.

expr:pay - tax

소스 위치

Sample\Grid\np_Grid_ColRow_SumMid.xfdl

그리드 소계/합계

DataSet의 keystring 을 이용하여 그룹key를 지정하고 그룹에 대한 소계 및 합계를 자동으로 보여주는 기능입니다.

keystring 에 ","를 이용하여 그룹에 레벨을 지정하는 방법

• 예를 들어, "G:column1,column2"은 데이터를 column1으로 그룹핑한 후 그룹 내에서 column2로 다시 그룹핑한다는 의미입니다.

• 칼럼명에는 공백이 포함 가능하므로 ","의 앞과 뒤에는 공백이 없어야 합니다.

DataSet의 keystring 설정방법

rowlevel별로 expr표현

소스 위치

Sample\DataSet\np_Grid_DataSet_KeyString_Group1.xfdl

keystring에 두개 이상의 컬럼을 하나의 그룹키(group key)로 병합하는 방법

예를 들어, "G:+column1-column2" 형식으로 입력하면 column1과 column2의 값을 합쳐 그룹핑 값으로 사용하겠다는 뜻이 됩니다.

DataSet의 keystring 설정방법

rowlevel별로 expr표현

소스 위치

Sample\Grid\Grid_DataSet_KeyString_Group_1.xfdl

데이터셋의 keystring사용시 건수가 1건이 경우 소계 제거

데이터셋의 keystring으로 그리드에 소계가 표현되는데, 
건수가 1건인 소계는 제거 하도록 스크립트 처리하였습니다

주요 소스 내용

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); 
  } 
 }

소스 위치

Sample\Grid\Grid_DataSet_KeyString_Group_3.xfdl

fillareatype

그리드에 데이터가 없는 영역을 표시하는 방식을 설정하는 속성입니다.

fillareatype 설명

소스 위치

Sample\Grid\np_Grid_FillAreaType.xfdl

password

그리드 Cell에 전화번호, 주민등록 등을 표현 시 일부 데이터를 password 처리를 방법에 대해 기술합니다.

mask를 이용한 password설정하기

• mask속성에 password를 처리하고자 하는 영역을 { } 로 지정하면 지정된 영역은 *로 표현이 됩니다.

소스 위치

Sample\Grid\np_Grid_Password.xfdl

CheckBox 선택/해제

그리드의 Head Cell에 CheckBox를 만들어 그리드 전체 Row에 대한 선택/해제 방법을 설명합니다.

구현방법

• 그리드 Head에 CheckBox를 display와 edittype 속성에 설정합니다.

• 그리드 onheadclick이벤트에 그리드 head cell(Checkbox cell)에 클릭 이벤트가 발생시 그리드 Row에 대한 CheckBox를 선택/해제할 수 있는 스크립트를 구현합니다.

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

• 그리드 onheadclick에서 참조하는 method는 아래와 같습니다.

/*********************************************************************************************
 ** 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);
}

소스 위치

Sample\Grid\np_Grid_Head_CheckAll.xfdl

Timer를 이용한 Cell background Color변경

Color를 변경하고자 하는 Cell의 backgroud에 EXPR 설정

폼의 onload이벤트에서 Timer를 설정

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

구현 소스

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;
}

소스 위치

Sample\Grid\Grid_SetBlinkColor_0.xfdl

Grid 동적생성

Script를 이용한 그리드 생성하기

구현 소스

DataSet 과 그리드를 스크립트를 이용하여 동적 생성이 가능합니다.

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");
  }
 }
}

소스 위치

Sample\Grid\np_Grid_DynamicCreate.xfdl

컬럼값 변경시 Cell의 배경색 바꾸기

DataSet의 getOrgColumn 메소드를 이용하여 컬럼의 값이 변경되었는지를 확인하여 셀의 속성값을 변경할 수 있습니다.

관련 메소드

getOrgColumn

Dataset의 오리지널 버퍼에서 값을 얻는 메소드

backgroud expr설정

Grid 셀의 background, background2 속성에 다음과 같이 이전 레코드와 값이 같은지를 판단하는 "COL2==ds_data.getOrgColumn(currow,'COL2')?'':'red'” 값을 expression에 입력합니다.

소스 위치

Sample\Grid\np_Grid_Cell_ChangeValueColor.xfdl

정규식

Grid의 입력항목에 한글만 입력받기

정규식 패턴을 이용하여 Grid의 셀에 값을 입력하는 경우 한글만
입력 받을 수 있습니다.

관련 메소스

ontextchange

한글의 자소 단위 편집이나 영어 및 숫자 등을 입력할 때 발생하는 이벤트

소스 코드

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

소스 위치

Sample\Grid\np_Grid_Cell_InputHanGul.xfdl

병합

Grid 헤더에 '┌'모양과 같이 병합 효과내기

셀의 line 속성을 이용하여 선 굵기가 0에 해당하는 값(‘0 none #808080ff’)을 입력하면 우측과 
하단보다 라인 처리가 우선시되어 병합되는 효과를 낼 수 있습니다.

속성 창을 통한 line색 변경방법

Grid의 line 속성의 컬러 적용 순서 및 개념

그리드는 우측과 하단의 line속성만 지정할 수 있습니다. 
상단과 좌측에 대한  line속성은 좌측Cell의 우측과, 상단 cell의 하단 line의 속성을 따릅니다.

일반적인 line속성 지정방법

일반적인 line 속성에 라인 값을 2~4개 입력 시 적용되는 우선 순위는 아래와 같다.

소스 위치

Sample\Grid\np_Grid_Cell_MergeHeader.xfdl

Grid에서 클릭 시 밴드(Head, Body) 구분하기

Grid에서 oncellclick 이벤트는 밴드(Body, Head…)를 제외한 공간을 클릭하는 경우 이벤트가 발생하지 않습니다. 
따라서 필요한 경우 버튼다운 이벤트를 이용하여 구분할 수 있습니다.

주요 소스 내용

/*  Mouse Right Click on Grid  */
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");
 } 
}

소스 위치

Sample\Grid\np_Grid_Format_CheckPosition.xfdl

스크롤

두개의 Grid를 동시에 스크롤하기

Grid에서 스크롤을 움직이는 경우 vscrollbar 속성을 이용하여 다른 Grid도 동일하게 스크롤
위치를 변경합니다.

주요 소스 내용

/*
 * 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);
}

소스 위치

Sample\Grid\np_Grid_Format_ScrollTwoGrid.xfdl

Formats

사용자가 변경시킨 Grid의 포맷정보 구하기

• Grid의 getCurFormatString 메소드를 사용하여 현재 grid 의 정보를 XML 포맷형태로 가져 올 수 있습니다.

• getCurFormatString 은 순서 뿐만 아닌 그리드의 사이즈, 병합, 값 등등에 대한 모든 정보를 가져 올 수 있습니다.

관련 메소드

getCurFormatString

현재 보여지고 있는 Grid의 형태정보를 문자열로 얻는 메소드

formats

Grid의 형태정보를 할당하는 속성

주요 소스 내용

/*
 * File Name   : Grid_Format_UserFormat
 * Description : 사용자가 변경시킨 Grid의  포맷정보 구하기
 */
 /* 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>");
}

소스 위치

Sample\Grid\np_Grid_Format_UserFormat.xfdl

포커스를 가진 레코드만 입력형태로 변환하기

Grid 셀의 editdisplay 속성에 expression 구문을 이용하여 현재 포커스를 가진 레코드만 입력형태로 변경할 수 있습니다.

관련 속성

editdisplay, combodisplay

Grid 셀의 모양을 입력형태로 보여줄지를 결정하는 속성입니다.

expression 설정

주요 소스 내용

/*
 * File Name   : Grid_Row_FocusEdit
 * Discription : 포커스를 가진 레코드만 입력형태로 변환하기
 */
this.iCurrow = 0;
this.ds_employees_onrowposchanged = function(obj:Dataset, e:nexacro.DSRowPosChangeEventInfo)
{
 this.iCurrow = e.newrow;
}

소스 위치

Sample\Grid\np_Grid_Row_FocusEdit.xfdl

PoupuDiv를 이용한 데이터 선택방법

Grid에 코드성 데이터를 입력받는 방법으로 직접코드 값을 입력받는 방법이 아닌 
팝업형태의 리스트 데이터를 선택하여 사용하는 방법에 대해 기술합니다.

주요 소스 코드

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);
}

소스 위치

Sample\Grid\np_Grid_Row_PopupChose.xfdl

Drag & Drop

그리드 데이타를 Drag & Drop방식으로 붙여넣기

그리드에서 복사하고자 하는 Cell를 Drag하여 EditBox에  위치하면 값을 붙여넣기 할 수 있습니다.

주요 소스 내용

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 = "";
}

소스 위치

Sample\Grid\np_Grid_DragDrop_Paste.xfdl

그리드 체크박스 컬럼의 값이 1과0이 아닌 경우 처리방법

그리드를 이용하여 특정컬럼을 CheckBox형태로 값을 입력받는 경우가 있습니다. 
그리드에서 체크박스의 값 인식은 0과1만 사용이 가능하게 되는데 이를 해결하는 방법을 
기술합니다.

주요 소스 내용

그리드 Expr설정

체크박스를 표현하는 Cell expr에 아래와 같이 입력합니다. 
expr:CHK=='Y'?'1':'0'

DataSet이벤트 기술

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;
 }
}

소스 위치

Sample\Grid\np_Grid_CheckBox.xfdl