'Kendo UI'에 해당되는 글 3건

  1. [JavaScript] Kendo UI Web Grid; 선택된 로우 정보 받아오기
  2. [JavaScript] Kendo UI Web Grid; Server Side Paging/Sorting/Filtering 구현
  3. [JavaScript] Kendo UI Web Grid: JavaScript 그리드 위젯 라이브러리 (2)

[JavaScript] Kendo UI Web Grid; 선택된 로우 정보 받아오기

Kendo UI Web Grid에서 유저가 선택한 로우의 정보를 받아오는 방법을 테스트하고 정리하였다.


var grid = $('#table').data('kendoGrid');
var selectedRowData = grid.dataItem(grid.select());

if (selectedRowData === undefined) {
  alert('아이템을 선택하세요.');
  }
alert(JSON.stringify(selectedRowData));


저작자 표시 비영리 동일 조건 변경 허락
신고

[JavaScript] Kendo UI Web Grid; Server Side Paging/Sorting/Filtering 구현

Kendo Web UI Grid에 사용되는 kendo.data.DataSource 오브젝트는 그 자체만으로 매우 편리하고 강력한 기능을 가지고 있다. 자체적으로 제공되는 페이징, 소팅, 필터링 기능을 통해 서버 사이드를 통한 데이터베이스로부터의 데이터 획득 기능이 상당히 편리해진다.

Spring MVC 3 기반의 내부 프로젝트에 사용할 목적으로 아래와 같이 kendo.data.DataSource의 요청에 대응할 수 있는 코드를 구현해봤다.


<Model: KendoUiParam.java>

import java.util.List;
import com.google.common.base.Objects;
import com.google.common.base.Strings;

public class KendoUiParam {
    private int page;
    private int pageSize;
    private int skip;
    private int take;
    private List<Sort> sort;
    private Filter filter;

    private String setValue(Object value) {
        if (value.toString().length() < 10) {
            return "'" + value + "'";
        }
        if (Objects.equal(value.toString().charAt(4), '-') && Objects.equal(value.toString().charAt(7), '-') && Objects.equal(value.toString().length(), 10)) {
            return "TO_DATE('" + value + "', 'YYYY-MM-DD')";
        }
        return "'" + value + "'";
    }

    public boolean hasWhere() {
        if (!Objects.equal(this.filter, null)) {
            return true;
        }
        return false;
    }

    public String getWhere() {
        if (Objects.equal(this.filter, null)) {
            return null;
        }
        StringBuilder where = new StringBuilder();
        where.append("(");
        for (int i = 0; i < this.filter.getFilters().size(); i++) {
            if (Strings.isNullOrEmpty(this.filter.getFilters().get(i).getValue())) {
                continue;
            } else if (Objects.equal(this.filter.getFilters().get(i).getOperator(), "eq")) {
                where.append(this.filter.getFilters().get(i).getField() + " = " + setValue(this.filter.getFilters().get(i).getValue()));
            } else if (Objects.equal(this.filter.getFilters().get(i).getOperator(), "neq")) {
                where.append(this.filter.getFilters().get(i).getField() + " != " + setValue(this.filter.getFilters().get(i).getValue()));
            } else if (Objects.equal(this.filter.getFilters().get(i).getOperator(), "lt")) {
                where.append(this.filter.getFilters().get(i).getField() + " < " + setValue(this.filter.getFilters().get(i).getValue()));
            } else if (Objects.equal(this.filter.getFilters().get(i).getOperator(), "lte")) {
                where.append(this.filter.getFilters().get(i).getField() + " <= " + setValue(this.filter.getFilters().get(i).getValue()));
            } else if (Objects.equal(this.filter.getFilters().get(i).getOperator(), "gt")) {
                where.append(this.filter.getFilters().get(i).getField() + " > " + setValue(this.filter.getFilters().get(i).getValue()));
            } else if (Objects.equal(this.filter.getFilters().get(i).getOperator(), "gte")) {
                where.append(this.filter.getFilters().get(i).getField() + " >= " + setValue(this.filter.getFilters().get(i).getValue()));
            } else if (Objects.equal(this.filter.getFilters().get(i).getOperator(), "startswith")) {
                where.append(this.filter.getFilters().get(i).getField() + " LIKE '%" + this.filter.getFilters().get(i).getValue() + "'");
            } else if (Objects.equal(this.filter.getFilters().get(i).getOperator(), "endswith")) {
                where.append(this.filter.getFilters().get(i).getField() + " LIKE '" + this.filter.getFilters().get(i).getValue() + "%'");
            } else if (Objects.equal(this.filter.getFilters().get(i).getOperator(), "contains")) {
                where.append(this.filter.getFilters().get(i).getField() + " LIKE '%" + this.filter.getFilters().get(i).getValue() + "%'");
            }
            where.append(" " + this.filter.getLogic() + " ");
        }
        where.append("1=1)");
        return where.toString();
    }

