Kendo UI week3_

Contents 1. Grid 2. Drop Dow n List 3. Chart 4. Scheduler 5. Date Range Picker 6. Editor Kendo UI : 이미 구현된 원하는 UI를 선택하여 사용할 수 있는 HTML5/Javascript Framework

  1. Grid
  2. – 사용법 1. KendoUI 프레임워크를 다운2. 스크립트와 CSS를 추가 <scriptsrc=”…” /> <link href=”…” /> 3. $(“#grid”).kendoGrid에서 사용
  3. – Grid 속성 columns: 속성모임 datasourcedataSource:{data:testData},:서버에 데이터를 어떻게 보낼지 결정 scrolablescrollable:true:스크롤할지 여부를 설정 pageable: 1페이지에 해당하는 행의 수만큼 표현하여 표시할 설정 sortablesortable:true, group:troup:croup’editable:true 일 때 편집 가능 / inline 값 일 경우 한 줄씩 편집 가능 page size : 한번에 읽을 수 있는 행 개수 server paging : true 일 경우 서버에서 반환 시 page 크기 조절 가능 height : 307 : grid 높이

2. DropDownList – $(“#shipTo”).kendoDropDownList() – 검색기능 : filter : “startswith”

  • 상태변경 : 읽기전용, 비활성화, 활성화$(“#enable”). click(function() { dropdownlist.enable();};$(“#disable”). click(function() { dropdownlist.enable(false);})
  • – 상태 제어: 목록 확장, 목록 축소$(“#open”). click(function() { dropdownlist.open(); });$(“#close”). click(function() { dropdownlist. close();
  • – 상태값 확인: text 출력, value 출력$(“#getValue”). click(function() { alert(dropdownlist.value(); }); $(“#getText”). click(function() { alert(drop downl)

3. Chart

4. Scheduler

5. DateRangePicker6. Edito r

error: Content is protected !!