close
프로필 배경
프로필 로고

Develop Is Reality

JavaScript/Kendo UI ・2021. 8. 31. fullscreen 넓게보기

Kendo UI [5] Toolbar

Toolbar 예제

jQuery 기반의 환경에서 구성할 수 있는 Kendo UI 중 Toolbar에 대해 알아보도록 하겠다. telerik 사에서 제공하는 기본 예제들은 다음의 URL을 통해 확인할 수 있다. https://demos.telerik.com/kendo-ui/toolbar/index

해당 URL 접속 시, 확인할 수 있는 화면

 

 

Toolbar 예제

거의 왠만한 사용법은 공식 홈페이지의 demo, 그리고 공식 docs를 번역하여 확인하면 능숙하게 사용할 수 있다. telerik 사에서 다른 것은 몰라도 예제 만큼은 정말 풍부하게 잘 구현해놓았기 때문이다. 그렇기에 필자는 그 중에서도, 특히나 자주 사용될 것 같은 예제들에 대한 key point 만을 테스트하며 작성해보도록 하겠다.

 

  1. Toolbar 영역 생성

다음과 같이 Kendo UI를 통해 Toolbar 생성을 위한 영역 구축을 해보자. 그리고 Toolbar 기초 설정을 진행하도록 하자.

<body>
  <div id="toolbar"></div>
  
  <script>
    $("#toolbar").kendoToolBar({
      
    });
  </script>
</body>

위의 과정을 마치고 [ Run ] 버튼 클릭 시, 다음과 같은 화면을 확인할 수 있다.

Toolbar가 출력되었으나, 아무것도 보이지 않는 화면

 

  2. Toolbar 속성 부여 (버튼, 토글 버튼)

기본적인 속성으로 버튼과 토글 버튼을 부여할 생각이다.  다음과 같이 소스코드를 수정하도록 하자.

<script>
  $("#toolbar").kendoToolBar({
    items: [
      { type: "button", text: "버튼" },
      { type: "button", text: "버튼(토글)", togglable: true }
    ]
  });
</script>

위의 과정까지 마치고 [ Run ] 버튼 클릭 시, 다음과 같은 화면을 확인할 수 있다.

default 화면
토글 활성화

 

  3. Toolbar 속성 부여 (분할 버튼, 구분자, Template 지정, DropDownList 추가)(1)

이번에는 분할 버튼(splitButton), 구분자(separator), Toolbar 내 Template 지정 및 DropDownList를 추가해보도록 하겠다. 소스코드를 다음과 같이 수정해보자.

<script>
  $("#toolbar").kendoToolBar({
    items: [
      { type: "button", text: "버튼" },
      { type: "button", text: "버튼(토글)", togglable: true },
      {
        type: "splitButton",
        text: "입력 레이아웃",
        menuButtons: [
            { text: "상단", icon: "insert-up" },
            { text: "중단", icon: "insert-middle" },
            { text: "하단", icon: "insert-down" }
        ]
      }
    ]
  });
</script>

방금 수정하며 추가한 'splitButton'은 분할버튼이다. 어떤 기능을 갖고 있는 버튼인지는 잠시후 결과 화면에서 확인하도록 하자. 이번에는 구분자(separator)를 추가해보도록 하자.

<script>
  $("#toolbar").kendoToolBar({
    items: [
      { type: "button", text: "버튼" },
      { type: "button", text: "버튼(토글)", togglable: true },
      {
        type: "splitButton",
        text: "입력 레이아웃",
        menuButtons: [
            { text: "상단", icon: "insert-up" },
            { text: "중단", icon: "insert-middle" },
            { text: "하단", icon: "insert-down" }
        ]
      },
      { type: "separator" }
    ]
  });
</script>

구분자를 추가할 때에는 type만 설정해주면 된다. 다음으로는 toolbar 내 template를 지정해보도록 하자. 지정한 template에는 이전 게시물의 주제가 되었던 dropDownList를 추가할 생각이다. 다음과 같이 소스코드를 수정해보도록 하자.

<script>
  $("#toolbar").kendoToolBar({
    items: [
      { type: "button", text: "버튼" },
      { type: "button", text: "버튼(토글)", togglable: true },
      {
        type: "splitButton",
        text: "입력 레이아웃",
        menuButtons: [
            { text: "상단", icon: "insert-up" },
            { text: "중단", icon: "insert-middle" },
            { text: "하단", icon: "insert-down" }
        ]
      },
      { type: "separator" },
      { template: "<label for='dropdown'>유형 : </label>" },
      {
        template: "<input id='dropdown' style='width: 150px;' />",
        overflow: "never"
      }
    ]
  });
