week3_Kendo UI

Contents 1. Grid 2. Drop Down List 3. Chart 4. Scheduler 5. Date RangePicker 6. Editor Kendo UI : 이미 구현된 원하는 UI를 선택하여 쓸 수 있는 HTML5 / Java Script Framework

  1. Grid
  2. – 사용법 1.KendoUI 프레임워크 다운 2.스크립트와 CSS 추가 <scriptsrc=”…” /> <linkhref=”…” /> 3.$(“#grid”) .kendoGrid로 사용
  3. – Grid 속성 columns: 속성 모임 datasource: {data:testData},: 서버로 데이터를 어떻게 보낼지 결정 scrollable:true:스크롤할지 여부를 설정 pageable: 한 페이지에 해당하는 행의 수만큼 표현하여 표시할 설정 sortable:true,:true일 때 클릭하면 해당 속성 값에 따라 그리드의 행이 정렬 groupable:ColumnTitle을 드래그합니다.groupable:{messages}:{messages}template:column마다 개별적인 기능 추가 ex), ‘firstcolumn 내의 데이터를 클릭하면 해당 데이터를 alert로 표시한다.editable : true일 때 편집 가능 / inline 값의 경우 한 줄씩 편집 가능 pagesize : 한 번에 읽을 수 있는 줄의 개수 serverpaging : true일 경우 서버에서 반환할 때 page 크기 조절 가능 heightheight : 307 : grid 높이

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

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

3) Chart

4. Scheduler

5. Date Range Picker 6. Editor

error: Content is protected !!