그리드의 내용을 excel export 받고 싶습니다.
Net애드온 기능을 사용하지 않고 페이징을 해서 grid를 그리고 있는데,
options 값으로 toolbar: true만 해서는 excel export 기능을 사용할수 없는건가요?
샘플코드나 가이드 페이지에서는 해당 내용에 대한 부분이 없어서 문의 드립니다.

그리드 로우 클릭 시 아래와 같이 했을 때,
grid_id.addRowClassName(rowKey, 'myStyle');

다음과 같은 스크립트 오류가 발생합니다.
grid.min.js:5 Uncaught TypeError: Cannot read property 'addClassName' of undefined
at child.addRowClassName (grid.min.js:5)

확인 부탁드립니다.

다른 셀 선택시 앞에서 날짜 컨트롤 선택시 나왔던 캘린덕 박스 날짜 데이터가 바인딩이 됨..

안녕하세요.
예제를 보면 셀 병합이 아래와 같이 데이터영역에 구현이 되어 있는데요.

{
    name: '19',
    artist: 'Adele',
    release: '2008.01.27',
    type: 'EP',
    genre: 'Pop,R&B',
    _extraData: {
        rowSpan: { // Merge rows
            artist: 3,
            genre: 2
        }
    }
},

혹시 이 방법 말고, 컬럼의 속성으로 병합을 구현할 수는 없는 건가요?
그리고 _extraData 의 속성들은 어디에서 찾아볼 수 있을까요?
감사합니다.

안녕하세요.

제목과 같이 셀 입력시 한글을 우선하여 입력하고 싶습니다.

가능한가요~?

type : year, month 였을때 달력이 년도, 년월만 나와야 되는데 안되네요.

달력컨트롤에도 같은 문제입니다..

1.9.0 버젼에서 changeBeforeCallback 함수에서 상품 소분류 선택에 따른 가격, 할인률 등을 셋팅해 주었는데,

2.0.0 버젼이상에서 changeBeforeCallback 함수가 없어진것 같습니다.

onBlur 이벤트보다는 onChange 이벤트가 성격에 맞을 것 같은데, 이벤트가 없네요.

이런 기능은 어디에서 구현해야 할까요?

그리드 옵션 displayRowCoun(deprecated) 사용하지 않고
bodyHeight 값만 부여했을 경우 데이터 로우만큼 그리드가 커지는 현상 발생

더블클릭이였을때는 상관없는데..

클릭 으로 에디트 모드로 열려면 다른 곳으로 포커스가 이동됩니다..

그리드 로우를 더블클릭하면 빈줄이 하나씩 늘어남.

그리드 특정 키 값에 따라 에디트 옵션을 비활성 하고 싶습니다!

재현 순서

1. grid를 작성합니다.
2. window를 줄여서 grid의 최소 크기보다 더 줄입니다.
3. 간혹 스크롤 오른쪽에 dummy cell이 생깁니다.

• 해당 페이지 : https://github.com/nhnent/tui.grid/wiki/Getting-Started

1. Including Files

아래와 같이 파일명에 -component- 가 붙어야 합니다.

<script src="bower_components/tui-component-pagination/dist/tui-component-pagination.js"></script>
<script src="bower_components/tui-component-date-picker/dist/tui-component-datepicker.js"></script>

2. Setting data

grid.setRowList() 는 없어진(?) 듯합니다.

setRowList() 대신 setData() 로 하니 동작해서, 해당 부분 확인 필요합니다.

안녕하세요

개발중 안되는게 있어 문의 드려요

데이터 클릭시 행 단위로 선택하려고 selectionUnit : 'row' 을
지정해 줬으나 계속 cell 단위로만 선택이 되더라고요

제가 쓰는 방법이 틀렸나요
다른 방법이 있으면 알려주세요

감사합니다
수고하세요

TOAST UI GRID를 사용해보니 좋은점이 많이 보입니다^^
감사드리구요...
한가지 요청드려봅니다.
엑셀에서 입력해보시면 입력후 엔터키치면 다음칸(밑)으로 자동으로 내려가서
바로입력이가능한데 이기능이 매우 편리하더라구요..
혹시 TOAST UI GRID에서 구현가능할까해서 이슈남겨봅니다.
건강하세요~~

안녕하세요~
게임포털개발팀 이효민 입니다.