</script>

위의 과정까지 마치고 [ Run ] 버튼 클릭 시, 다음과 같은 화면을 확인할 수 있다.

분할 버튼, 구분자, Template 후 DropDownList 추가된 모습
분할 버튼 본체 클릭 시

분할 버튼은 아무리 본체를 클릭하여도 별다른 event를 지정하지 않았기에, 특별한 기능은 존재하지 않는다. 하지만 우측의 ▼ 아이콘을 클릭하면,

분할 버튼 좌측 ▼ 아이콘 클릭 시

menuButtons에서 설정한 값들이 출력되는 것을 확인할 수 있다. default 값은 최상위 버튼이 선택되어있다.

 

  3. Toolbar 속성 부여 (분할 버튼, 구분자, Template 지정, DropDownList 추가)(2)

결과값을 보며, dropDownList가 제대로 실행되지 않음을 확인할 수 있다. 당연하다. dropDownList를 설정하지 않았기 때문이다. toolbar와 별도로, toolbar 내 template의 dropDownList를 추가하기위해 소스코드를 다음과 같이 수정하도록 하자.

<script>
  $("#dropdown").kendoDropDownList({
    optionLabel: "선택",
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [
      { text: "Type A", value: 1 },
      { text: "Type B", value: 2 },
      { text: "Type C", value: 3 }
    ]
  });
</script>

위의 과정까지 마치고 [ Run ] 버튼 클릭 시, 다음과 같은 화면을 확인할 수 있다.

Toolbar 내 생성된 Template의 DropDownList

 

  4. Toolbar 속성 부여 (그룹 버튼)

그룹 버튼은 말 그대로, '버튼들의 그룹' 이다. 직접 소스코드를 수정하며 결과값을 확인하는 편이 더 빠를 것이다. 소스코드를 다음과 같이 수정하도록 하자.

<script>
  $("#toolbar").kendoToolBar({
    items: [
      
      ... 생략 ...
      
      { type: "separator" },
      {
        type: "buttonGroup",
        buttons: [
            { icon: "align-left", text: "좌측정렬", togglable: true, group: "text-align" },
            { icon: "align-center", text: "중앙정렬", togglable: true, group: "text-align" },
            { icon: "align-right", text: "우측정렬", togglable: true, group: "text-align" }
        ]
      }
    ]
  });
</script>

위의 과정까지 마치고 [ Run ] 버튼 클릭 시, 다음과 같은 화면을 확인할 수 있다.

default 화면
그룹 버튼 중 하나를 클릭 시 화면

 

  5. Toolbar 속성 부여 (버튼 간략화)

마지막으로 버튼을 간략화시키는 속성을 부여해보도록 하겠다. toolbar 내 버튼들을 간략하게 숨기는 기능이며, 소스코드 및 예제를 통하여 확인하도록 하자.

<script>
  $("#toolbar").kendoToolBar({
    items: [
      
      ... 생략 ...
      
      {
        type: "buttonGroup",
        buttons: [
            { icon: "align-left", text: "좌측정렬", togglable: true, group: "text-align" },
            { icon: "align-center", text: "중앙정렬", togglable: true, group: "text-align" },
            { icon: "align-right", text: "우측정렬", togglable: true, group: "text-align" }
        ]
      },
      { type: "button", text: "숨김 1", overflow: "always" },
      { type: "button", text: "숨김 2", overflow: "always" },
      { type: "button", text: "숨김 3", overflow: "always" }
    ]
  });
</script>

위의 과정까지 마치고 [ Run ] 버튼 클릭 시, 다음과 같은 화면을 확인할 수 있다.

default 화면
우측 아이콘 클릭 시, 출력된 간략화 된 버튼들

이와 같이, 버튼 하나가 출력될 공간이 남았음에도, overflow: "always" 속성을 준 버튼들은 간략화 된 모습을 확인할 수 있다.

 

 

 

 

 

 

[ 출처 ]

Kendo UI Toolbar 예제 :  https://demos.telerik.com/kendo-ui/toolbar/index

728x90
저작자표시 비영리

'JavaScript > Kendo UI' 카테고리의 다른 글

Kendo UI [4] DropDownList API  (0) 2021.08.31
Kendo UI [3] DropDownList  (0) 2021.08.31
Kendo UI [2] Grid  (0) 2021.08.24
Kendo UI [1]  (0) 2021.08.24
JavaScript/Kendo UI 관련 글
더 보기

티스토리툴바