Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (23)Angular  (39)ASP.NET  (47)ASP.NET Core  (53)ASP.NET MVC  (83)Azure  (26)Blazor  (47)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (52)JavaScript  (134)Microsoft  (96)PDF  (48)React  (29)Succinctly series  (118)Syncfusion  (399)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (14)Windows Forms  (52)WPF  (92)Xamarin  (105)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (99)Chart  (40)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (31)Development  (233)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (13)Extensions  (7)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (139)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (2)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (15)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (4)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (15)UI  (62)Uncategorized  (68)Unix  (2)User interface  (48)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (7)Web  (96)What's new  (61)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
What's New in 2020 Volume 3: Flutter DataGrid

What’s New in 2020 Volume 3: Flutter DataGrid

We at Syncfusion introduced our Flutter DataGrid in the 2020 Volume 2 release with a limited set of features. Now, we have added some more features to let you use the DataGrid widget with more customization options. The 2020 Volume 3 release brings the following features for the Flutter DataGrid:

Paging

Paging is an essential feature to load a large amount of data in multiple pages. Our DataGrid already supported loading large amounts of data. But paging is useful when loading the data on demand based on the data availability. For that, we have introduced the DataPager widget. You can place this widget wherever you want to load data in pages. You can go through this UG documentation for getting started with the DataPager with DataGrid.

Refer to the following code example.

  
List<OrderInfo> paginatedDataSource = [];

final OrderInfoDataSource _orderInfoDataSource = OrderInfoDataSource();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: LayoutBuilder(
      builder: (context, constraint) {
        return Column(
          children: [
            SizedBox(
              height: constraint.maxHeight - 60,
              width: constraint.maxWidth,
              child: SfDataGrid(
                  source: _orderInfoDataSource,
                  columnWidthMode: ColumnWidthMode.fill,
                  columns: <GridColumn>[
                    GridNumericColumn(
                        mappingName: 'orderID', headerText: 'Order ID'),
                    GridTextColumn(
                        mappingName: 'customerID',
                        headerText: 'Customer Name'),
                    GridTextColumn(
                        mappingName: name, headerText: 'Name'),
                    GridNumericColumn(
                        mappingName: 'freight', headerText: 'Freight'),
                  ]),
            ),
            Container(
              height: 60,
              child: SfDataPager(
                delegate: _orderInfoDataSource,
                rowsPerPage: 20,
                direction: Axis.horizontal,
              ),
            )
          ],
        );
      },
    ),
  );
}

class OrderInfoDataSource extends DataGridSource<OrderInfo> {
  @override
  List<OrderInfo> get dataSource => paginatedDataSource;

  @override
  Object getValue(OrderInfo orderInfos, String columnName) {
    switch (columnName) {
      case 'orderID':
        return orderInfos.orderID;
        break;
      case 'customerID':
        return orderInfos.customerID;
        break;
      case 'freight':
        return orderInfos.freight;
        break;
      case `name`:
        return orderInfos.name;
        break;
      default:
        return '';
        break;
    }
  }

  @override
  int get rowCount => orderInfos.length;

  @override
  Future<bool> handlePageChange(int oldPageIndex, int newPageIndex,
      int startRowIndex, int rowsPerPage) async {
    int endIndex = startRowIndex + rowsPerPage;
    if (endIndex > orderInfos.length) {
      endIndex = orderInfos.length - 1;
    }
    
    paginatedDataSource = List.from(
        orderInfos.getRange(startRowIndex, endIndex).toList(growable: false));
    notifyDataSourceListeners();
    return true;
  }
}
Paging feature in Flutter DataGrid
Paging feature in Flutter DataGrid

Sorting

DataGrid provides built-in support to sort one or more columns in ascending or descending order. It also provides support to tri-state sorting, which helps you to unsort the data to get its original order. You can also show numbers along with the sort icon to indicate the sorted orders. You can go through this UG documentation for getting started with sorting.

Refer to the following code example.

  
@override
Widget build(BuildContext context) {
  return Scaffold(
      body: SfDataGrid(
    source: _employeeDataSource,
    allowSorting: true,
    allowMultiColumnSorting: true,
    columns: <GridColumn>[
                    GridNumericColumn(
                        mappingName: 'orderID', headerText: 'Order ID'),
                    GridTextColumn(
                        mappingName: 'customerID',
                        headerText: 'Customer Name'),
                    GridTextColumn(
                        mappingName: name, headerText: 'Name'),
                    GridNumericColumn(
                        mappingName: 'freight', headerText: 'Freight'),

    ],
  ));
}
Sorting feature in Flutter DataGrid
Sorting feature in Flutter DataGrid

Freeze panes

You can freeze rows and columns at the top, bottom, left, and right positions, similar to in an Excel worksheet. Horizontal and vertical scrolling can be performed, except on the fixed columns and rows. You can go through this UG  documentation for getting started with freeze panes.

Refer to the following code example.

  
@override
Widget build(BuildContext context) {
    return Scaffold(
        body: SfDataGrid(
    columns: <GridColumn>[
                    GridNumericColumn(
                        mappingName: 'orderID', headerText: 'Order ID'),
                    GridTextColumn(
                        mappingName: 'customerID',
                        headerText: 'Customer Name'),
                    GridTextColumn(
                        mappingName: name, headerText: 'Name'),
                    GridNumericColumn(
                        mappingName: 'freight', headerText: 'Freight'),
    ],
        frozenColumnsCount: 1,
        frozenRowsCount: 1,
        ),
    );
}
Freezing columns at the left in Flutter DataGrid
Freezing columns at the left in Flutter DataGrid

Header cell customization

These are the custom enhancements for header cells:

  • Load any widget—Load any widget in a header cell to represent the column header. For example, users can load an image with header text.
  • Text wrappingWrap the text when it exceeds the content area.
  • Alignment—Set the alignment positions for the text in a header cell.
Header cell customization feature in Flutter DataGrid
Header cell customization feature in Flutter DataGrid

Conclusion

I hope you have a clear idea of the new features and custom enhancements available for the Syncfusion Flutter DataGrid widget in the 2020 Volume 3 release. You can check out the list of all the features in our release notes and on the What’s New page.

Browse our documentation to learn more about our Flutter widgets. You can also see Syncfusion’s Flutter app with many examples in this GitHub repo. Don’t miss our demo app in Google Play and the App Store.

If you aren’t a customer yet, you can try our 30-day free trial to check out these features.

Also, if you wish to send us feedback or would like to submit any questions, please feel free to post them in the comments section of this blog post. You can also contact us through our support forumfeedback portal, or Direct-Trac support system. We are always happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top