search

nhn / tui.grid

🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!
http://ui.toast.com/tui-grid/
MIT License
2.41k stars 388 forks source link

숨겨진 DIV 에 그리드 생성시 문제 #15

Closed globeer closed 7 years ago

globeer commented 7 years ago

안녕하세요.

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

감사합니다.

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

dongwoo-kim commented 7 years ago

안녕하세요. 실제 상태를 정확히 볼 수가 없어서 확실한 답변은 아닐 수도 있지만, 그리드는 렌더링 시에 내부적으로 실제 DOM 요소의 넓이를 참고해서 좌표를 계산하기 때문에, 숨겨진 상태에서 생성하게 되면 넓이값을 읽어오지 못해서 렌더링이 틀어지는 경우가 발생할 수 있습니다. 넓이가 항상 고정이라면 생성후에 setSize() 를 이용해서 넓이를 지정해 주시고, 아닌 경우 그리드가 실제로 화면에 보여진 직후에 refreshLayout() 함수를 호출해 주시면 해결될 것 같습니다. 한번 적용해 보시고, 문제가 지속되면 다시 피드백 부탁드립니다.

감사합니다 :)

globeer commented 7 years ago

알려주신대로 refreshLayout() 함수를 호출해서 해결했습니다.

참고로 작업한 소스 올립니다.

  1. 숨겨진 modal div인 경우 $("#myModal").on('shown.bs.modal', function () { grid_modal.refreshLayout(); });

  2. 숨겨진 tab div인 경우 $('.nav-tabs a').on('shown.bs.tab', function(event) { if (this.hash === "#tab-content") { grid_tab_content.refreshLayout(); } });

감사합니다.