How to hide grid scroll?

5 posts, 0 answers
  1. Andrei
    Andrei avatar
    4 posts
    Member since:
    Mar 2018

    Posted 06 Jul 2018 Link to this post

    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';
            }
          }
        }
    }
  2. Svetlin
    Admin
    Svetlin avatar
    467 posts

    Posted 09 Jul 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Andrei
    Andrei avatar
    4 posts
    Member since:
    Mar 2018

    Posted 11 Jul 2018 in reply to Svetlin Link to this post

    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.
  4. Svetlin
    Admin
    Svetlin avatar
    467 posts

    Posted 12 Jul 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Anastasiya
    Anastasiya avatar
    1 posts
    Member since:
    Nov 2020

    Posted 09 Dec 2020 in reply to Svetlin Link to this post

     

    This helps me:

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

     

Back to Top