! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!
제품 버전 확인하기

특정 컬럼 헤더와 데이터의 정렬을 다르게 할 경우 어떻게 해야 하나요? > Q&A | 토론

본문 바로가기
로그인

로그인후 이용해주세요

아직 회원이 아니신가요?

회원가입
로그인
MESCIUS 카카오톡 채널 추가
메시어스 +
카카오톡 채널 추가를 통해 MESCIUS의 최신 정보, 이벤트, 세미나 정보를 빠르게 받아 보실수 있습니다
홈 링크 페이스북 링크 유튜브 링크

Wijmo

Q&A | 토론

PureJS 특정 컬럼 헤더와 데이터의 정렬을 다르게 할 경우 어떻게 해야 하나요?

페이지 정보

작성자 dounur
프로필 보기 쪽지 보내기
작성일 2022-12-06 11:29 조회 939회 댓글 1건
제품 버전 : wijmo
컨트롤 이름 : flexgrid

본문

헤더와 데이터의 정렬을 다르게 하는건 아래와 같은 방법으로 하는 걸 알겠는데 전체가 아닌 특정 컬럼만 정렬을 다르게 할 경우는 어떻게 처리 해야 하는지 궁금합니다.


https://dev.grapecity.co.kr/bbs/board.php?bo_table=wijmo_qna&wr_id=748 


그리고 추가 문의로 아래와 같은 그리드가 있을경우에 컬럼 크기를 줄였을때 병합되지 않은 컬럼 헤더의 경우 ... 표시가 되는데 병합된 컬럼은 ...표시가 아닌 폭 자체가 줄어듭니다. 병합된 컬럼도 ...표시가 되도록 하는 방법을 알고 싶습니다.


Name Curr per
ytd 1m 6m 12m
Constant Growth USD 5.23 1.42 4.43 7.43
Optimus Prime EUR 3.43 4.3 2.44 5.43



Name Cur per
yt. 1.. 6m 12m
Constant Growth U.. 5… 1… 4.43 7.43
Optimus Prime E.. 3… 4.. 2.44 5.43
  • 페이스북으로 공유
  • 트위터로 공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

GCK다이애나님의 댓글

GCK다이애나
프로필 보기 쪽지 보내기
작성일

안녕하세요 그레이프시티입니다.

문의 주신 내용에 대해 현재 확인 중에 있으며 확인 되는 대로 답변 드리도록 하겠습니다.
답변이 지연되어 죄송합니다.

감사합니다.
그레이프시티 드림

2 답변

PureJS Re: 특정 컬럼 헤더와 데이터의 정렬을 다르게 할 경우 어떻게 해야 하나요?

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 GCK다이애나
프로필 보기 쪽지 보내기
작성일 2022-12-09 08:59 댓글 1건

본문

안녕하세요 그레이프시티입니다.


먼저 답변이 지연되어 죄송합니다.

문의 주신 내용에 대해 다음과 같이 답변 드립니다.

1. 특정 열의 텍스트 정렬을 설정하는 방법

특정 열에 표시된 텍스트들을 정렬하시길 원하시는 경우, 아래의 코드와 같이 열의 align 속성을 설정하시면 됩니다.

columns: [
  { binding: 'sales', header: 'Sales', align: 'center' },
]

이와 관련된 데모 및 API 문서를 공유 드리오니 참고해 보시기 바랍니다.

- 사용자 정의 스타일 지정 데모

- align API 문서


2. 열 그룹이 지정된 그리드의 열 축소 시, 병합된 열 헤더의 텍스트가 잘리는 현상

문의 주신 현상은 열 헤더의 display 속성이 'flex' 로 설정 되어 있어 나타나는 현상으로, 아래의 코드와 같이 CSS 스타일 속성을 설정하여 일반 셀과 같이 텍스트를 축약할 수 있습니다.

.wj-header, .wj-header div {
  display: inline-block !important;
}

추가적으로 위 코드가 적용된 열 헤더 텍스트의 수직 정렬을 중앙으로 정렬 하고 싶은 경우, 그리드의 formatItem 이벤트를 이용하여 열 헤더의 lineHeight 속성을 설정하시면 됩니다.


자세한 코드는 아래의 샘플을 참고해 보시기 바랍니다.


이와 관련된 API 문서를 공유 드리오니 참고해 보시기 바랍니다.

- formatItem API 문서


다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.

그레이프시티 드림

댓글목록

dounur님의 댓글

dounur
프로필 보기 쪽지 보내기
작성일

1번관련하여 추가 질문 드리겠습니다.
해당 코드 작성시 데이터 정렬이 헤더와 데이터  둘 다 같이 적용이 되는데요 헤더는 center, data는 right정렬하는 방법 문의 드립니다.

PureJS Re: 특정 컬럼 헤더와 데이터의 정렬을 다르게 할 경우 어떻게 해야 하나요?

추천0 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK다이애나
프로필 보기 쪽지 보내기
작성일 2022-12-09 14:21 댓글 0건

본문

안녕하세요 그레이프시티입니다.


문의 주신 특정 열의 헤더와 셀의 텍스트 정렬을 서로 다르게 설정하는 방법에 대해 답변 드립니다.

열의 헤더 영역 이외의 셀의 CSS 스타일 속성을 설정하는 cssClass 속성을 이용해 보시기 바랍니다.

아래의 코드의 경우, 특정 열의 헤더 영역 텍스트는 중앙 정렬하고 헤더를 제외한 셀 영역 텍스트는 우측 정렬 하는 코드 입니다.

/* CSS */
.cell-country {
text-align: right !important;
}
...
/* JavaScript */
columns: [
  { binding: 'country', header: 'Country', align: 'center', cssClass: 'cell-country' },
],


- cssClass API 문서


API 문서를 공유 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

카테고리

인기글

더보기

최신글

더보기

셀럽

최근 7일 종합
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.