Lookup 컬럼

컬럼에 연결된 데이터 필드의 실제 값 대신 그 값과 연관된 다른 값을 셀에 표시할 수 있습니다.

values와 labels 설정

lookupDisplay속성을 true로 지정하고 values와 labels속성들의 목록을 지정하면 values값의 위치에 맞는 labels 항목이 표시됩니다.

values/labels 컬럼에 values로 설정된 값 중 하나를 입력해 보세요.

var columns = [{
    ...
}, {
    name: "UserName",
    fieldName: "UserName",
    width: "130",
    sortable: false,
    lookupDisplay: true,
    values: ["VINET", "HANAR", "SUPRD", "VICTE", "THREE", "SEVEN"],
    labels: ["<VINET>", "<HANAR>", "<SUPRD>", "<VICTE>", "<THREE>", "<SEVEN>"],
    header: {
        text: "Values/Labels",
    }
}, {
    ...
}];

grid.setColumns(columns);

lookupData

DataColumn의 values와 labels의 값을 별도로 입력하지 않고 JSON형태의 데이터를 lookupData속성을 사용해서 한번에 적용할 수 있습니다.

var lookupDatas = [
    {value: "VINET", label: "<VINET>"},
    {value: "HANAR", label: "<HANAR>"},
    {value: "SUPRD", label: "<SUPRD>"},
    {value: "VICTE", label: "<VICTE>"},
    {value: "THREE", label: "<THREE>"},
    {value: "SEVEN", label: "<SEVEN>"}
];

var columns = [
    {
        name: "UserName",
        fieldName: "UserName",
        width: "130",
        sortable: false,
        lookupDisplay: true,
        lookupData: lookupDatas,   
        //value와 label의 속성명을 바꾸고 싶은 경우 아래와 같이 사용
        //lookupData: {value:"code", label:"text", list:[{code: "M", text: "매일유업"}, {code: "S", text: "서울우유"}]}, 
        header: {
            text: "lookupDatas"
        },
        editor: {
            type: "dropdown"
        },
        styleName: "orange-column"
    }
]

labelField 설정

해당 컬럼 셀에는 실제 값 대신 이 필드의 셀과 같은 행에 있는 labelField의 값을 표시합니다. 아래 컬럼은 'Age'필드의 값이 표시되는게 아니라 'AgeLabel'필드의 값이 표시됩니다.

var columns = [{
    ...
}, {
    name: "Age",
    fieldName: "Age",
    width: "130",
    lookupDisplay: true,
    labelField: "AgeLabel", //label로 사용할 field설정
    header: {
        text: "Label Field",
    }
}, {
    ...
}];

grid.setColumns(columns);

Label Field컬럼 값 확인

alert(dataProvider.getFieldValues("Age"));

labelField 값 확인

alert(dataProvider.getFieldValues("AgeLabel"));

dropDown lookup 설정

values와 labels 목록은 DropDown 편집기의 lookup 목록으로 사용될 수도 있습니다.

var columns = [{
    ...
}, {
    name: "Gender",
    fieldName: "Gender",
    width: "100",
    sortable: false,
    lookupDisplay: true,
    editor: {
        type: "dropdown",
        dropDownCount: 2,
        domainOnly: true,
        values: ["Male","Female"],
        labels: ["<Male>","<Female>"]
    },
    header: {
        text: "Gender"
    }
}, {
    ...
}];

grid.setColumns(columns);

value값 확인하기

현재 포커스 위치의 value값을 확인해보세요.

var focusIndex = gridView.getCurrent().itemIndex;
var focusField = gridView.getCurrent().fieldName;
alert(gridView.getValue(focusIndex, focusField));