grid 에서 datetimepicker tui component 를 적용하는 방법이 궁금합니다.
아래 예제 페이지에서 년/월/일 까지는 적용하는 방법을 확인했습니다.
https://nhnent.github.io/tui.grid/api/tutorials/example5.html

아래 예제에 있는 것과 같이 년/월/일 시:분:초 형식을 grid cell에 적용하려고 하는데, grid에 columnModelList 쪽 component 옵션에 어떻게 넣어야할지 잘 모르겠습니다.
https://nhnent.github.io/tui.component.date-picker/latest/tutorials/datetimepicker.html

적용이 가능할지와. 가능하다면 가이드좀 부탁드리겠습니다.

참고로 작업중인 페이지에서 import하고 있는 js,css 들은 아래와 같습니다..

그리고 아래는 grid 쪽에 기존에 설정되어 있는 component 옵션 입니다.

    {
        "title" : "<b>판매시작<br>start_date</b>",
        "columnName" : "startDate",
        "width" : 100,
        "align" : "right",
        "editOption" : {
            type: 'text'
        },
        component: {
            name: 'datePicker',
            option: {
                dateForm: 'yyyy/mm/dd',
                date: {year: 1970, month: 1, date: 1}
            }
        }
    },

그럼, 확인 부탁드리겠습니다~^^
감사합니다

안녕하세요
그리드 컴포넌트에서 columns 설정부분에
datePicker 적용시, options 적용이 되지 않아 질문드립니다

new tui.Grid({
...
...
columns : [
{
title : "생산년도",
name : "PRODUCTION_YEAR",
width : 100,
editOptions : {
type: 'text'
},
sortable:true,
component: {
name: 'datePicker',
options: {
/*
아래부분에 type: 'year' 옵션 등 그리드에서 datePicker 컴포넌트를 사용할 때
사용자 UI 에서 년도 선택화면을 기본적으로 표현하고자 합니다
*/
format: 'yyyy',
type: 'year'
}
}
},
]
})

위의 소스대로 적용하였을때, year 옵션이 적용되지 않는 문제에 대해 해결 방안이 있는지요..

Grid 왼쪽에 NO (숫자)칼럼을 없앨수 있나요?

1.9.0 버젼으로 개발하다 2.1.0 으로 업그레이드 하려고 하다보니,
많이 바뀌었네요.
먼저, 노고에 감사드립니다.

그리드 이벤트에서 API 문서에는 아래와 같이 나와 있는데,

dblclick
Occurs when a mouse button is double clicked on the Grid.
The event object has all properties copied from the native MouseEvent.

Type:
module:event/gridEvent

Properties:
Name Type Description
targetType string type of event target
rowKey number rowKey of the target cell
columnName string columnName of the target cell

실제로 해보니, targetType 하나에 모두 들어있네요.
API 문서하고 현재 버젼하고 달라서 글 남깁니다.
확인 부탁드려요.

그리드에 select 박스나 text박스는 있는데.
공통팝업을 띄워서 팝업에서 파라미터받아서 세팅하는 샘플은 없는듯합니다.
샘플이 있었으면 좋겠습니다.

Grid내용을 출력하려고 할때 그리드내용전체를 어떻게 받는지 궁금합니다.

안녕하세요.
grid에서 특정 위치에 행을 추가하고 싶습니다.
예제에 가 보니 없는 것 같습니다만....
지원되는 기능인지 확인 좀 부탁드려요~

안녕하세요.

relationList 에서 "optionListChange" 는 'select', 'radio', 'checkbox' type만 지원하는 것으로 나와 있는데요.

상품분류에 따라 최종 상품을 선택한 경우 상품가격을 변경해 주고 싶은데, 어떻게 해야 할까요?

최종 상품 선택시에
changeBeforeCallback 함수에서 자료를 읽어와서 어떻게 해당 칼럼 정보를 변경해야 할지 찾지 못해서요.

행추가 메소드 2개가 눈에 보이네요...

1. grid.prependRow(row, focus);
   row에 어떤값을 줘야할지...0 을주고 실행해보면
   맨위에 잠깐 행추가됐다가 사라집니다.ㅠㅠ
   2.grid.appendRow(row,optionsopt);
   row에 어떤값을 줘야할지...설명에는 The data for the new row (새행의 자료)라 되있고,
   optionsopt에는 focus를 주면 되는것인지..맨밑에 행추가되는거 같긴한데 사용법이 어렵네요
   설명부탁드려요^^

