Kendo UI [4] DropDownList API

Kendo UI DropDownList API

Kendo UI를 이용한 dropDownList를 control 할 수 있는 API 기능에 대해 알아보도록 하겠다. 필자가 느끼기에 API 라기에는 조금 애매한 듯 한데... telerik의 공식 docs에서 API라고 설명하니 그렇다고 하자.

1. API Function (상태 변경 : 읽기 전용, 비활성화, 활성화)

이번 게시물은 Kendo UI [3] DropDownList 게시물의 연장선으로 보면 되는 게시물이다. 그러므로 Kendo UI [3] DropDownList 게시물에서 사용한 소스코드를 재활용하도록 하겠다. 기존의 소스를 다음과 같이 수정하도록 하자.

<body>
  <div>
    <h4>API Functions</h4>
    <ul class="options">
      <li>
        <button id="readonly">읽기전용</button>
        <button id="disable">비활성화</button>
        <button id="enable">활성화</button>
      </li>
    </ul>
  </div>

  <div>
    <h4>Example</h4>
    <div id="products" style="width:100%"></div>
  </div>
  
  <script>
    var testData = [ 
		{no_A : "banana_A",	no_B : "banana_B"},
		{no_A : "apple_A",	no_B : "apple_B"},
		{no_A : "peach_A",	no_B : "peach_B"},
		{no_A : "grape_A",	no_B : "grape_B"},
		{no_A : "melon_A",	no_B : "melon_B"},
		{no_A : "water_A",	no_B : "water_B"},
		{no_A : "kendo_A",	no_B : "kendo_B"},
		{no_A : "yellow_A",	no_B : "yellow_B"},
		{no_A : "purple_A",	no_B : "purple_B"},
		{no_A : "black_A",	no_B : "black_B"},
		{no_A : "white_A",	no_B : "white_B"},
		{no_A : "dark_A",	no_B : "dark_B"},
		{no_A : "blue_A",	no_B : "blue_B""}
    ];
  </script>
  <script>
    $("#products").kendoDropDownList({
      dataTextField: "no_A",
      dataValueField: "no_B",
      dataSource: testData,
      height: 250
    });
    
    var dropdownlist = $("#products").data("kendoDropDownList");
    
    $("#enable").click(function () {	dropdownlist.enable();	});
    $("#disable").click(function () {	dropdownlist.enable(false);	});
    $("#readonly").click(function () {	dropdownlist.readonly();	});
  </script>
</body>

Kendo UI를 통하여 그려지게 될 dropDownList의 dataSource를 간략하게, 그리고 height를 통해 높이를 지정해주었다. 다음으로 dropDownList에 대해 jQuery를 이용해 변수 지정을 해주었고, 하단에는 API 기능 사용을 위해 button 클릭 시, function 활성화를 지정해주었다. 위의 과정까지 마치고 [ Run ] 버튼 클릭 시, 다음과 같은 화면을 확인할 수 있다.

읽기전용(readonry) 클릭 시, dropDownList의 속성 변화가 이루어진 모습

비활성화(disable) 클릭 시, dropDownList의 속성 변화가 이루어진 모습

2. API Function (상태 제어 : 목록확장, 목록축소)

1번 과정에서 API 기능 사용을 위해 button 클릭 시, function 활성화를 지정해주었다. 해당 부분과 ul tag 내 li tag가 선언된 부분에 다음의 소스코드를 추가하도록 하자.

<!-- 1. ul tag 내 소스코드 추가  -->
<li>
  <button id="open">목록확장</button>
  <button id="close">목록축소</button>
</li>

<!-- 2. Script 내 소스코드 추가  -->
<script>
  $("#open").click(function () {      dropdownlist.open();		});
  $("#close").click(function () {     dropdownlist.close();		});
</script>

[ Run ] 버튼 클릭 시, 다음과 같은 화면을 확인할 수 있다.

3. API Function (상태값 확인 : text 출력, value 출력)

2번 과정에서 추가한 부분에, 다음과 같은 소스코드들을 추가해주도록 하자.

<!-- 1. ul tag 내 소스코드 추가  -->
<li>
  <button id="getValue">value 출력</button>
  <button id="getText">text 출력</button>
</li>

<!-- 2. Script 내 소스코드 추가  -->
<script>
  $("#getValue").click(function () {	alert(dropdownlist.value());	});
  $("#getText").click(function () {		alert(dropdownlist.text());	});
</script>

[ Run ] 버튼 클릭 시, 다음과 같은 화면을 확인할 수 있다.