Kendo UI Grid :: 공대인들이 직접쓰는 컴퓨터공부방

Home Tags Guestbook Recents

공대인들이 직접쓰는 컴퓨터공부방

공돌이들이 쉽게 설명해주는 컴퓨터, 댓글환영^^

Kendo UI Grid

Posted by 알 수 없는 사용자

2015. 6. 2. 10:07 프로그래밍/웹 개발

Kendo UI Grid

■ Kendo UI 소개

- HTML5, CSS3로 개발, JavaScript 표준을 준수. 높은 퍼포먼스 및 깔끔한 UI

- Telerik에서 개발 / 배포 (상업용 라이센스는 유료)

- jQuery UI와는 다르게 HTML5로 개발되어 그래프 기능이 탁월

- 주요 기능은 Editors, Navigation, Scheduring, Data Management, Layout, InterActivity & UX, Framework, Charts, Mobile 등이 있다

■ Grid (Data Management)

1) 지원유형 : HTML5/Javascript, ASP.NET(MVC), JSP, PHP

2) 목적

- JSON형태로 데이터를 읽어, 목록을 쉽게 표시하는 효과적인 Script

- 읽어들인 데이터를 DataSource에 보관하여 Filter, Sorting, Paging을 손쉽게 처리

■ 형태 (HTML5, Javascript 기준)

<!DOCTYPE html>

<head>
    <title></title>
    <link rel="stylesheet" href="styles/kendo.common.min.css" />
    <link rel="stylesheet" href="styles/kendo.default.min.css" />
    <link rel="stylesheet" href="styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="styles/kendo.dataviz.default.min.css" />

<script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>

<div id="example">
            <div id="grid"></div> // Grid를 적용할 <div> 선언

<script>
                $(document).ready(function () { 
                    $("#grid").kendoGrid({ // kendoGrid 생성
                        dataSource: { // 표시할 데이터를 가지고 와서 유지
                            type: "odata",
                            transport: {
                                read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" // json url
                            },
                            pageSize: 20 // 한 페이징에서 보여줄 사이즈
                        },
                        height: 550,
                        groupable: true,
                        sortable: true,
                        pageable: { // 페이징 관련 설정
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        },
                        columns: [{ // 표시 할 컬럼 설정
                            field: "ContactName",
                            title: "Contact Name",
                            width: 200
                        }, {
                            field: "ContactTitle",
                            title: "Contact Title"
                        }, {
                            field: "CompanyName",
                            title: "Company Name"
                        }, {
                            field: "Country",
                            width: 150
                        }]
                    });
                });
            </script>
</div>

■ 출처

http://demos.telerik.com/kendo-ui/grid/index

'프로그래밍 > 웹 개발' 카테고리의 다른 글

Servlet의 동작 과정 및 생명주기 (7)	2015.06.21

Trackback: Comment:

티스토리툴바