[Kendo UI] Grid에 row numbers 추가하는 방법 (JQuery)

 

Grid에 row numbers를 어떻게 추가하나 검색해보니, 공식문서에는 다음과 같이 설명이 되어있다.

 

주요 내용을 요약하자면,

1. record 변수를 선언해준다(var record = 0;).

2. columns 안에 template: "#= ++record #"을 추가해준다.

3. 아래를 추가해준다.

dataBinding: function() { record = (this.dataSource.page() -1) * this.dataSource.pageSize();}

 

전체코드(출처: Kendo UI 공식문서)

  <div id="grid"></div>
    <script>
      var record = 0;

      $("#grid").kendoGrid({
        dataSource: {
          type: "odata",
          transport: {
            read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
          },
          pageSize: 20

        },
        sortable: true,
        columns: [
          {
            title: "#",
            template: "#= ++record #",
            width: 50
          }, {
            field: "ContactName", title: "Contact Name"
          }, {
            field: "CompanyName",
            title: "Company Name"
          }, {
            field: "Country",
            width: 150
          }
        ],
        pageable: true,
        dataBinding: function() {
          record = (this.dataSource.page() -1) * this.dataSource.pageSize();
        }
      });
    </script>

 

 

그런데 내가 직접 했을 때 문제가 생겼다. 

 

var record = 0;과 같이 변수 선언을 했는데 record 변수가 한번도 안 읽혔다는 안내가 나왔다.

그리고 서버에 실행했을 때에 테이블에 값이 안 나오는 문제가 생겼다. 

 

무엇이 문제인가 검색 하던 중, stackoverflow에서 해결 방법을 찾았다.

The record variable should be defined as a global (window) variable. If this js code is being written in global scope, no problem. But if you are writing this code in a function, you should change the var record=0 to window.record=0, or you'll get an exception. – Mohammad Dehghan Dec 10, 2013 at 2:53

 

요약하자면 다음과 같다.

record 변수는 글로벌(window) 변수로 써야한다.

function 안에서 쓰려면, var record=0을 window.record=0으로 바꿔야 한다.

 

 

위와 같이 했더니 row numbers가 나왔다! 

 

row numbers가 나온 모습

 

내가 쓴 전체 코드는 다음과 같다.

window.record = 0;

$("#grid").kendoGrid({
    dataSource: dataSource,  
    pageable: {pageSize: 20, alwaysVisible: false},
    noRecords: {
        template: "데이터가 없습니다."
    },
    columns: [
		{ template:"#= ++record #", title:"순위", width: 10 },
        { template:"#: 비공개 #", title: 비공개,  width : 30},
		{ template:"#: 비공개 #", title: 비공개, width : 10}							             
    ],
    height: 285,			
    editable	: false,
    resizable	: false,
    selectable: "row",	
	dataBinding: function() {
	  record = (this.dataSource.page() -1) * this.dataSource.pageSize();
	}
    }).data("kendoGrid");

 

---

참고

https://docs.telerik.com/kendo-ui/knowledge-base/add-row-numbers

Add Row Numbers | Kendo UI Grid for jQuery | Kendo UI for jQuery

https://stackoverflow.com/questions/17378361/how-to-add-row-number-to-kendo-ui-grid

How to add row number to kendo ui grid?