    public boolean hasOrderBy() {
        if (!Objects.equal(this.sort, null)) {
            if (!Objects.equal(this.sort.size(), 0)) {
                return true;
            }
        }
        return false;
    }

    public String getOrderBy() {
        if (Objects.equal(this.sort, null)) {
            return null;
        }
        StringBuilder orderBy = new StringBuilder();
        for (int i = 0; i < this.sort.size(); i++) {
            orderBy.append(this.sort.get(i).getField() + " " + sort.get(i).getDir());
            if (!Objects.equal(i, this.sort.size() - 1)) {
                orderBy.append(", ");
            }
        }
        return orderBy.toString();
    }

    public boolean hasPaging() {
        if (!Objects.equal(this.page, 0) || !Objects.equal(this.pageSize, 0)) {
            return true;
        }
        return false;
    }

    public String getPagingSql(String sql) {
        if (!hasPaging()) {
            return sql;
        }
        String prefix = "SELECT * FROM (SELECT ROWNUM AS ROW_NUMBER, COUNT(*) OVER() TOTAL_ROW_COUNT, A.* FROM ( ";
        String postfix = " ) A ) WHERE ROWNUM <= :PAGE_SIZE AND ROW_NUMBER > (:PAGE_NUMBER-1) * :PAGE_SIZE";
        return prefix + sql + postfix;
    }

    public int getPage() {
        return page;
    }

    public void setPage(int page) {
        this.page = page;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getSkip() {
        return skip;
    }

    public void setSkip(int skip) {
        this.skip = skip;
    }

    public int getTake() {
        return take;
    }

    public void setTake(int take) {
        this.take = take;
    }

    public List<Sort> getSort() {
        return sort;
    }

    public void setSort(List<Sort> sort) {
        this.sort = sort;
    }

    public Filter getFilter() {
        return filter;
    }

    public void setFilter(Filter filter) {
        this.filter = filter;
    }

    @Override
    public String toString() {
        return "KendoUiParam [page=" + page + ", pageSize=" + pageSize + ", skip=" + skip + ", take=" + take + ", sort=" + sort + ", filter=" + filter + "]";
    }
}

<Model: Sort.java>

public class Sort {
    private String field;
    private String dir;

    public String getField() {
        return field;
    }

    public void setField(String field) {
        this.field = field;
    }

    public String getDir() {
        return dir;
    }

    public void setDir(String dir) {
        this.dir = dir;
    }

    @Override
    public String toString() {
        return "Sort [field=" + field + ", dir=" + dir + "]";
    }
}


<Model: Filter.java>

import java.util.List;

public class Filter {
    private List<Filters> filters;
    private String logic;

    public List<Filters> getFilters() {
        return filters;
    }

    public void setFilters(List<Filters> filters) {
        this.filters = filters;
    }

    public String getLogic() {
        return logic;
    }

    public void setLogic(String logic) {
        this.logic = logic;
    }

    @Override
    public String toString() {
        return "Filter [filters=" + filters + ", logic=" + logic + "]";
    }
}


<Model: Filters.java>

public class Filters {
    private String field;
    private String operator;
    private String value;

    public String getField() {
        return field;
    }

    public void setField(String field) {
        this.field = field;
    }

    public String getOperator() {
        return operator;
    }

    public void setOperator(String operator) {
        this.operator = operator;
    }

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }

    @Override
    public String toString() {
        return "Filters [field=" + field + ", operator=" + operator + ", value=" + value + "]";
    }
}


