16.Grid

16.1정렬

16.1.1기본 Sort 처리방법

그림 16-1Grid_Row_Sort_0

주요 소스 내용

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

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

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

그림 16-2Grid_Row_Sort_4

참고사항

keystring

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

getCellText, getCellValue

getCellText 메소드는 그리드 해당 셀에 표시되는 텍스트 값을 가져오는 메소드입니다.
(예를 들어 mask포멧을 지정한 경우나, expr를 통해 계산된 값을 표현합니다.)
getCellValue는 그리드에 bind된 dataset의 값을 보여줍니다.
 (예를 들어 mask포멧 및 expr된 값이라도 getCellValue는 bind된 dataset정보를 이용하여 표현합니다.)

getFormatColProperty, getCellProperty, getBandProperty

그림 16-3Grid_Row_Sort_1

주요 소스 내용

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

정렬, keystring

소스 위치

Sample\Grid\np_Grid_Row_HeadSort.xfdl

16.2RowType

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

그림 16-4Grid_rowtype_0

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

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

그림 16-5Grid_rowtype_1

변경된 RowType을 확인하는 방법?

소스 위치

Sample\Grid\np_Grid_RowType.xfdl

16.3행 번호

16.3.1currow를 이용한 일련번호 표현

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

그림 16-6Grid_currow_0

16.3.2expr를 이용하여 currow 설정

그림 16-7Grid_currow_1

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

expr값에 currow에 +1를 해 주는 이유는 시작번호가 0부터 표현을 하기 때문에

1로 표현하기 위해 +1를 설정하였으며, 이 부분은 개발시 표현방법에 따라 달라질 수 있습니다.

Database를 이용하지 않고 그리드에 일련번호를 표현이 가능한가요?

소스 위치

Sample\Grid\np_Grid_Currow.xfdl

16.4ToolTipText

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

그림 16-8Grid_ToolTipText_1

16.4.1Cell별 ToolTipText 지정방법

그림 16-9Grid_ToolTipText_0

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

ToolTipText를 구현하기 위해 그리드의 onmousemove 이벤트에서 스크립트를 통해 ToolTipText를 표현하기 위한 작업을 하는 경우가 있습니다.

그러나 이 방법은 그리스 속도(성능)에 많은 영향을 주기 때문에 권장하지 않습니다.

그리드 Cell에 표현하는 내용이 긴 경우 ToolTipText를 이용하여 보여줄 수 있습니다.

마우스를 그리드 Cell에 위치하는 경우 ToolTipText를 표현할 수 있나요?

그리드에 표현하는 Cell내용이 많은 경우 사용을 하고 싶습니다.

소스 위치

Sample\Grid\np_Grid_ToolTipText.xfdl

16.5틀 고정

16.5.1기본

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

그림 16-10Grid_band_0

Grid Contents Editor를 이용한 설정

그림 16-11Grid_band_1

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

band를 특정 위치에 설정하고자 하는 경우 앞에 위치한 column에도 band를 함께 설정해 주어야 합니다.

예) col1에 band를 설정하고자 하는 경우 앞에 column col0에서 설정이 필요합니다.

이를 좀더 쉽게 사용하기 위해서는 키보드 Shift, control 키를 누른 상태에서 마우스를 이용하여

컬럼을 선택하면 한꺼번에 선택을 하는데 도움이 됩니다.

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 버튼을 클릭하게 되면 값이 설정되는 것을 확인할 수 있습니다.

참고사항

그림 16-12Grid_band_2

특정 column을 틀 고정시킬 수 있나요?

소스 위치

Sample\Grid\np_Grid_Band.xfdl

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

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

그림 16-13Grid_Cell_HeaderClickFix_0

소스 코드

