Igniteui-angular: [Question] how to show scrollbar in igx-grid

[JiaLiPassion]

I simple want to know how to show scrollbar in igx-grid, I want to run the igx-grid performance demo, but npm start:demos failed to compile.

RROR in [at-loader] ./app/grid/sample.component.ts:9:5
    TS2305: Module '"/Users/lijia/workspace/sample/igniteui-angular/demos/lib/main"' has no exported member 'IgxExcelExporterService'.

ERROR in [at-loader] ./app/grid/sample.component.ts:20:10
    TS2305: Module '"/Users/lijia/workspace/sample/igniteui-angular/demos/lib/main"' has no exported member 'IgxCsvExporterService'.

ERROR in [at-loader] ./app/grid/sample.component.ts:22:10
    TS2305: Module '"/Users/lijia/workspace/sample/igniteui-angular/demos/lib/main"' has no exported member 'IgxCsvExporterOptions'.

ERROR in [at-loader] ./app/grid/sample.component.ts:23:10
    TS2305: Module '"/Users/lijia/workspace/sample/igniteui-angular/demos/lib/main"' has no exported member 'CsvFileTypes'.

ERROR in [at-loader] ./app/grid/sample.module.ts:14:5
    TS2305: Module '"/Users/lijia/workspace/sample/igniteui-angular/demos/lib/main"' has no exported member 'IgxExcelExporterService'.

ERROR in [at-loader] ./app/grid/sample.module.ts:18:10
    TS2305: Module '"/Users/lijia/workspace/sample/igniteui-angular/demos/lib/main"' has no exported member 'IgxCsvExporterService'.
Child html-webpack-plugin for "index.html":

I just write a very simple grid.

<igx-grid #grid1 [data]="localData" [width]="'800px'" [height]="'600px'">

with autoGeneratedColumns, but no scrollbar in both directions.

Please help, thanks.

[JiaLiPassion]

scrollbar just appears, I am not sure which code I changed, just close it.

[zdrawku]

We are currently updating and restructuring all of our documents and soon they will be available in the Grid Virtualization subtopic.

I am sharing with you a section that would help you to gain better understanding of Grid sizes and scroll appearance:

Why having dimensions in the grid is neccessary for virtualization to work?

Without information about the sizes of the container and the items before rendering them setting the width or height of a scrollbar or determining which of the items should be in the view when you scroll to a random location in the grid is erroneous. Any assumptions on what the actual dimensions might be could lead to unnatural behavior of the scrollbar and ultimately suboptimal experience for the end-user. This is why setting the related dimensions is enforced in order for virtualization to take affect.

What results would I get with different combinations of set width/heights along with widths for columns and height for rows?

Please refer to the below table for details on how each combination of configurations would affect the end result.

| Set Grid width | Set Grid height | Set 'rowHeight' | Set 'columnWidth' or all columns have explicitly set width | Result |
|--------------------|--------------------|--------------------|------------------------------------------------------------|-------------------------------------------------------|
| :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | Grid with both horizontal and vertical virtualization |
| :heavy_check_mark: | :x: | N/A | :heavy_check_mark: | Grid with just horizontal virtualization |
| :x: | :heavy_check_mark: | :heavy_check_mark: | N/A | Grid with just vertical virtualization |
| :x: | :x: | N/A | N/A | Grid with no virtualization |
| :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :x: | Grid with just vertical virtualization |
| :heavy_check_mark: | :heavy_check_mark: | :x: | :heavy_check_mark: | Invalid config |
| :heavy_check_mark: | :heavy_check_mark: | :x: | :x: | Invalid config |

• Setting the grid height but deliberately passing null for rowHeight is not supported
• Setting some of the column widths but leaving others unset without specifying columnWidth for the grid will result in a grid without horizontal virtualization. The exact sizes of the columns will be determined by the flex rules applied for the container.

[JiaLiPassion]

@zdrawku , Thank you for the information, I have two more questions.

1. and will ignite grid support resize column by drag?
   2, I tested column movable feature, not work, is there any sample?

Thank you!

[zdrawku]

We are currently implementing column resizing feature that will be finished by 16th of April, as we pointed out in our Development Roadmap

As for the movable feature, at the beginning of igxGrid development it was present out of the box, although when we started to implement some of the core grid features, we lost that functionallity.

You can check the progress of this issue related to the Column Moving feature

[JiaLiPassion]

@zdrawku , got it, thank you.