columnFixIndex로 고정할 인덱스를 지정하면
가로스크롤 시 스크롤이 안되는 것 아닌가요?
별도 frozen 기능의 함수가 있나요?
setColumnFixCount로 지정해도 동일하게 모두 스크롤되는 것 같습니다.

추가로 멀티 컬럼 고정이나 좌,우 컬럼 고정이 가능할 수는 없나요?

안녕하세요 :)

"changeBeforeCallback" : function (changeEvent){
// console.log("셀렉트박스2 값 변경 이벤트 : ", changeEvent);
return EventTest();
}
그리드에서 셀렉트박스를 선택하고 다른 곳에 포커스를 클릭해야 함수를
호출이 되는것 같은데 바로 호출해 올수 없나요?

http://nhnent.github.io/tui.grid/api/tutorial-example2.html 예제와 같이
대분류에서 '선택하세요'를 선택하고 다른 곳에 클릭했을때만 중분류 컬럼의 셀렉트박스가
disabled 처리되는데 대분류에서 바로 선택했을때 처리는 안되나요?

editOptions.type에 number가 추가되면

validation 처리가 용이할 것 같아요.

아니면, validate의 TYPE_NUMBER 처리를

onBeforeChange나 onAfterChange 쪽에서 할 수 있을까요?

number 처리가 쉽지 않네요.

안녕하세요.

tui.Grid 를 이용해서 개발중입니다.
제목처럼 숨겨진 div에 그리드 생성시 첫번째 칼럼만 보이고 그리드 로우를 클릭하면 제대로 보이는 현상이 있습니다. 확인 부탁드립니다.
그리드 생성 옵션을 계속 확인해보고 있는데 문제점을 찾을 수 없어서 문의 드립니다.

감사합니다.

제 개발환경은
spring boot : 1.4.2
bootstrap theme : gentelella

크롬 디버거에서 확인한 내용입니다.

rows 에 array로 7건의 데이터가 있는데,

그리드 setData(rows) 하면 그리드에 3건만 보이네요.

로우 칼럼값들이 같은 경우 표현하지 않는 건가요?

수고 많으십니다. 2.1.0-a 업그레이드 하면서 발생한 현상 확인 요청 드립니다.

1. dblclick 와 비슷하게 click event Parameters 값이 API 문서와 다릅니다. 확인 부탁합니다.

2. relations에서 대, 중, 소 분류인 경우 대분류 변경시 소분류가 남아 있는 현상 확인 부탁합니다.
   var grid = new tui.Grid({
   el: $('#grid'),
   scrollX: false,
   scrollY: false,
   rowHeight: 30,
   columns: [
   {
   title: 'Category1',
   name: 'category1',
   editOptions: {
   type: 'select',
   listItems: [
   { text: 'Select', value: '' },
   { text: 'Domestic', value: '01' },
   { text: 'Overseas', value: '02' },
   { text: 'Etc', value: '03' }
   ],
   useViewMode: false
   },
   relations: [
   {
   targetNames: ['category2'],
   // targetNames: ['category2', 'selectedValue'],
   // targetNames: ['category2'],
   listItems: function(value) {
   // console.debug("listItems ###", value);
   return twoDepthData[value];
   },
   disabled: function(value) {
   return !(value);
   }
   },
   {
   targetNames: ['category3'],
   disabled: function(value) {
   console.debug("disabled ###", value);
   return !(value);
   }
   }
   ]
   },
   {
   title: 'Category2',
   name: 'category2',
   editOptions: {
   type: 'select',
   listItems: [],
   useViewMode: false
   },
   relations: [
   {
   targetNames: ['category3'],
   listItems: function(value) {
   return treeDepthData[value];
   },
   disabled: function(value) {
   return !(value);
   }
   }
   ]
   },
   {
   title: 'Category3',
   name: 'category3',
   editOptions: {
   type: 'select',
   listItems: [],
   useViewMode: false
   }
   }
   ]
   });

3. 2.x 대로 업그레이드 하는 가이드 문서를 readme 문서에 링크 걸어주시면 좋을 것 같습니다.

4. 여유가 되신다면, 각 버젼별 API 문서를 제공해 주시면 좋겠습니다.

수고하세요.

요즘 뜸하시네요...바쁜신거같네요...ㅎ
시간되시면 답변좀 부탁드립니다.
그리드2개를 나란히 (왼쪽그리드1개 오른쪽그리드1개) 놓을려고 하는데, 프로그램구성상 필요해서요
2번째 그리드(오른쪽그리드가)
자꾸 내려와서 화면구성에 애를 먹고 있습니다.
방법이 있을까요??

