syncfusion / flutter-widgets

Syncfusion Flutter widgets libraries include high quality UI widgets and file-format packages to help you create rich, high-quality applications for iOS, Android, and web from a single code base.
1.6k stars 787 forks source link

how to remove syncfusion datagrid blank space in the bottom? #2141

Closed miraj98hossain closed 3 weeks ago

miraj98hossain commented 1 month ago

Bug description

I have implemented syncfusion's datagrid following the documentation. but i am getting a large blank space after the datagrid. I am not able to remove or reduce it. I have mark this in the screenshot.

Steps to reproduce

  1. add syncfusion_datagrid package in the pubspec.ymal
  2. Implement SfDataGrid in side a column .

Code sample

Code sample ```dart SfDataGrid( source: jobHisDataSource, frozenColumnsCount: 1, gridLinesVisibility: GridLinesVisibility.both, headerGridLinesVisibility: GridLinesVisibility.both, columnWidthMode: ColumnWidthMode.fitByCellValue, columns: [ GridColumn( columnName: 'job_order_no', label: Container( color: appTheme.primary, alignment: Alignment.center, child: Text( 'Job Order no', style: textTheme.bodyMedium!.copyWith( color: appTheme.white, ), ), ), ), GridColumn( columnName: 'fpo_no', label: Container( color: appTheme.primary, alignment: Alignment.center, child: Text( 'FPO No', style: textTheme.bodyMedium!.copyWith( color: appTheme.white, ), ), ), ), GridColumn( columnName: 'item', label: Container( color: appTheme.primary, alignment: Alignment.center, child: Text( 'Item', style: textTheme.bodyMedium!.copyWith( color: appTheme.white, ), ), ), ), GridColumn( columnName: 'creation_date', label: Container( color: appTheme.primary, alignment: Alignment.center, child: Text( 'Creation Date', style: textTheme.bodyMedium!.copyWith( color: appTheme.white, ), ), ), ), GridColumn( columnName: 'plan_start_date', label: Container( color: appTheme.primary, alignment: Alignment.center, child: Text( 'Plan Start Date', style: textTheme.bodyMedium!.copyWith( color: appTheme.white, ), ), ), ), GridColumn( columnName: 'plan_cmplt_date', label: Container( color: appTheme.primary, alignment: Alignment.center, child: Text( 'Plan Cmplt Date', style: textTheme.bodyMedium!.copyWith( color: appTheme.white, ), ), ), ), GridColumn( columnName: 'fpo_qty', label: Container( color: appTheme.primary, alignment: Alignment.center, child: Text( 'Fpo Qty', style: textTheme.bodyMedium!.copyWith( color: appTheme.white, ), ), ), ), GridColumn( columnName: 'dtl_um', label: Container( color: appTheme.primary, alignment: Alignment.center, child: Text( 'Unit', style: textTheme.bodyMedium!.copyWith( color: appTheme.white, ), ), ), ), GridColumn( columnName: 'total_made_qty', label: Container( color: appTheme.primary, alignment: Alignment.center, child: Text( 'Total Made Qty', style: textTheme.bodyMedium!.copyWith( color: appTheme.white, ), ), ), ), GridColumn( columnName: 'good_qty', label: Container( color: appTheme.primary, alignment: Alignment.center, child: Text( 'Good Qty', style: textTheme.bodyMedium!.copyWith( color: appTheme.white, ), ), ), ), GridColumn( columnName: 'bad_qty', label: Container( color: appTheme.primary, alignment: Alignment.center, child: Text( 'Bad Qty', style: textTheme.bodyMedium!.copyWith( color: appTheme.white, ), ), ), ), GridColumn( columnName: 'trn_qty', label: Container( color: appTheme.primary, alignment: Alignment.center, child: Text( 'Trn Qty', style: textTheme.bodyMedium!.copyWith( color: appTheme.white, ), ), ), ), GridColumn( columnName: 'rack_qty', label: Container( color: appTheme.primary, alignment: Alignment.center, child: Text( 'Rack Qty', style: textTheme.bodyMedium!.copyWith( color: appTheme.white, ), ), ), ), GridColumn( columnName: 'made_p', label: Container( color: appTheme.primary, alignment: Alignment.center, child: Text( 'Made P(%)', style: textTheme.bodyMedium!.copyWith( color: appTheme.white, ), ), ), ), GridColumn( columnName: 'due_made_p', label: Container( color: appTheme.primary, alignment: Alignment.center, child: Text( 'Due Made P(%)', style: textTheme.bodyMedium!.copyWith( color: appTheme.white, ), ), ), ), ], ), ```

Screenshots or Video

Screenshots / Video demonstration ![Screenshot_1](https://github.com/user-attachments/assets/2484acea-a687-495c-ae3e-f0c8fe5424b9)

Stack Traces

Stack Traces ```dart no stack trace exception in the console ```

On which target platforms have you observed this bug?

Android

Flutter Doctor output

Doctor output ```console Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 3.24.3, on Microsoft Windows [Version 10.0.19045.5011], locale en-US) [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [√] Chrome - develop for the web [X] Visual Studio - develop Windows apps X Visual Studio not installed; this is necessary to develop Windows apps. Download at https://visualstudio.microsoft.com/downloads/. Please install the "Desktop development with C++" workload, including all of its default components [√] Android Studio (version 2024.2) [√] VS Code (version 1.94.2) [√] Connected device (4 available) [√] Network resources ! Doctor found issues in 1 category. ```
abineshPalanisamy commented 1 month ago

Hi @miraj98hossain ,

In the current implementation of the DataGrid, its width and height are set to match the dimensions of its parent. When no specific width or height is defined for the DataGrid, it automatically occupies the entire space allocated by the parent.

You are encountering an issue where a large blank space appears after the SfDataGrid when it's placed inside a Column. In a Column, widgets take up only the space they need unless explicitly constrained. If no height constraint is applied to the SfDataGrid, it will expand to fill all available vertical space within the Column, which can lead to the appearance of additional blank space.

This occurs because the Column allows its children to take as much vertical space as they need. Without a constrained height, the SfDataGrid expands to fill the available space. To fix this issue, wrap the SfDataGrid in a SizedBox or a Container with a defined height, or use the Expanded widget to ensure that the grid only occupies the remaining available space.

Regards, Abinesh P

ashok-kuvaraja commented 3 weeks ago

Hi @miraj98hossain,

We suspect that the reported issue has been resolved at your end. Hence, we are closing this issue. If you need any further assistance, please reopen this. We are always happy to help.

Regards, Ashok K