# Solid (appendix)

> 시트 내에 헤더 주변이나 푸터 주변에 고정된 행을 생성하여 사용하실 수 있습니다.
> 솔리드로 만들어진 행은 시트의 열의 개수나 너비에 영향을 받지 않고 독립적으로 구성됩니다.
> 따라서 시트에 가로 스크롤이 있어도 솔리드 행은 좌우로 밀리지 않고 고정됩니다. (열에 맞춰 셀이 배치되는 Head / Foot은 가로 스크롤 시 열과 함께 좌우로 움직입니다.)

[솔리드로 생성된 행 예]

## 설정 구문

    options.Solid = [
         {
            "id": "mySolidRow", //솔리드 행의 ID 부여
            "Space": 5, //솔리드 행의 위치 (아래에 위치 참고)
            "Height": 40, //솔리드 행의 높이 설정
            "Cells": "Today,Spacer1,DESC,BtnRed,Spacer1,BtnYellow,Spacer2,DESC2,DESC3", //커스텀 셀의 순서
            "CanFormula": 1,
            "CalcOrder": "DESC3",

            //각 셀의 기능 정의
            "Spacer1": { // 중간 공백 셀
              Type: "Text",
              Width: 3,
              CanEdit: 0,
              CanFocus: 0
            },
            "Spacer2": { // 중간 공백 셀 정의
              Type: "Text",
              Width: 10,
              CanEdit: 0,
              CanFocus: 0
            },
            "Today": { //오늘 날짜 셀
              Type: "Text",
              CanFocus: 0,
              CanEdit: 0,
              Color: "#334477",
              TextColor: "#EEEEEE",
              Align: "Center",
              Value: "오늘일자 : " + IBSheet.dateToString(new Date(), "yyyy-MM-dd")
            },
            "DESC": { // 레이블 셀
              Type: "Text",
              CanFocus: 0,
              CanEdit: 0,
              Align: "Right",
              Width: 120,
              Value: "위험도 변경 :"
            },
            "BtnRed": { //위험 버튼 셀
              Type: "Button",
              Button: "Button",
              Name: "redBtn",
              Class: "RED",
              Value: "위험",
              Width: 40,
              OnClick: function (e) {
                if (e.row) {
                  e.row.Color = "#FFAAAA";
                  e.sheet.refreshRow(e.row);
                }
              }
            },
            "BtnYellow": { //주의 버튼 셀
              Type: "Button",
              Button: "Button",
              Name: "yellowBtn",
              Class: "YELLOW",
              Value: "주의",
              Width: 40,
              OnClick: function (e) {
                if (e.row) {
                  e.row.Color = "#FFFFAA";
                  e.sheet.refreshRow(e.row);
                }
              }
            },
            "DESC2": { // 레이블 셀
              Type: "Text",
              Value: "검수까지 남은 기한:",
              Align: "Right",
              CanFocus: 0,
              CanEdit: 0,
              Width: 120
            },
            "DESC3": { // Formula를 이용한 남은기한 계산 셀
              Type: "Text",
              Color: "#DDD",
              Formula: function (f) {
                return f.Row ? ((f.Row.DTDY31 - new Date(2018, 1, 23)) / 86400000) + " 일" : "";
              },
              Width: 120
            }
          }
    ];

## 위치

솔리드 행은 Space 속성 값에 따라 다음과 같이 위치할 수 있습니다.

위치 | Space값 | 생성예
--- | --- | ---
시트 밖 상단 | -1 |
시트 안 헤더 위 | 0 |
시트 안 헤더 아래 | 1 |
시트 안 푸터 위 | 2 |
시트 안 푸터 아래 | 3 |
시트 안 가로스크롤바 아래 | 4 |
시트 밖 하단 | 5 |

## 솔리드를 이용한 예약된 기능

솔리드 행을 이용하여 그룹행이나 찾기행을 만들어 사용하실 수 있습니다.

1. 그룹행 사용하기

다음과 같은 구성을 통해 그룹행을 생성하실 수 있습니다.
그룹행 생성시 열의 헤더셀을 드래그하여 그룹행 위로 드롭하면 해당 열을 기준으로 한 그룹핑이 이루어 집니다.

    options.Solid = [
     {
         "id":"myGroupRow",      //솔리드 행의 ID 부여
         "Space":0,              //솔리드 행의 위치
         "Kind":"Group"          //솔리드 행의 종류
     }
    ];

2. 찾기(Search)행 사용하기

찾기 행을 통해 시트 내에 원하는 데이터를 선택하거나 표시할 수 있습니다.

    options.Solid = [
     {
         "Kind": "Search",           // 솔리드 행의 종류
         "Space": 1,                 // 솔리드 행의 위치
         "id": "searchZone",         // 솔리드 행의 ID 부여

         Cells: "Expression,Spacer1,Filter,Select,Mark,Find,Clear,Spacer2", // 솔리드 행 내에 Cell 생성.
                 //Expression, Filter, Select, Mark, Find, FindPrev, Clear는 내장 설정 예약어

         Expression: { // 검색하기 위한 expression 설정
             Action: "Last", // expression 셀 내용이 변경되었을때 취할 동작에 대한 설정
                             //Filter,Select,Mark,Find,FindPrev,Last 를 설정할 수 있음(Last는 이전 행동을 계속함.)
             Left: "5", // 셀 좌측에 지정한 px 만큼의 빈 공간 생성
             MinWidth: "90", // 최소 너비 px 단위
             // MaxWidth: "300",
             EmptyValue: "<s>검색어를 입력해 주세요</s>"  // input의 placeholder 속성과 동일한 기능
         },
         Spacer1: {   // 중간 공백 셀 정의
             Width: "10",
             Type: "Empty",
             CanFocus:0
         },
         Spacer2: {
             Width: "10",
             Type: "Empty",
             CanFocus:0
         },
         Filter: {   //필터 기능 버튼 (Expression 셀에 입력한 글자를 바탕으로 전체 열에 대해 필터링 실시)
             ButtonText: "필터"
         },
         Select: {   //선택 기능 버튼 (Expression 셀에 입력한 글자를 바탕으로 행단위로 선택)
             ButtonText: "선택"
         },
         Mark: {     //표시 기능 버튼 (Expression 셀에 입력한 글자를 포함하고 있는 행에 배경색을 변경)
             ButtonText: "마킹"
         },
         Find: {     //찾기 기능 버튼 (Expression 셀에 입력한 글자를 포함하고 있는 셀을 찾음. 아래로 계속 찾기 가능)
             ButtonText: "찾기"
         },
         Clear: {    //클리어 기능 버튼 (위에서 한 행위(필터,선택,마킹등을 원상복귀))
             ButtonText: "클리어",
             Width: "50"
         }
     }
    ];

### Read More

- Head / Foot appendix
- Kind appendix

### Since

product | version | desc
--- | --- | ---
core | 8.0.0.0 | 기능 추가