CODEWITHSUNDEEP
angularkendo-ui-angular2
Prashant Shrivastava
Prashant Shrivastava

Reputation: 189

Kendo grid Angular UI Horizontal scrollbar issue

If I have only one record in kendo grid that time horizontal scroll bar is not working.

I tried to resolve this issue using CSS but still is not resolve. 

.k-grid-content {
      overflow-x: scroll !important;
}

Upvotes: 1

Views: 5241

Answers (1)

topalkata
topalkata

Reputation: 2098

As long as the Grid is scrollable (the default) and the sum of widths of all columns with set widths is greater than the width of the Grid, the horizontal scrollbar will appear regardless of the number of items (unless there are 0 items):

import { Component } from '@angular/core';

@Component({
   selector: 'my-app',
   template: `
       <kendo-grid [data]="gridData">
        <kendo-grid-column field="ProductID" width="500"></kendo-grid-column>
        <kendo-grid-column field="ProductName" width="500"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice" width="500"></kendo-grid-column>
        <kendo-grid-column field="Discontinued" width="500"></kendo-grid-column>
       </kendo-grid>
   `
})
export class AppComponent {
   public gridData: any[] = products;
}

const products = [{
   "ProductID": 1,
   "ProductName": "Chai",
   "UnitPrice": 18.0000,
   "Discontinued": true
 }
];

PLNKR

Upvotes: 2

Related Questions