<Controller>
    @RequestMapping(value = "/pr/ajax/readStkMtlMaster", method = RequestMethod.POST, produces = "application/json;charset=UTF-8")
    @ResponseBody
    public Map<String, Object> readStkMtlMaster(@RequestBody KendoUiParam param) {
        Map<String, Object> response = new HashMap<String, Object>();
        try {
            logger.info("==================== [MM-PUR] readStkMtlMaster() | Parameter='" + param.toString() + "'");
            List<Map<String, Object>> result = mmService.readStkMtlMaster(param);
            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"));
            }
            logger.info("==================== [MM-PUR] readStkMtlMaster() | Parameter='" + response.toString() + "'");
            return response;
        } catch (Exception ex) {
            Map<String, Object> errorResponse = JsonUtil.createErrorResponse(ex);
            return errorResponse;
        }
    }


<Service>

    public List<Map<String, Object>> readStkMtlMaster(KendoUiParam param) {
        logger.info("==================== [MM-PUR] readStkMtlMaster() | Parameter='" + param.toString() + "'");
        List<Map<String, Object>> result = mmDAO.readStkMtlMaster(param);
        logger.info("==================== [MM-PUR] readStkMtlMaster() | Return='" + result.toString() + "'");

        return result;
    }


<DAO>

    public List<Map<String, Object>> readStkMtlMaster(KendoUiParam param) {
        logger.info("==================== [MM-PUR] readStkMtlMaster() | Parameter='" + param.toString() + "'");
        MapSqlParameterSource paramSource = new MapSqlParameterSource();
        SqlBuilder q = new SqlBuilder();
        q.SELECT("PURCHASETYPE, FACTORYNAME, CONSUMABLESPECNAME, CONSUMABLESPECVERSION, DESCRIPTION, CONSUMABLETYPE, CONSUMEUNIT, IQAAQL, IQADCSPECNAME, CREATEUSER, CREATETIME");
        q.FROM("CONSUMABLESPEC");
        if (param.hasWhere()) {
            q.WHERE(param.getWhere());
        }
        if (param.hasOrderBy()) {
            q.ORDER_BY(param.getOrderBy());
        }
        if (param.hasPaging()) {
            paramSource.addValue("PAGE_NUMBER", param.getPage());
            paramSource.addValue("PAGE_SIZE", param.getPageSize());
        }
        List<Map<String, Object>> result = namedParameterJdbcTemplate.queryForList(param.getPagingSql(q.toString()), paramSource);
        logger.info("==================== [MM-PUR] readStkMtlMaster() | Return='" + result.toString() + "'");

        return result;
    }


<View: HTML>

<div>
  <blockquote>
    <h2>원부자재 PR 생성</h2>
  </blockquote>
</div>

<div class="alert alert-info">
  <strong>원부자재 기준정보 조회 조건 설정</strong>
</div>

<table class="table table-bordered table-hover">
  <tbody>
    <tr>
      <td style="width: 30%">PURCHASETYPE:</td>
      <td style="width: 70%"><a class="searchCriteria" data-type="text" id="purchaseType" name="purchaseType"></a></td>
    </tr>
    <tr>
      <td>CONSUMALBLESPECNAME:</td>
      <td><a class="searchCriteria" data-type="text" id="consumableSpecName" name="consumableSpecName"></a></td>
    </tr>
    <tr>
      <td>DESCRIPTION:</td>
      <td><a class="searchCriteria" data-type="text" id="description" name="description"></a></td>
    </tr>
    <tr>
      <td>CREATETIME:</td>
      <td><a class="searchCriteria" data-type="date" id="createTimeStart" name="createTimeStart"></a> ~ <a class="searchCriteria" data-type="date" id="createTimeEnd" name="createTimeEnd"></a></td>
    </tr>
  </tbody>
</table>

<table class="table">
  <tbody>
    <tr>
      <td style="width: 30%"></td>
      <td style="width: 70%"><button class="btn btn-primary input-medium" id="searchButton">조회</button>&nbsp;&nbsp; <button class=
      "btn btn-success input-medium" id="resetButton">초기화</button></td>
    </tr>
  </tbody>
</table>

<div class="alert alert-info">
  <strong>조회 결과</strong>
</div>

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

<p></p>


