hanker

지난 글(template)에 이어서 이번 글에서는 kendo Grid 페이징 처리에 대해서 알아보자. https://hanke-r.tistory.com/215 Kendo - KendoGrid (Jquery) 그리드(테이블) 이벤트 처리 - template (3)https://hanke-r.tistory.com/210 Kendo - KendoGrid (Jquery) 그리드(테이블) CSS 수정 UI (2)https://hanke-r.tistory.com/208 Kendo - KendoGrid (Jquery) 그리드(테이블) 생성 UI (1)DB에 있는 정보를 가져와서 화면에 보여줘야 될hanke-r.tistory.com2줄만 추가하면 깔끔하게 페이징 처리가 된다. var dataSource = new ke..

https://hanke-r.tistory.com/210 Kendo - KendoGrid (Jquery) 그리드(테이블) CSS 수정 UI (2)https://hanke-r.tistory.com/208 Kendo - KendoGrid (Jquery) 그리드(테이블) 생성 UI (1)DB에 있는 정보를 가져와서 화면에 보여줘야 될 경우에 HTML에서는 Table 태그를 쓴다.좀더 많은 기능을 간편하게 쓰기위해 Dahanke-r.tistory.com 이전 글에 이어서 이번에는 이벤트 처리를 해보자. 이전 구조에서 추가되는 구조인데, 해당 부분에 template이라는 옵션을 사용해서 특정 열에 이벤트 처리할 예정이다. template 사용 예를 몇 개 보고 작업을 해보자.$("#grid").kendoGrid(..

https://hanke-r.tistory.com/208 Kendo - KendoGrid (Jquery) 그리드(테이블) 생성 UI (1)DB에 있는 정보를 가져와서 화면에 보여줘야 될 경우에 HTML에서는 Table 태그를 쓴다.좀더 많은 기능을 간편하게 쓰기위해 DataTables나 toast-grid를 사용하는데, Kendo 에서도 Grid 라이브러리를 지원한hanke-r.tistory.com 이전 글에서 엉망 진창인 Grid를 만들었는데, 이번에는 데이터도 좀 추가해보고 이쁘게 변경해보자.우선은 이전에 만들었던 data에서 가입인사 데이터를 추가시켜서 넓이 조절을 해보자   Hello, Hanker~! column 옵션에 width를 추가하게 되면 그리드 컬럼의 넓이가 조절된다.이제 얼..

DB에 있는 정보를 가져와서 화면에 보여줘야 될 경우에 HTML에서는 Table 태그를 쓴다.좀더 많은 기능을 간편하게 쓰기위해 DataTables나 toast-grid를 사용하는데, Kendo 에서도 Grid 라이브러리를 지원한다. 사용법은 다른 무료 라이브러리 들과 비슷한데, 개인적으로 Kendo UI가 훨씬 더 깔끔하다. 사용법을 알아보자.   데이터는 각 DB에서 select 해온 값들을 사용하겠지만, 편의상 텍스트로 데이터 만들었다.위 코드를 보면 dataSource에 해당 data 맵핑 해주고, Id가 grid인 태그로 kendoGrid 적용을 해주었다.columns 에는 field는 데이터의 key값을 매칭해서 value를 가져오고 title은 헤더 명(tr)이라고 보면된다.간단하게 테이블을..

이전 글에 이어 오늘은 enable 에 대해서 작성하려고 한다. 이 옵션은 textbox 뿐 아니라 거의 모든 kendo UI 들이 다 쓰고있다.사용법도 마찬가지로 같으니 응용해서 사용해도 무관하다.  적용된 화면을 보면입력할수 없게 비활성화 되있는걸 확인할 수 있다.  코드를 보자. Hello, Hanker~!  역시 간단하게 설정이 가능하다. 다른 방법으로 disabled 처리가 가능한데, 전체적으로 kendo를 입혀 놓고 특정 textbox만 disabled 처리하는 방법이다.   Hello, Hanker~! 이런식으로도 처리가 가능하다. 결과.  끝.  https://docs.telerik.com/kendo-ui/api/javascript/ui/textbox/m..

이전 글에서는 clear button 생성하는 방법에 대해서 적었는데, 이번 글에서는 많이 쓰는 placeholder에 대해서 적어본다. placeholder를 쓰는 이유는 input 이나 textarea 태그에 어떤 값으로 입력할 지 미리 안내를 해주는 역할을 하는데, 사용자 입장에서는 편의성이 더욱 올라간다. label 태그로도 설명이 가능하지만 더욱 더 직관적이라고 생각한다. 주로 회원가입이나, 양식에 맞게 제출해야될 입력 폼에서 많이 사용되는데, 여러 홈페이지들을 살펴보면 간단하게 추가할 수 있음에도 없는 경우가 많다. 나도 추가하는 경우가 있고, 안하는 경우가 있는데, 귀찮더라도 추가하자라는 입장이다. 적용하는 방법을 알아보자. Hello, Hanker~! css 까지 추가해줘..

이전에 올렸던 kendo TextBox 설정하는 글을 올렸었는데, 그냥 작성만 해주는 기능 뿐 아니라 여러가지 옵션들을 추가할 수 있다. client 측면에서 textbox안에 내용들을 지울 수 있는 버튼이 있으면 시각적으로나, 편의적으로나 효율적이다. 그러나 해당 clear button을 만들더라도 Client 측면에서 위화감이 느끼지 않게 만들기란 쉽지는 않다. 다행히도 Kendo에서 특정옵션을 추가만 해준다면 가볍게 추가가 된다. 아래 코드로 살펴보자Hello Hanker.이전 글에서 올린내용처럼 간단하게 kendoTextBox를 사용한 예이다.아이디 값이 textBoxB인 textbox에 clearbutton을 추가해보겠다.기존 kendotextbox 선언과 달리 내부에 option을 추가해줬다...

Hello, Hanker~! https://demos.telerik.com/kendo-ui/ jQuery Demos and Examples with HTML5/JavaScript Source Code | Kendo UI for jQuerySingle-Page Applicationdemos.telerik.com    Kendo는 웹 에서 사용되는  UI 컴포넌트 라이브러리이다. textbox, table, label, button 등.. 각종 UI를 지원해주는데, 사용해보면 얼마나 편리한지 알 수 있다.  Kendo를 하나하나 뜯어보자html에서 지원하는 textbox를 만들어보면  Hello, Hanker~! 이렇게 볼품없이 박스 하나가 생기고 위 영역에 글씨를 쓸 수 있게되는데, 해당 ..