그리드 작업하면서 넓이를 각각 조절해야되는게 너무 귀찮았다
이런식으로 컬럼에 각각 넓이를 지정해줘야 텍스트가 잘리지않았다.
그래서 자동으로 넓이를 맞춰주는 방법이 없을까 찾아봤다. 생각보다 여러가지 방법이 존재하네?
1. autoFitColumn 를 사용하기
$("#grid").kendoGrid({
// 그리드 설정
columns: [
{ field: "name", title: "Name" },
{ field: "age", title: "Age" },
{ field: "address", title: "Address" }
],
dataSource: {
// 데이터 소스 설정
},
dataBound: function() {
this.autoFitColumn(0); // 첫번째 열에 대해 자동 넓이 맞춤
}
});
2. autoSize 사용하기
$("#grid").kendoGrid({
// 그리드 설정
columns: [
{ field: "name", title: "Name", autoSize: true },
{ field: "age", title: "Age", autoSize: true },
{ field: "address", title: "Address", autoSize: true }
],
dataSource: {
// 데이터 소스 설정
}
});
3. html 에다가 직접 적용하기
<kendo-grid
[data]="gridData"
[height]="400"
[pageSize]="pageSize"
[skip]="skip"
[sortable]="true"
[pageable]="true"
[scrollable]="'virtual'"
[autoFit]="true"
// [autoSize]="true"
(dataStateChange)="onStateChange($event)"
>
자세한 사항은 아래 참조
https://demos.telerik.com/kendo-ui/grid/index
반응형
'JavaScript' 카테고리의 다른 글
Jest를 사용한 JavaScript Test - 심화 (0) | 2023.10.19 |
---|---|
Jest를 사용한 JavaScript Test - 기본 (0) | 2023.10.19 |
JavaScript(JS) - 호이스팅과 var, let, const (0) | 2023.03.20 |
ECMAScript 2022 특징 (0) | 2023.02.24 |
JavaScript(JS) - 프로그래머스 문제풀기 (feat.배열,김선생) (0) | 2023.02.20 |