안녕하세요.

제목처럼 그리드 옵션에 체크박스와 칼럼 고정 속성을 정의할때, 체크박스 너비가 줄어드는 현상이 발생합니다.

크게 문제 될 사안은 아니지만, 가운데 정렬이 안되는 것처럼 보이는 군요.

확인 부탁드립니다.

감사합니다.

autoNumbering: true고 아래와 같은 컬럼의 출력정보 때문에 행의 높이가 길어지는 경우,
auto numbering을 출력하는 열이 전체 행의 높이에 맞춰서 조정되지 않습니다.

그리드 버전 : 1.1.0

                {
                    columnName : 'repImgUrl',
                    title : '샘플',
                    width : 60,
                    align : 'center',
                    formatter : function(value, rowData) {
                        return "<img src='" + value + "?100x100' />";
                    }
                },

안녕하세요.
tui grid 를 사용해보고자 테스트 중 입니다.
bodyHeight 나 fitToParentHeight 가 설정된 상태에서 setRowList, appendRow 호출 시 그리드 높이가 row 수 만큼 늘어나거나 줄어드는 현상이 발견되어서 이슈 남깁니다.

var grid = new tui.Grid({
	el: $('#id'),
	headerHeight:20,
	rowHeight:20,
	bodyHeight: 300
});

grid.setRowList([
	{id:1,name:'A'},
	{id:2,name:'B'}
]);

• 버전: 1.1.1

로(row)를 클릭하면 반전이 생기는데,
컬럼을 클릭하면 헤딩(heading) 영역에 아무런 UI피드백이 없습니다.

클릭 시, 눌림이든 반전이든 뭔가 피드백이 있으면 보다 자연스러울 것 같습니다.

엑셀에서 데이터를 복사하여 붙여넣기할 때 만약 붙여넣을 행이 제일 마지막 행이고 복사한 데이터가 두 개 이상의 행을 가지고 있을 때 그리드에서 자동으로 행이 늘어나는 기능이 제공되나요?
제가 예제 페이지를 통해 테스트했을 때는 행이 늘어나지 않고 제일 마지막 행만 복사한 데이터의 첫번째 행으로 변경되어서 문의드립니다.

chrome 브라우져에서 onBlur 이벤트 발생을 인식하지만,

firefox, ie11 에서는 인식하지 않습니다.

다른 이벤트들은 테스트 하지 않았습니다.

같이 확인 부탁드려요.

그리드 생성시 코드입니다.

var gridDblogsOption = {
el: $('#gridDblogs'),
selectType: 'checkbox',
autoNumbering: false,
headerHeight: 30,
bodyHeight: 381, // 10 row 바디 기본 높이는 27 지정하면 그리드 스크롤이 안생김.
minimumColumnWidth: 20,
singleClickEdit: false,
isFixedHeight: true,
pagination: true,
columnModelList : columnModelList
};
gridDblogs = new tui.Grid(gridDblogsOption);

select 결과후 데이터 총 레코드 수가 변경되므로 이때 pagination 생성 및 이벤트 부여 코드

gridDblogs.setRowList(obj.data);

var pageOption = {
itemCount: 500
, itemPerPage: t_param.itemPerPage
, pagePerPageList: 10
, page: req_page
};
var pagination = new tui.component.Pagination(pageOption, $('.tui-grid-pagination'));
ㅊ.on('beforeMove', function(eventData) {
req_page = eventData.page;
doSearchFunc(getSelectListReq);
});

이렇게 pagination 하면 처음, 이전, 다음, 마지막 페이지 이동할 수 있는 아이콘이 표시되지 않습니다.

안녕하세요.

셀입력시 숫자만 입력 받고 싶은데

그리드 셀에서 키입력 관련 이벤트를 사용할 수 있나요?

재현 브라우저

• 크롬에서 재현됩니다
• 작업시 IE에서도 재현되었으나 샘플예제에서는 재현되지 않습니다.]

