DropDownList 예제
jQuery 기반의 환경에서 구성할 수 있는 Kendo UI 중 DropDownList에 대해 알아보도록 하겠다. telerik 사에서 제공하는 기본 예제들은 다음의 URL을 통해 확인할 수 있다. https://demos.telerik.com/kendo-ui/dropdownlist/index
DropDownList Custom 예제
거의 왠만한 사용법은 공식 홈페이지의 demo, 그리고 공식 docs를 번역하여 확인하면 능숙하게 사용할 수 있다. telerik 사에서 다른 것은 몰라도 예제 만큼은 정말 풍부하게 잘 구현해놓았기 때문이다. 그렇기에 필자는 그 중에서도, 특히나 자주 사용될 것 같은 예제들에 대한 key point 만을 테스트하며 작성해보도록 하겠다.
1. Test Data 및 DropDownList 영역 생성
dropDownList에 들어가게될 test data를 생성하도록 하겠다. 실제로는 DB에서 넘겨온 값을 넣는 경우가 대다수겠지만, 어디까지나 테스트인만큼, Kendo UI 사용에 대한 숙련도를 올리기 위함이라 생각하겠다. 비어있는 dojo 소스코드 영역(https://dojo.telerik.com/)에 다음과 같이 입력하도록 하겠다.
<body>
<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>
</body>dropDownList의 영역 지정에 width 100%의 style을 지정하였는데, 이유는 실제 실행 시, 알 수 있다. 일단 필자를 믿고 작성해보도록 하자.
2. DropDownLIst 그리기
Kendo UI 문법을 이용하여 간단하게 grid를 그릴 수 있다. 작성한 script 영역 내 testData 하단에, 다음과 같이 소스코드를 추가하도록 하자.
<script>
$("#products").kendoDropDownList({
dataTextField: "no_A",
dataValueField: "no_B",
dataSource: {
data:testData
}
});
</script>jQuery로 dropDownList를 그릴 영역을 잡아주고, Kendo UI 문법 중 kendoDropDownList를 이용하여 그려주는 것이다. 하위 설정으로 dataTextField는 dropDownList(select box)의 text를, dataValueField는 dropDownList(select box)의 vlaue를 binding하는 역할이라 보면 된다. dataSource는 말 그대로 dropDownList(select box)의 data를 binding하는 역할이다.
dataSource에 지정한 url의 mapping을 위해서는(data 요청을 위한 API 사용 목적 따위를 위해) 다음과 같이 추가하여 사용하면 된다. (return data type으로 반드시 json type을 지켜주자)
<script>
$("#products").kendoDropDownList({
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Products",
}
}
}
)};
</script>위의 과정까지 마치고 [ Run ] 버튼 클릭 시, 다음과 같은 화면을 확인할 수 있다.
3. DropDownList 속성 부여 (검색 기능)
Kendo UI를 통해 DropDownList 내 검색 기능을 간단하게 추가할 수 있다. 소스코드를 다음과 같이 수정하도록 하자.
<script>
$("#products").kendoDropDownList({
filter: "startswith",
dataTextField: "no_A",
dataValueField: "no_B",
dataSource: {
data:testData
}
});
</script>filter 속성을 추가해주었다. 위의 과정까지 마치고 [ Run ] 버튼 클릭 시, 다음과 같은 화면을 확인할 수 있다.
[ 출처 ]
Kendo UI DropDownList 예제 : https://demos.telerik.com/kendo-ui/dropdownlist/index
'JavaScript > Kendo UI' 카테고리의 다른 글
| Kendo UI [5] Toolbar (0) | 2021.08.31 |
|---|---|
| Kendo UI [4] DropDownList API (0) | 2021.08.31 |
| Kendo UI [2] Grid (0) | 2021.08.24 |
| Kendo UI [1] (0) | 2021.08.24 |