반응형

Front End/Kendo UI 8

[Kendo] kendo grid 내의 데이터 클릭시 해당 링크로 이동 template 사용

grid 내에 특정 데이터 클릭시 사전에 설정해놓은 특정 링크로 이동을 하게 만들기 위해서는 template 파라미터를 사용할 필요가 있다. template 의 간단한 설명은 아래와 같다 columns.template String|Function The template which renders the column content. The grid renders table rows () which represent the data source items. Each table row consists of table cells () which represent the grid columns. By default the HTML-encoded value of the field is displayed in the ..

Front End/Kendo UI 2020.10.26

[Kendo UI] [Kendo UI] Kendo UI grid 의 selectedKeyNames( ) 파라미터 사용

위 파라미터는 kendo grid 내에서 셀렉트된 변수를 저장하여 출력해주는 함수이다. 사용방법은 kendoGrid 의 columns 파라미터 내에서 selectable 을 오출하여 select 를 적용해야되고 columns: [ { selectable: true, width: "50px" }, { field:"ProductName", title: "Product Name" }, { field: "UnitPrice", title:"Unit Price", format: "{0:c}"}, { field: "UnitsInStock", title:"Units In Stock"}, { field: "Discontinued"}] }); 다음으로는 dataSource 의 schema 에 model 파라미터를 사용해주..

Front End/Kendo UI 2020.10.26

[Kendo UI] [Kendo UI] Kendo UI grid nested json 처리하는 쉬운 법

json 포맷 안에 있는 데이터를 추출하려고 할때 nested 된 경우가 있다. 이런 경우에 대한 것을 이전에 포스팅을 했었지만.. 설명을 더 찾아본 결과 더욱 쉬운 방법이 있어서 추가적으로 포스팅한다. 우선 kendo grid 의 schema 파라미터 안에는 ' data ' 라는 파라미터가 있다. 이 파라미터는 특정 key의 안에 value 값들을 추출해주는 역할을 한다. schema: { data: "data", total: "total" } schema 의 data 파라미터에 추출할 값이 들어있는 key 값을 써넣고 kendoGrid 의 column 에 추출할 key 값의 key를 써주면 자동으로 key 값의 value 를 추출해준다 전체 코드는 아래와 같다. var dataSource = new ..

Front End/Kendo UI 2020.10.23

[Kendo UI] Kendo UI grid json 포멧 처리하는 법

유독 kendo 를 하면서 쉬운 길도 엄청나게 돌아서가는 것 같다.. 아무래도...한국에 kendo 를 사용하는 곳도 많이 없기 때문에 구글링을 할 시에 한글로 된 kendo 자료가 많이 나오지 않아서 쉬운 부분들인데 많이 돌아서 간 것 같다.. 이번 json 을 처리함에 있어서도 굉장히 쉬운 부분이 었지만.. 자료가 많이 찾기 어려웠던 탓에 한나절을 꼬박 걸렸었다.. 1. datasource 내에 nested json 포맷이 아래와 같이 존재한다면. data = [ { "id":1, "user_role":"ADMIN", "state":"ACTIVE", "address":[{ "street":"test 59", "city":"City test", "post_number":"25050" }, { "stre..

Front End/Kendo UI 2020.10.23

[Kendo UI] Kendo UI grid data source 하는 법과 주의할 것

Kendo ui 의 경우는 사용하기가 쉬운(?) 것 같다.. 하지만..초보자의 입장에서 한국에서 많이 사용하지 않는 ui 이라 이미 다른 선배분들이 갈고 닦아놓으신 자료들이 많이 보이지 않아 초반에 어떻게 해야지 많은 멘붕이 왔던 것도 사실이다.. 우선 아직 많이 남아 있고 기록할 것들이 좀 있지만, 할수 있을까라는 생각이 들었던 kendo ui grid 이다.. 우선 kendo 의 설치 및 스프링 적용법은 아래 링크를 참고하면 될것 같다. 아직 부족한 부분이 있지만... snepbnt.tistory.com/219?category=805038 [Kendo UI 설치] kendo UI 데모 버전 초기 설치 및 적용 방법 in Spring kendo ui 에는 유료버전과 무료버전이 있는데 유로버전은 많은 기..

Front End/Kendo UI 2020.10.22

[Kendo UI 설치] kendo UI 데모 버전 초기 설치 및 적용 방법 in Spring

kendo ui 에는 유료버전과 무료버전이 있는데 유로버전은 많은 기능은 다 제공하지만 30일 trial 이라는 한계가 있다. 자세한 사항은 아래 stackoverrun 의 링크 내용 참고 stackoverrun.com/ko/q/12436338 kendo-ui - kendo for jQuery는 (는) 무료로 사용할 수 있습니까? 검도 UI를 사용하는 데 가격이 책정됩니다. 그러나 검도에서는 검도 WIDGET을 사용할 수있는 CDN 서비스를 제공합니다. 그래서 혼란 스럽습니다. 서비스를 제공한다면 왜 그 가격이 들지 요. stackoverrun.com 하지만 kendo ui 무료버전은 git 으로 제공을 하지만.. 사용할 수 있는 부분에 한계가 있다. 무료버전은 아래 주소에서 다운로드를 받을 수 있다. ..

Front End/Kendo UI 2020.10.07

[Kendo UI] Kendo UI 의 적용 - Keyboard Navigation

추후 웹프로젝트에 현재 만들어져 있는 웹 페이지 플랫폼을 적용하기 위해서, 복잡한 소스코드를 간단하게 옮기는 작업을 하고 있다. 여기서 kendoUI 라는 것을 사용하고 있는데, 아직은 어떤 면에서 좋은지는 파악이 잘 안되지만, 추후 또 사용할 것을 대비해서 아래에 기록해둔다. 자세한 사용법은 시간이 날때마다 자세히 기록해두어야 겠다. Keyboard Navigtion demos.telerik.com/kendo-ui/window/keyboard-navigation Keyboard navigation support | Kendo UI Window Demo New release! Check out the new Kendo UI components and features & sign up for the rel..

Front End/Kendo UI 2020.09.29

[Kendo UI - 유료버전] kendo UI 유료버전 초기 설치 및 적용 방법 in Spring

kendo ui 의 초기설정 방법은 kendo ui 에서 제공하는 아래 링크를 따라하면 쉽게 따라할 수 있다. docs.telerik.com/kendo-ui/jsp/introduction#sample-application-setup Overview | Progress Telerik UI for JSP | Kendo UI for jQuery This article demonstrates how to download and install Progress Telerik UI for JSP and run a sample application. To read more about the benefits of using Progress Telerik UI for JSP, please visit the product ..

Front End/Kendo UI 2020.09.15
반응형