[JavaScript] Kendo UI Web Grid: JavaScript 그리드 위젯 라이브러리

Kendo UI Web Grid by Telelik
- jQuery v1.8.2 기반의 무료 그리드 위젯 라이브러리
- 튜토리얼
http://demos.kendoui.com/web/grid/index.html
http://docs.kendoui.com/api/web/grid
- 다운로드 링크

http://telerik.s3.amazonaws.com/kendoui.web.2012.3.1114.open-source.zip

http://cdn.kendostatic.com/2012.3.1114/js/kendo.web.min.js
http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css
http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css

Bootstrap Theme for Kendo UI Web by AdvancedREI
https://github.com/advancedrei/BootstrapForKendoUI
- AdvancedREI 개발팀이 만든 Kendo UI Web Grid를 위한 Twitter Bootstrap CSS 테마 제공
- kendo.default.min.css를 대체
- 소개글
http://bristowe.com/blog/2012/9/25/tales-of-kendo-ui-awesomeness-advancedrei
- 다운로드 링크
https://github.com/advancedrei/BootstrapForKendoUI/raw/master/Stylesheets/kendo.bootstrap.min.css

Knockout-Kendo.js by Ryan Niemeyer
http://rniemeyer.github.com/knockout-kendo/
- Knoockout.js 개발자가 만든 Kendo UI Web을 위한 Knockout.js 바인딩 라이브러리 제공
- 소개글
http://www.knockmeout.net/2012/03/knockoutjs-bindings-for-kendo-ui.html
http://www.kendoui.com/blogs/teamblog/posts/12-12-20/knockout_js_and_kendo_ui_-_a_potent_duo.aspx
- 다운로드 링크
https://raw.github.com/rniemeyer/knockout-kendo/master/build/knockout-kendo.js
https://github.com/rniemeyer/knockout-kendo/blob/master/build/knockout-kendo.min.js

Kendo UI Web Grid: Enabling Server Side Sorting and Paging with ASP.NET MVC by dlewis
http://sympletech.com/hacking-on-the-kendo-ui-grid-enabling-server-side-sorting-and-paging-in-asp-net-mvc/

Kendo UI Web Grid: KendoGridBinder Demo by Stef
https://github.com/StefH/KendoGridBinder
http://kendogridbinderex.apphb.com/

API Reference: kendo.data.DataSource
http://docs.kendoui.com/api/framework/datasource

API Reference: kendo.ui.Grid
http://docs.kendoui.com/api/web/grid

---

Bootstrap 테마 적용하기

* 아래 순서대로 CSS를 임포트

<link rel="stylesheet" href="/resources/lib/KendoUIWeb/css/kendo.common.min.css">
<link rel="stylesheet" href="/resources/lib/KendoUIWeb/css/kendo.default.min.css">
<link rel="stylesheet" href="/resources/lib/KendoUIWeb/css/kendo.bootstrap.min.css">

메시지 한글화하기

* kendo.web.min.js 파일을 아래와 같이 수정

required:"{0} is required"
pattern:"{0} is not valid"
min:"{0} should be greater than or equal to {1}"
max:"{0} should be smaller than or equal to {1}"
step:"{0} is not valid"
email:"{0} is not valid email"
url:"{0} is not valid URL"
date:"{0} is not valid date"
empty:"Drag a column header and drop it here to group by that column"
display:"{0} - {1} of {2} items" >> "전체 {2}개 항목 중 {0}~{1}번째 항목 출력"
empty:"No items to display" >> "출력할 항목이 없습니다"
page:"Page"
of:"of {0}"
itemsPerPage:"items per page" >> "한 페이지에 출력할 항목 수"
first:"Go to the first page" >> "첫 페이지로 이동"
previous:"Go to the previous page" >> "전 페이지로 이동"
next:"Go to the next page" >> "다음 페이지로 이동"
last:"Go to the last page" >> "마지막 페이지로 이동"
refresh:"Refresh" >> "새로 고침"
sortAscending:"Sort Ascending" >> "오름차순 정렬"
sortDescending:"Sort Descending" >> "내림차순 정렬"
filter:"Filter" >> "필터"
columns:"Columns"
uploadFile:"Upload"
orderBy:"Arrange by"
orderByName:"Name"
orderBySize:"Size"
directoryNotFound:"A directory with this name was not found."
emptyFolder:"Empty Folder"
deleteFile:'Are you sure you want to delete "{0}"?'
invalidFileType:"The selected file \"{0}\" is not valid. Supported file types are {1}."
overwriteFile:"A file with name \"{0}\" already exists in the current directory. Do you want to overwrite it?"
dropFilesHere:"drop files here to upload"
info:"Show items with value that:"
isTrue:"is true"
isFalse:"is false"
filter:"Filter"
clear:"Clear"
and:"And"
or:"Or"
selectValue:"-Select value-"

한글화 적용하기

* 아래 순서대로 JavaScript를 임포트

<script src="/resources/lib/jQuery/jquery-1.8.3.min.js"></script>
<script src="/resources/lib/KendoUIWeb/js/kendo.web.min.js"></script>
<script src="/resources/lib/KendoUIWeb/js/cultures/kendo.culture.ko-KR.min.js"></script>

---

테이블에 그리드 적용하기

* HTML

<div class="k-content" style="overflow: auto; width: 100%">
  <table id="someTable"></table>
</div>

* JavaScript (그리드 정의)

