JavaScript
JavaScript(JS) - kendo-ui / grid
인어공쭈
2023. 3. 24. 11:00
그리드 작업하면서 넓이를 각각 조절해야되는게 너무 귀찮았다
이런식으로 컬럼에 각각 넓이를 지정해줘야 텍스트가 잘리지않았다.
그래서 자동으로 넓이를 맞춰주는 방법이 없을까 찾아봤다. 생각보다 여러가지 방법이 존재하네?
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
Demo of core features in jQuery Grid widget | Kendo UI for jQuery
The Kendo UI for jQuery Grid component renders data in a tabular format and supports a vast range of powerful data management and customization features such as filtering, grouping, sorting, editing, and many more. The jQuery Grid comes with local and remo
demos.telerik.com
반응형