JavaScript(JS) - kendo-ui / grid

그리드 작업하면서 넓이를 각각 조절해야되는게 너무 귀찮았다

이런식으로 컬럼에 각각 넓이를 지정해줘야 텍스트가 잘리지않았다.

그래서 자동으로 넓이를 맞춰주는 방법이 없을까 찾아봤다. 생각보다 여러가지 방법이 존재하네?

 

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