재현해보기
예제(https://nhnent.github.io/tui.grid/api/tutorial-example1.html) 페이지 기준으로 설명드리자면

송장번호의 우측변을 클릭하여 그리드 너비를 조정할 때

1. 그리드가 그려진 엘리먼트 안에서 드레그 하여 조정시

• 이상없음

2. 그리드가 그려진 엘리먼트 바깥까지 드레그하여 조정하는 경우

• mouseup시에 mouseup된 위치까지 셀의 너비가 늘어나지 않는다.
• 드래그 상태인것처럼 커서가 활성화되어 계속 마우스를 따라서 너비가 조정된다. (그리드 안을 클릭해야 다시 원래의 커서/상태로 돌아온다.)
  => 송장번호가 아니라 메모와 같이 긴 텍스트인 경우, 텍스트 확인을 위해 너비를 조정해야할 일이 생깁니다.

기대하는 바
그리드 바깥까지 너비조정으로 드레그를 할 경우

1. mouse up 시에 드래그상태를 해지한다.
2. mouse up된 위치의 폭 만큼 그리드를 늘린다. (가능할까요? 아니면 조정가능한 기본 여분폭(?)이라도 기본으로 있었으면 좋겠습니다)

고맙습니다.

안녕하세요.
IE8에서 edit 후 esc 또는 enter 로 종료한 경우 포커스를 잃어버리는 현상이 발생하는 것 같습니다.

예제(https://nhnent.github.io/tui.grid/api/tutorials/example4.html) 기준으로 테스트 하였습니다.

감사합니다 ~

한칼럼만 계속 입력하려고 할때말이죠...
Grid에 데이터 입력시 엔터키치고 다음행으로 내려가서 바로 입력가능하게 가능할까요?
제가 사용해보니 Grid에서 엔터키를 쳐야 입력이 가능하더라구요...한두개 입력시에는 문제가
없겠지만 데이터를 많이 입력할때는 불편할거 같습니다.

angular directive로 만들어서 사용을 하려고 계획 중에 있습니다.

튜토리얼 1번 예제로 간단하게 디렉티브를 만들었습니다.

그런데 클릭 이벤트때 셀의 포커싱이 이상해서 작성합니다.

그리고 아래 이미지는 Container view에서 _onClick 함수에서는 타겟이 클릭한 셀을 가르키는데, 그리드에서 셀렉트가 된 셀은 아래의 셀로 잡혀있습니다.

1.궁금
Grid의 cell 클릭했을때 cellclick 이벤트나 click이벤트를 어떻게 사용하는지 모르겠어요
api보니 잘이해가 안되서 여쭤봅니다.
Occurs when a mouse button is clicked on the Grid.
The properties of the event object is the same as the native MouseEvent
이렇게만 되있어서요...

onclick{
//click했을때 코드
}
oncellclick{
//cellclick
}
간단한 예제부탁드려봅니다.

2.궁금
No(순서) 칼럼의 특정 행 클릭했을때 행의 전부가 선택되는데
다른 Cell을 선택했을때도 행의 전부가 선택되게 하려면 어떻게 하면될까요?

1. 스크롤바 제거방법
   스크롤바가 필요없는 경우에도, 우측과 하단에 스크롤바 영역이 존재하는데, 없애는 설정값이 있는지 궁금합니다.

2. editOption으로 text값 및, selectbox , checkbox, radio..등 변경하는 가이드가있는데요.
   http://nhnent.github.io/tui.grid/api/tutorial-example04.html
   이 기능을 통해 값이 변경될때, 어떤 이벤트로 잡아야하나요? 변경시, 바로 서버랑 통신해서 값을 바꾸고 싶습니다. 가이드엔 onBeforeChange 가있는데, 아무런 콘솔도 찍히지 않습니다.

안녕하세요.
샘플을 찾아봐도 안보여서요.
treegrid 형태로 구현하는 옵션은 없을까요?

제 윈도우환경PC에서 Tui.Grid 테스트하고 싶은데.... 잘안되네요...
다운로드 받은파일실행해봐도 잘안되고...도와주세욘~
완전초짜라....어렵네요~

좋은 소스를 공개해주신 덕분에 잘 사용하고 있습니다.

한 가지 원인을 확인할 수 없어서 글 남깁니다.

모바일웹에서 그리드로 표시되는 셀을 클릭할 경우
좌상단(0,0)으로 화면이 자동 스크롤되고 모바일용 키패드가 표시되는 현상이 있습니다.

edit 옵션을 주지 않았음에도 셀을 클릭하면 모두 동일하게 반응합니다.

HTML을 확인해 보면 Input 태그가 아님에도 키패드가 나오는 현상은 무엇인지 알 수 있을까요?

혹시나 해서 예제에서도 테스트해보았는데 동일하게 반응하네요.