$('#someTable').kendoGrid({
    dataSource: {
        data: localDataSource,
        pageSize: 10
    },

    autoBind : false, // 그리드 초기화시 DataSource 자동 맵핑을 방지
    sortable: {
        mode: "multiple",
        allowUnsort: true
    },
    selectable: 'multiple row',
    navigatable: false,
    pageable: {
        refresh: true,
        pageSizes: true
    },
    scrollable: true,
    columnMenu: false,
    columns: [{
        field: 'IS_SELECTED',
        title: ' ',
        template: '<input type="checkbox" />',
        width: 35},
    {
        field: 'DB_TABLE_FIELD_NAME_1',
        title: '컬럼명1',
        width: 60},
    {
        field: 'DB_TABLE_FIELD_NAME_2',
        title: '컬럼명2',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_3',
        title: '컬럼명3',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_4',
        title: '컬럼명4',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_5',
        title: '컬럼명5',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_6',
        title: '컬럼명6',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_7',
        title: '컬럼명7',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_8',
        title: '컬럼명8',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_9',
        title: '컬럼명9',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_10',
        title: '컬럼명10',
        width: 200},
    {
        field: 'DB_TABLE_FIELD_NAME_11',
        title: '컬럼명11',
        width: 200}]
});

* JavaScript (로컬 데이터소스 정의)

var localDataSource = [{
    DB_TABLE_FIELD_NAME_1: '1001',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1002',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1003',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1004',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1005',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1006',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1007',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1008',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1009',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1010',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1011',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1012',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1013',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1014',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'},
{
    DB_TABLE_FIELD_NAME_1: '1015',
    DB_TABLE_FIELD_NAME_2: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_3: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_4: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_5: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_6: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_7: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_8: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_9: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_10: 'DB_TABLE_FIELD_VALUE_1',
    DB_TABLE_FIELD_NAME_11: 'DB_TABLE_FIELD_VALUE_1'

}];

* 적용 결과

* Remote DataSource 정의하기

var someDataSource = new kendo.data.DataSource({
    serverPaging: true, // 서버 사이드 페이징 활성화
    pageSize: 10, // 1페이지 요청시 page=1, pageSize=10 요청 파라메터 전달
    serverSorting: true, // 서버 사이드 정렬 활성화
                         // sort[0][field]=필드명, sort[0][dir]=asc|desc 요청 파라메터 전달
    transport: {
        read: {
            type: 'post',
            dataType: 'json',
            url: 'someUrl'
            // data: { userDefinedParameter: someValue }
            // 사용자정의 요청 파라메터 전달
        }
    }
    schema: {
        data: function(response) { return response.data; } // 그리드에 출력될 결과 데이터, 응답 데이터의 data 값을 맵핑
        total: function(response) { return response.total; } // 전체 페이지 수, 응답 데이터의 total 값을 맵핑
    }
});

* DataSource 오브젝트에 로우 추가하기

someDataSource.add({ name: "John Smith", description: "Product Description", address: "123 1st Street" });

* DataSource URL 재설정 및 그리드 Refresh하기

function reloadKendoGrid(dataSource, url) {
  dataSource.options.transport.read.url = url;
  dataSource.read();
}

reloadKendoGrid(dataSource, 'url');

* 그리드 초기화하기

function resetKendoGrid(dataSource) {
  dataSource.options.transport.read.url = '';
  dataSource.data([]);
}

resetKendoGrid(dataSource);

* 그리드 오브젝트가 아닌 그리드가 바라보는 new kendo.data.DataSource()로 정의된 데이터소스 오브젝트에 직접 접근하여 초기화 수행

* 서버 사이드(Java/Spring MVC 3)에서 DataSource 요청에 응답하기

<Controller>

    @RequestMapping(value = "someUrl", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
    @ResponseBody
    public Map<String, Object> response(@RequestParam("page") int page, @RequestParam("pageSize") int pageSize) {
        Map<String, Object> response = new HashMap<String, Object>();
        try {
            List<Map<String, Object>> result = someService.read(page, pageSize);
            response.put("data", result);

            if (Objects.equal(result.size(), 0)) {
                response.put("total", 0);
            } else {
                response.put("total", result.get(0).get("TOTAL_ROW_COUNT"));
            }
            return response;
        } catch (Exception ex) {
            Map<String, Object> errorResponse = JsonUtil.createErrorResponse(ex);
            return errorResponse;
        }
    }

* 서버 요청시 파라메터를 JSON 문자열로 전달하기

var someDataSource = new kendo.data.DataSource({
    serverPaging: true,
    serverSorting: true,
    pageSize: 10,
    sort: {
        field: "CREATETIME",
        dir: "desc"
    },
    transport: {
        read: {
            type: 'post',
            dataType: 'json',
            url: '',
            contentType: 'application/json;charset=UTF-8'
        },
        parameterMap: function(data, operation) {
            return JSON.stringify(data);
        }
    },
    schema: {
        data: function(response) {
            return response.data;
        },
        total: function(response) {
            return response.total;
        }
    }
});

* contentType: 'application/json;charset=UTF-8'가 명시되어야 서버에서 파라메터를 JSON 문자열로 인식 가능
* parameterMap은 Kendo UI Web Grid의 파라메터 포맷을 커스터마이징하는 역할을 수행하는 프라퍼티
* return JSON.stringify(data);을 통해 기본 파라메터 오브젝트인 data을 JSON 문자열로 변환하여 서버에 전달