Search code examples
angularkendo-uikendo-ui-angular2

Kendo UI for Angular: how to define min-width in grid


In this Kendo UI for Angular grid I defined the columns with width: 100px. What I need now is to define the columns with min-width instead of width. Is this possible?

<kendo-grid 

    [kendoGridBinding]="data"
    [resizable]="true"
    [sortable]="true"
    filterable="menu">
    
    <kendo-grid-column
        *ngFor="let col of columns"
        [title]="col.title"
        field="{{col.field}}"
        filter="{{col.filter}}"
        [width]="100"
        [class]="{'alignRight': col.alignRight }">
    </kendo-grid-column>

</kendo-grid>

Solution

  • Please try using minresizablewidth input property like:

    <kendo-grid 
    
    [kendoGridBinding]="data"
    [resizable]="true"
    [sortable]="true"
    filterable="menu">
    
    <kendo-grid-column
        *ngFor="let col of columns"
        [title]="col.title"
        field="{{col.field}}"
        filter="{{col.filter}}"
        [width]="100"
        [minResizableWidth]="80"
        [class]="{'alignRight': col.alignRight }">
    </kendo-grid-column>
    

    to make sure that the user cannot resize the column by using the UI (not less than 80px in the example).