How to hide grid scroll?

[Andrei]

Hello. Is it possible to hide scroll on grid if data list is short and show when it's big? For example when we filter data list.
I found only this solution:

 

<input type="text"  #filterInput  placeholder="Search" (keyup)="itemsFilter(filterInput.value)" />

 

<kendo-grid class="grid-customized-border"

  [style.height.px]="300"

  scrollable="scrollable"

  [data]="gridView"

  [sortable]="{

    allowUnsort: allowUnsort,

    mode: 'single'

    }"

  [sort]="sort"

  (sortChange)="sortChange($event)"

  [selectable]="true"

  [kendoGridSelectBy]="'id'"

  [selectedKeys]="selectedRows"

  #grid

>

 

itemsFilter(value) {

    if (value) {

      this.gridView.data = this.gridView.data(item => {

        return item.title.toLowerCase().indexOf(value.toLowerCase()) === 0

      });

    }

    setTimeout(() => this.toggleScroll());

}

 

public toggleScroll() {

    if (this.grid) {

      let el = this.grid.nativeElement,

        content = el.querySelectorAll('.k-grid-content')[0],

        table = el.querySelectorAll('.k-grid-table-wrap')[0],

        header = el.querySelectorAll('.k-grid-header')[0];

      if (table && content) {

        if (table.offsetHeight < content.offsetHeight) {

          content.style.cssText = 'overflow-y: auto';

          header.style.cssText = 'padding: 0';

        } else {

          header.style.cssText = 'padding: 0 16px 0 0';

        }

      }

    }

}

[Svet]

Hi Andrei,

Thank you for the provided screenshots.

We can achieve the desired functionality by utilizing the conditional scroll feature as demonstrated in the following article:
https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/#toc-conditional-scrolling

We can also set the height of grid to be the same as the maxHeight in order to keep the same height of the grid regardless of the number of items it holds:
https://plnkr.co/edit/L1hxZhccClglmHaSF3Mt?p=preview

The important parts are marked in red below:

<kendo-grid [data]="gridData" [style.maxHeight.px]="700" [height]="700">
    <kendo-grid-column field="ProductID" title="ID" width="40">
    </kendo-grid-column>
    <kendo-grid-column field="ProductName" title="Name" width="150">
    </kendo-grid-column>
    <kendo-grid-column field="Category.CategoryName" title="Category" width="200">
    </kendo-grid-column>
    <kendo-grid-column field="UnitPrice" title="Price" width="80">
    </kendo-grid-column>
    <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
    </kendo-grid-column>
    <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
        <ng-template kendoGridCellTemplate let-dataItem>
            <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Andrei]

Hello. Thank you for response.

By params 'height' or 'maxHeight' we can do scrollbar active/disable. But can grid hide scrollbar if it doesn't need (not disable, just hide scrollbar)? I mean change param scrollable between 'none' and 'scrollable' depends on grid data height.

Thanks.

[Svet]

Hi Andrei,

Thank you for the additional details.

The grid does not automatically change its [scrollable] input property based on its height or maxHeight properties. But we can conditionally change the value of the [scrollable] input property. Check the following sample plunker:
https://plnkr.co/edit/uQkU0DDNoNYQPVEqaCTU?p=preview 

<kendo-grid [data]="gridData" [style.maxHeight.px]="700" [scrollable]="scrollMode">
...
public changeNumberOfItems(numberOfItems: number): void {

  if(numberOfItems == 10){

    this.scrollMode = "none"

  }else{

    this.scrollMode = "scrollable"

  }

  this.gridData = products.slice(0, numberOfItems);

}

Let me know in case I am missing something or further assistance is required for this case.

Regards,
Svetlin
Progress Telerik

[Anastasiya]

 

This helps me:

.k-grid-content {
  overflow-y: auto;
}