<View: JavaScript>

var setSearchCriteria = function() {
    $('#purchaseType').editable({
      emptytext: '미입력'
    });
    $('#consumableSpecName').editable({
      emptytext: '미입력'
    });
    $('#description').editable({
      emptytext: '미입력'
    });
    $('#createTimeStart').editable({
      emptytext: '미입력',
      format: 'yyyy-mm-dd'
    });
    $('#createTimeEnd').editable({
      emptytext: '미입력',
      format: 'yyyy-mm-dd'
    });
    $('.searchCriteria').editable('setValue', '');
  };
setSearchCriteria();

var dataSource = new kendo.data.DataSource({
  serverPaging: true,
  serverSorting: true,
  serverFiltering: true,
  pageSize: 10,
  filter: {
    field: '1',
    operator: 'neq',
    value: '1'
  },
  transport: {
    read: {
      type: 'post',
      dataType: 'json',
      contentType: 'application/json;charset=UTF-8',
      url: '/pr/ajax/readStkMtlMaster'
    },
    parameterMap: function(data, operation) {
      return JSON.stringify(data);
    }
  },
  schema: {
    data: function(response) {
      return response.data;
    },
    total: function(response) {
      return response.total;
    }
  }
});

$('#stkMtlTable').kendoGrid({
  dataSource: dataSource,
  sortable: {
    mode: "multiple",
    allowUnsort: true
  },
  selectable: true,
  navigatable: false,
  pageable: {
    refresh: true,
    pageSizes: true
  },
  scrollable: true,
  columnMenu: false,
  autoBind: false,
  columns: [{
    field: 'PURCHASETYPE',
    title: 'PURCHASETYPE',
    width: 110
  }, {
    field: 'FACTORYNAME',
    title: 'FACTORYNAME',
    width: 110
  }, {
    field: 'CONSUMABLESPECNAME',
    title: 'CONSUMABLESPECNAME',
    width: 175
  }, {
    field: 'CONSUMABLESPECVERSION',
    title: 'CONSUMABLESPECVERSION',
    width: 185
  }, {
    field: 'DESCRIPTION',
    title: 'DESCRIPTION',
    width: 600
  }, {
    field: 'CONSUMABLETYPE',
    title: 'CONSUMABLETYPE',
    width: 140
  }, {
    field: 'CONSUMEUNIT',
    title: 'CONSUMEUNIT',
    width: 130
  }, {
    field: 'IQAAQL',
    title: 'IQAAQL',
    width: 90
  }, {
    field: 'IQADCSPECNAME',
    title: 'IQADCSPECNAME',
    width: 130
  }, {
    field: 'CREATEUSER',
    title: 'CREATEUSER',
    width: 120
  }, {
    field: 'CREATETIME',
    title: 'CREATETIME',
    width: 120,
    template: '#=Date.create(CREATETIME).format("{yyyy}-{MM}-{dd}")#'
  }]
});

$('#searchButton').click(function() {
  var searchCriteria = $('.searchCriteria').editable('getValue');
  var query = {
    page: 1,
    pageSize: 10,
    sort: {
      field: 'CREATETIME',
      dir: 'desc'
    },
    filter: [{
      field: 'PURCHASETYPE',
      operator: 'eq',
      value: searchCriteria.purchaseType
    }, {
      field: 'CONSUMABLESPECNAME',
      operator: 'contains',
      value: searchCriteria.consumableSpecName
    }, {
      field: 'DESCRIPTION',
      operator: 'contains',
      value: searchCriteria.description
    }, {
      field: 'CREATETIME',
      operator: 'gte',
      value: searchCriteria.createTimeStart
    }, {
      field: 'CREATETIME',
      operator: 'lte',
      value: searchCriteria.createTimeEnd
    }]
  };
  dataSource.query(query);
});

$('#resetButton').click(function() {
  $('.searchCriteria').editable('setValue', '');
  var query = {
    filter: {
      field: '1',
      operator: 'neq',
      value: '1'
    }
  };
  dataSource.query(query);
});


<View: 실행화면>


저작자 표시 비영리 동일 조건 변경 허락
신고

[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 문자열로 변환하여 서버에 전달


저작자 표시 비영리 동일 조건 변경 허락
신고