Search code examples
htmlcssangularkendo-gridtelerik-grid

How to Resize (both height and width) KendoGrid in Angular?(Not the Column resizing)

I have a Kendo grid , which is to be resized like Kendo-window but there are some documents telling about column resizing by the below commands - [resizable] and [minResizableWidth], For example:-

<kendo-grid [kendoGridBinding]="gridData" [resizable]="true" style="height: 300px">

<kendo-grid-column-group title="Product Info">
                <kendo-grid-column
                    field="ProductID"
                    [width]="50"
                    [minResizableWidth]="30"
                    title="ID">
                </kendo-grid-column>
</kendo-grid-column-group>

</kendo-grid>

Is there any commands like [minResizableWidth] to tag <kendo-grid>?

I tried with Kendo-panes and Kendo windows ( output by Kendo windows is given in this link https://angular-xuadgj.stackblitz.io/ and Stackblitz code is given in https://stackblitz.com/edit/angular-xuadgj?file=src%2Findex.html) , but not satisfied with outputs.

Expected Output: Resizable KendoGrid whose width and height must be controlled by dragging the mouse button.

Solution

  • I went for Method 2 by Kendo grid in Stackoverflow solution. The First solution by kendo window cannot restrict the height, since it show the white spaces. We can change the scrollable property of the Kendo splitter pane by setting [scrollable]="false".