/*
 * 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에 현재 설정된 칼럼의 속성값을 변경하는 메소드

setFormatColProperty, fix

소스 위치

Sample\Grid\np_Grid_Cell_HeaderClickFix.xfdl

16.6Paging

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

데이타 조회는 가능한 조건(일정 기간을 조건으로 설정)을 주어 데이터를 줄이는 방법을

검토 후 개발을 해야 합니다.

대용량 데이터를 일괄 처리할 경우 서버의 메모리부족의 발생 원인이 될 수 있습니다.

16.6.1filter를 이용한 페이징 처리

그림 16-14Grid_Paging_0

Grid에 보여지는 데이터를 페이징 처리할 수 있습니다.(소스 구현필요)

일반적인 웹 페이지에서 처리하던 페이징은 데이터가 변경되는 경우 서버에서 데이터를

재조회 하지만 본 예제는 필터 기능을 이용하여 서버에 데이터를 호출하는 횟수를 줄입니다.

(해당 방법은 페이지 처리시 매번 데이타를 호출하는 횟수는 줄일 수 있으나,

처음 데이터를 조회시 많은 데이터를 가져오게 되므로 서버에 많은 부하를 줄 수 있습니다.)

해당 샘플은 서비스(데이터 호출)를 연계하지 않고 스크립트를 이용하여 데이터를 만들었습니다.

주요 소스 내용

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 에서 조건식을 만족하는 레코드만 보이게 하는 메소드이다.

페이징, filter

소스 위치

Sample\Grid\np_Grid_Format_Paging_filter.xfdl

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

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

그림 16-15Paging_onvscroll_0

주요 소스 내용

/*  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 이 발생된 종류에 대한 값을 가진 속성이다.

nexacro studio의 Help(Objects Reference>EventInfo Objects>ScrollEventInfo>)를 참고한다.

페이징, filter, onvscroll

소스 위치

Sample\Grid\np_Grid_Format_Paging_onvscroll.xfdl

16.7Suppress

16.7.1Suppress 를 이용한 표현방법

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

그림 16-16Grid_Suppress_0

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

설정방법

그림 16-17Grid_Suppress_1

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

그리드에 suppress를 이용하여 표현되는 경우 실제 데이터 값은 유지 되며 단지 디스플레이상에서만 표현됩니다.

여러 행에 컬럼의 값이 동일한 경우 한번만 표현해 줄 수 있는 방법이 있습니까?

소스 위치

Sample\Grid\np_Grid_Suppress.xfdl

16.8Combo Filter

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

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

그림 16-18Grid_Row_ExcelFilter_0

관련 메소드

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

filter, setCellProperty, 엑셀

소스 위치

Sample\Grid\np_Grid_Row_ExcelFilter.xfdl

16.9Expr 사용방법

16.9.1조건에 따른 display, edittype변경

그림 16-19Grid_ExprCase1

Property를 이용한 설정방법

그림 16-20Grid_Expr_Case_1_1

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

조건에 따른 displaytype 또는 edittype을 변경할 수 있나요?

소스 위치

Sample\Grid\np_Grid_Expr_Case1.xfdl

16.9.2Expr 삼항연산식

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

그림 16-21Grid_ExprCase2

Property를 이용한 설정방법

그림 16-22Grid_Expr_Case_2_1

BackGround를 설정하고자 하는 Cell를 선택 후 Cell속성 background에서 expr를 기술합니다.
EXPR(Column0=='1'?'red':Column0=='2'?'pink':Column0=='3'?'silver':'yellow')

background : 홀수 Row표시

background2 : 짝수 Row표시

그리드 속성 중 useselcolor를 false로 설정해야 합니다.

Row별 BackGround Color를 설정할 수 있나요?

소스 위치

Sample\Grid\np_Grid_Expr_Case2.xfdl

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

그림 16-23Grid_ExprCase3

rowlevel에 따른 background 설정

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

그림 16-24Grid_Expr_Case_3_2

DataSet의 keystring 설정

그림 16-25Grid_ExprCase3_1

keystring에 지정된 G:department,group를 이용하여 DataSet이 Grouping됩니다.

rowtype에 따른 background 설정

그림 16-26Grid_Expr_Case_3_4

rowtype에 따른 edittype 변경

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

그림 16-27Grid_Expr_Case_3_5

DataSet에 addrow를 하게 되면 RowTypw은 2가 됩니다.

이때 컬럼의 값을 수정하게 되면 RowType이 Update(4)로 변경되지 않습니다. Update로 변경되는 경우는 Data를 조회한 후 수정하는 경우에만 반영됩니다.

소스 위치

Sample\Grid\np_Grid_Expr_Case3.xfdl

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

그림 16-28Grid_ExprCase4

expr에서 함수 호출하기

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

그림 16-29Grid_Expr_Case_4_2

Grid가 포함된 폼의 함수를 접근하기 위해서는 반드시 comp.parent. 을 기술해 주어야 합니다.

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

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

그리드 expr 구문에서 폼에 기술된 스크립트 접근이 가능한가요?

소스 위치

Sample\Grid\np_Grid_Expr_Case4.xfdl

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

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

그림 16-30Grid_ExprCase5

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

그림 16-31Grid_Expr_Case_5_3

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

그림 16-32Grid_Expr_Case_5_4

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

Sample\Grid\np_Grid_Expr_Case5.xfdl

16.9.6expr 실행 결과값 얻는방법

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

그림 16-33Grid_ExprCase6

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

expr에 설정된 실행결과를 얻을 수 있나요?

소스 위치

Sample\Grid\np_Grid_Expr_Case6.xfdl

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

그림 16-34Grid_ExprCase7

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

표 16-1expr 표현 예)

사용방법

간략설명

this.col

Grid의 cell의 index값을가져옵니다.

(this는 cell을 지시함 )

dataset.rowcount

Grid에 바인딩 된 Dataset의 전체 rowcount를 가져옵니다.

( bind된 dataset을 지시함)

dataset.rowposition

Grid에 바인딩 된 Dataset의 현재 row의 position 값을 가져옵니다. 현재 선택된 row(파란영역)의 position이 0입니다.(0부터시작) ( bind된 dataset을 지시함)

comp.currentcell

Grid에 현재 선택되어진 cell index를 가져옵니다.

현재 선택된 cell(파란영역)의 index가 0입니다.

(0부터시작) ( comp는 Grid를 지시함)

currow

Dataset의 row 의 index값을 가져옵니다.

그리드 Cell의 index를 구할 수 있나요?

그리드 row의 index를 구할 수 있나요?

소스 위치

Sample\Grid\np_Grid_Expr_Case7.xfdl

16.10그리드 행/열 합계

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

그림 16-35Grid_ColRow_SumMid_0

16.10.1Row(합계) 구하기

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

그림 16-36Grid_rowcol_getSum_2

expr:dataset.getSum("pay")

16.10.2열의 합계 구하기

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

그림 16-37Grid_rowcol_getSum_3

expr:pay - tax
소스 위치

Sample\Grid\np_Grid_ColRow_SumMid.xfdl

16.11그리드 소계/합계

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

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

그림 16-38Grid_DataSet_KeyString_Group_0

DataSet의 keystring 설정방법

그림 16-39Grid_DataSet_KeyString_Group_0_1

rowlevel별로 expr표현

그림 16-40Grid_DataSet_KeyString_Group_0_2

소스 위치

Sample\DataSet\np_Grid_DataSet_KeyString_Group1.xfdl

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

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

그림 16-41Grid_DataSet_KeyString_Group_1

DataSet의 keystring 설정방법

그림 16-42Grid_DataSet_KeyString_Group_1_1

rowlevel별로 expr표현

그림 16-43Grid_DataSet_KeyString_Group_1_2

소스 위치

Sample\Grid\Grid_DataSet_KeyString_Group_1.xfdl

16.11.3데이터셋의 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

소계 표현시 건수가 한 건인 경우 소계라인을 삭제하는 방법을 알고 싶습니다.

16.12fillareatype

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

그림 16-44Grid_FillArea_0

16.12.1fillareatype 설명

표 16-2설명

type

설명

비고

none

데이터가 없는 영역은 표시하지 않습니다.


linerow

그리드 라인만 그려지고 데이터나 컨트롤은 채워지지 않습니다.


datarow

그리드 라인과 출력되는 데이터(ex:ConstColumn)도 표시합니다.


controlrow

그리드 라인과 출력되는 컨트롤도 표시합니다.


allrow

그리드 라인과 출력되는 데이터 및 컨트롤을 모두 표시합니다.


그리드의 화면에서 데이터가 없는 영역에 대해서는 row를 표현할 수 있는 방법이 있습니까?

소스 위치

Sample\Grid\np_Grid_FillAreaType.xfdl

16.13password

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

그림 16-45Grid_password_0

16.13.1mask를 이용한 password설정하기

그림 16-46Grid_password_1

데이타 입력시에도 password 처리를 원하는 경우에는 해당 Cell의 속성 edittype을 mask로 지정할 수 있습니다.

주민번호나, 전화번호 등에 대해 password 처리가 가능한가요?

소스 위치

Sample\Grid\np_Grid_Password.xfdl

16.14CheckBox 선택/해제

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

그림 16-47Grid_Head_CheckAll_0

16.14.1구현방법

그림 16-48Grid_Cell_headclick_1

그림 16-49Grid_Head_CheckAll_1

this.Grid00_onheadclick = function (obj:Grid, e:GridClickEventInfo)
{
 if (e.cell == 0) 
 {
  this.gf_SetGridCheckAll(obj, e);
 }
}
/*********************************************************************************************
 ** 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);
}

그리드 Head에 CheckBox를 만들어 전체 Row에 대해 선택/해제를 구현하고 싶습니다.

구현 방법이 어떻게 되나요?

소스 위치

Sample\Grid\np_Grid_Head_CheckAll.xfdl

16.15Timer를 이용한 Cell background Color변경

그림 16-50Grid_SetBlinkColor_0

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

그림 16-51Grid_SetBlinkColor_1

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

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

숫자 1000는 1초를 의미합니다.

16.15.3구현 소스

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

일정 시간(1초) 간격으로 DataSet의 컬럼의 값을 변경 해 주면

그리드는 해당 DataSet의 컬럼 값의 변화에 따라 그리드에 표현이 됩니다.

이 샘플에서는 flag라는 DataSet의 컬럼의 값을 1, 0으로 변경해 주도록 되어 있습니다.

특정 Cell에 대한 색상을 변경할 수 있나요?

일정 간격으로 깜빡임 효과를 구현하고 싶습니다.

소스 위치

Sample\Grid\Grid_SetBlinkColor_0.xfdl

16.16Grid 동적생성

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

그림 16-52Grid_DynamicCreate_0

구현 소스

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

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

그림 16-53Comp_Grid_Cell_ChangeValueColor_0

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

16.17.1관련 메소드

getOrgColumn

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

backgroud expr설정

그림 16-54Grid_Cell_ChangeValueColor_1

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

getOrgColumn

소스 위치

Sample\Grid\np_Grid_Cell_ChangeValueColor.xfdl

16.18정규식

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

그림 16-55Grid_Cell_InputHanGul_0

정규식 패턴을 이용하여 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;
 }
}

한글, ontextchange, RegExp

소스 위치

Sample\Grid\np_Grid_Cell_InputHanGul.xfdl

16.19병합

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

그림 16-56Grid_Cell_MergeHeader_0

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

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

그림 16-57Grid_Cell_MergeHeader_1

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

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

일반적인 line속성 지정방법

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

그림 16-58Grid_Cell_MergeHeader_2

병합

소스 위치

Sample\Grid\np_Grid_Cell_MergeHeader.xfdl

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

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

그림 16-59Grid_Format_CheckPosition_0

16.20.1주요 소스 내용

/*  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

16.21스크롤

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

그림 16-60Grid_Format_ScrollTwoGrid_0

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

Vscrollbar

16.22Formats

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

사용자가 변경한 정보를 서버에 저장해둔 다음 사용자가 다시 화면을 실행시킬 때 Grid에 할당하면 사용자 개인별로 다른 포맷을 가질 수 있습니다.

그림 16-61Grid_Format_UserFormat_0

관련 메소드

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

getCurFormatString, formats

소스 위치

Sample\Grid\np_Grid_Format_UserFormat.xfdl

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

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

그림 16-62Grid_Row_FocusEdit_0

16.23.1관련 속성

editdisplay, combodisplay

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

16.23.2expression 설정

그림 16-63Grid_Row_FocusEdit_1

16.23.3주요 소스 내용

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

editdisplay, combodisplay

소스 위치

Sample\Grid\np_Grid_Row_FocusEdit.xfdl

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

그림 16-64Grid_Row_PopupChose_0

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

16.24.1주요 소스 코드

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

팝업화면의 위치는 고객사 개발환경에 따라 조절해 사용하시기 바랍니다.

Grid의 데이타 입력방법을 팝업화면을 통해 구현하고 싶습니다.

소스 위치

Sample\Grid\np_Grid_Row_PopupChose.xfdl

16.25Drag & Drop

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

그림 16-65Grid_Data Drag_Paste_0

그리드에서 복사하고자 하는 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 = "";
}

Drag & Drop

그리드 Cell값을 Drag & Drop으로 복사할 수 있나요?

소스 위치

Sample\Grid\np_Grid_DragDrop_Paste.xfdl

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

그림 16-66grid_checkbox2

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

16.26.1주요 소스 내용

그리드 Expr설정

그림 16-67grid_checkbox3

체크박스를 표현하는 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;
 }
}

그리드에 expr이 기술되면 데이타가 많은 경우 속도에 영향을 줄 수 잇으므로 데이타를 1,0형태로 가져오는 것을 권장합니다.

소스 위치

Sample\Grid\np_Grid_CheckBox.xfdl

그리드 체크박스의 값을 0과1이 아닌 다른 값으로 사용할 수 있나요?