From d49b81b5bfef0c186d9b6c55fd4563df37804358 Mon Sep 17 00:00:00 2001 From: Jeffreysebastian <145664919+Jeffreysebastian@users.noreply.github.com> Date: Wed, 10 Apr 2024 17:40:29 +0530 Subject: [PATCH 1/4] On-Page SEO for Flutter widgets --- Flutter/datagrid/columns-sizing.md | 14 +++++++------- Flutter/datagrid/editing.md | 10 +++++----- Flutter/datagrid/styles.md | 2 +- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/Flutter/datagrid/columns-sizing.md b/Flutter/datagrid/columns-sizing.md index 3f2909f71..117a8aec5 100644 --- a/Flutter/datagrid/columns-sizing.md +++ b/Flutter/datagrid/columns-sizing.md @@ -1,6 +1,6 @@ --- layout: post -title: Columns sizing in Flutter DataGrid | Syncfusion | DataTable +title: Columns sizing in Flutter DataGrid | Data Table | Syncfusion description: Learn here all about how to set the width for columns in Syncfusion Flutter DataGrid (SfDataGrid) widget and more. platform: flutter control: SfDataGrid @@ -89,7 +89,7 @@ Widget build(BuildContext context) { > **NOTE** The `GridColumn.columnWidthMode` takes higher priority than the `SfDataGrid.columnWidthMode`. -![columns filled based on view port size in flutter datagrid](images/autofit-columns/flutter-datagrid-fill-columns.png) +![columns filled based on view port size in Flutter Datagrid](images/autofit-columns/flutter-datagrid-fill-columns.png) ## Consider all the rows to calculate the autofit size @@ -241,7 +241,7 @@ class EmployeeDataSource extends DataGridSource { {% endhighlight %} {% endtabs %} -![flutter datagrid shows customization of padding in autofit calculation](images/autofit-columns/flutter-datagrid-autofitpadding-customization.png) +![Flutter Datagrid shows customization of padding in autofit calculation](images/autofit-columns/flutter-datagrid-autofitpadding-customization.png) ## Autofit calculation based on different TextStyle @@ -362,7 +362,7 @@ class CustomColumnSizer extends ColumnSizer { **NOTE** Download the demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-fit-the-column-based-on-the-different-text-style-in-Flutter-DataTable-sfdatagrid). -![flutter datagrid shows autofit the columns based on different text style](images/autofit-columns/flutter-datagrid-textstyle-customization.png) +![Flutter Datagrid shows autofit the columns based on different text style](images/autofit-columns/flutter-datagrid-textstyle-customization.png) ## Autofit calculation based on the formatted value @@ -482,7 +482,7 @@ class CustomColumnSizer extends ColumnSizer { **NOTE** Download the demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-fit-the-columns-based-on-the-formatted-value-in-Flutter-datatable-sfdatagrid). -![flutter datagrid shows autofit the columns based on formatted cell value](images/autofit-columns/flutter-datagrid-formatted-cellvalue.png) +![Flutter Datagrid shows autofit the columns based on formatted cell value](images/autofit-columns/flutter-datagrid-formatted-cellvalue.png) ## Fill the remaining width for any column @@ -540,7 +540,7 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} -![The last column is filled in view in flutter datagrid](images/autofit-columns/flutter-datagrid-fill-lastcolumn.png) +![The last column is filled in view in Flutter Datagrid](images/autofit-columns/flutter-datagrid-fill-lastcolumn.png) The below example shows Name column is set as `lastColumnFill` mode. @@ -596,7 +596,7 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} -![Name column is filled with remaining available space in flutter datagrid](images/autofit-columns/flutter-datagrid-fill-anycolumn.png) +![Name column is filled with remaining available space in Flutter Datagrid](images/autofit-columns/flutter-datagrid-fill-anycolumn.png) ## Recalculating column widths when datasource is changed diff --git a/Flutter/datagrid/editing.md b/Flutter/datagrid/editing.md index 42154a266..3554c8bc2 100644 --- a/Flutter/datagrid/editing.md +++ b/Flutter/datagrid/editing.md @@ -1,7 +1,7 @@ --- layout: post -title: Editing in Flutter DataGrid | Flutter DataTable | Syncfusion -description: Learn here all about how to perform editing in Syncfusion Flutter DataGrid (SfDataGrid) widget and more. +title: Editing in Flutter Datagrid | Flutter DataTable | Syncfusion +description: Learn here all about how to perform editing in Syncfusion Flutter Datagrid (SfDataGrid) widget and more. platform: flutter control: SfDataGrid documentation: ug @@ -175,7 +175,7 @@ class EmployeeDataSource extends DataGridSource { {% endhighlight %} {% endtabs %} -![flutter datagrid editing](images/editing/datagrid_editing.gif) +![Flutter Datagrid editing](images/editing/datagrid_editing.gif) >**NOTE** Download demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-perform-editing-in-flutter-datatable-sfdatagrid). @@ -239,7 +239,7 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} -![flutter datagrid disable the editing for specific column](images/editing/disable_editing.gif) +![Flutter Datagrid disable the editing for specific column](images/editing/disable_editing.gif) ## Entering edit mode @@ -499,7 +499,7 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} -![flutter datagrid begin edit](images/editing/begin_editing.gif) +![Flutter Datagrid begin edit](images/editing/begin_editing.gif) ### EndEdit diff --git a/Flutter/datagrid/styles.md b/Flutter/datagrid/styles.md index b7d787a73..0dc734a51 100644 --- a/Flutter/datagrid/styles.md +++ b/Flutter/datagrid/styles.md @@ -1,7 +1,7 @@ --- layout: post title: Styling feature in Flutter DataGrid | DataTable | Syncfusion -description: Learn here all about how to customize the appearance of DataGrid in Syncfusion Flutter DataGrid (SfDataGrid) widget and more. +description: Learn here all about how to customize the appearance of Syncfusion Flutter DataGrid (SfDataGrid) widget and more. platform: flutter control: SfDataGrid documentation: ug From 8424bb52f63bd78c050ab5fcad20bfa1a250e2c1 Mon Sep 17 00:00:00 2001 From: Jeffreysebastian <145664919+Jeffreysebastian@users.noreply.github.com> Date: Mon, 15 Apr 2024 12:58:27 +0530 Subject: [PATCH 2/4] Updated Changes --- Flutter/datagrid/columns-sizing.md | 12 ++++++------ Flutter/datagrid/editing.md | 8 ++++---- Flutter/datagrid/styles.md | 18 +++++++++--------- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/Flutter/datagrid/columns-sizing.md b/Flutter/datagrid/columns-sizing.md index 117a8aec5..77dafc8f3 100644 --- a/Flutter/datagrid/columns-sizing.md +++ b/Flutter/datagrid/columns-sizing.md @@ -89,7 +89,7 @@ Widget build(BuildContext context) { > **NOTE** The `GridColumn.columnWidthMode` takes higher priority than the `SfDataGrid.columnWidthMode`. -![columns filled based on view port size in Flutter Datagrid](images/autofit-columns/flutter-datagrid-fill-columns.png) +![columns filled based on view port size in Flutter DataGrid](images/autofit-columns/flutter-datagrid-fill-columns.png) ## Consider all the rows to calculate the autofit size @@ -241,7 +241,7 @@ class EmployeeDataSource extends DataGridSource { {% endhighlight %} {% endtabs %} -![Flutter Datagrid shows customization of padding in autofit calculation](images/autofit-columns/flutter-datagrid-autofitpadding-customization.png) +![Flutter DataGrid shows customization of padding in autofit calculation](images/autofit-columns/flutter-datagrid-autofitpadding-customization.png) ## Autofit calculation based on different TextStyle @@ -362,7 +362,7 @@ class CustomColumnSizer extends ColumnSizer { **NOTE** Download the demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-fit-the-column-based-on-the-different-text-style-in-Flutter-DataTable-sfdatagrid). -![Flutter Datagrid shows autofit the columns based on different text style](images/autofit-columns/flutter-datagrid-textstyle-customization.png) +![Flutter DataGrid shows autofit the columns based on different text style](images/autofit-columns/flutter-datagrid-textstyle-customization.png) ## Autofit calculation based on the formatted value @@ -482,7 +482,7 @@ class CustomColumnSizer extends ColumnSizer { **NOTE** Download the demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-fit-the-columns-based-on-the-formatted-value-in-Flutter-datatable-sfdatagrid). -![Flutter Datagrid shows autofit the columns based on formatted cell value](images/autofit-columns/flutter-datagrid-formatted-cellvalue.png) +![Flutter DataGrid shows autofit the columns based on formatted cell value](images/autofit-columns/flutter-datagrid-formatted-cellvalue.png) ## Fill the remaining width for any column @@ -540,7 +540,7 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} -![The last column is filled in view in Flutter Datagrid](images/autofit-columns/flutter-datagrid-fill-lastcolumn.png) +![The last column is filled in view in Flutter DataGrid](images/autofit-columns/flutter-datagrid-fill-lastcolumn.png) The below example shows Name column is set as `lastColumnFill` mode. @@ -596,7 +596,7 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} -![Name column is filled with remaining available space in Flutter Datagrid](images/autofit-columns/flutter-datagrid-fill-anycolumn.png) +![Name column is filled with remaining available space in Flutter DataGrid](images/autofit-columns/flutter-datagrid-fill-anycolumn.png) ## Recalculating column widths when datasource is changed diff --git a/Flutter/datagrid/editing.md b/Flutter/datagrid/editing.md index 3554c8bc2..82c220ce9 100644 --- a/Flutter/datagrid/editing.md +++ b/Flutter/datagrid/editing.md @@ -1,6 +1,6 @@ --- layout: post -title: Editing in Flutter Datagrid | Flutter DataTable | Syncfusion +title: Editing in Flutter DataGrid | Flutter DataTable | Syncfusion description: Learn here all about how to perform editing in Syncfusion Flutter Datagrid (SfDataGrid) widget and more. platform: flutter control: SfDataGrid @@ -175,7 +175,7 @@ class EmployeeDataSource extends DataGridSource { {% endhighlight %} {% endtabs %} -![Flutter Datagrid editing](images/editing/datagrid_editing.gif) +![Flutter DataGrid editing](images/editing/datagrid_editing.gif) >**NOTE** Download demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-perform-editing-in-flutter-datatable-sfdatagrid). @@ -239,7 +239,7 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} -![Flutter Datagrid disable the editing for specific column](images/editing/disable_editing.gif) +![Flutter DataGrid disable the editing for specific column](images/editing/disable_editing.gif) ## Entering edit mode @@ -499,7 +499,7 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} -![Flutter Datagrid begin edit](images/editing/begin_editing.gif) +![Flutter DataGrid begin edit](images/editing/begin_editing.gif) ### EndEdit diff --git a/Flutter/datagrid/styles.md b/Flutter/datagrid/styles.md index 0dc734a51..94ed87230 100644 --- a/Flutter/datagrid/styles.md +++ b/Flutter/datagrid/styles.md @@ -1,13 +1,13 @@ --- layout: post title: Styling feature in Flutter DataGrid | DataTable | Syncfusion -description: Learn here all about how to customize the appearance of Syncfusion Flutter DataGrid (SfDataGrid) widget and more. +description: Learn here all about how to customize the appearance of Syncfusion Flutter Datagrid (SfDataGrid) widget and more. platform: flutter control: SfDataGrid documentation: ug --- -# Styling in Flutter DataGrid (SfDataGrid) +# Styling in Flutter Datagrid (SfDataGrid) The DataGrid supports to change the appearance of the grid by using the [SfDataGridThemeData](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData-class.html) in [SfDataGridTheme](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridTheme-class.html). The DataGrid should be wrapped inside the `SfDataGridTheme`. @@ -74,7 +74,7 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} -![flutter datagrid header background color](images/styles/flutter-datagrid-column-header-styling.png) +![Flutter DataGrid header background color](images/styles/flutter-datagrid-column-header-styling.png) ## Change the header hover color @@ -131,7 +131,7 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} -![flutter datagrid header hovering](images/styles/flutter-datagrid-header-highlight.gif) +![Flutter DataGrid header hovering](images/styles/flutter-datagrid-header-highlight.gif) ## Change the row background color @@ -182,7 +182,7 @@ class EmployeeDataSource extends DataGridSource { {% endhighlight %} {% endtabs %} -![flutter datagrid row background color](images/styles/flutter-datagrid-rows-styling.png) +![Flutter DataGrid row background color](images/styles/flutter-datagrid-rows-styling.png) ## Styling grid lines @@ -240,7 +240,7 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} -![flutter datagrid shows customizing the grid lines](images/styles/flutter-datagrid-gridline-customization.png) +![Flutter DataGrid shows customizing the grid lines](images/styles/flutter-datagrid-gridline-customization.png) ## Show vertical and horizontal grid lines @@ -312,7 +312,7 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} -![flutter datagrid shows both grid lines](images/styles/flutter-datagrid-gridlines.png) +![Flutter DataGrid shows both grid lines](images/styles/flutter-datagrid-gridlines.png) ## Disable the row highlighting @@ -415,7 +415,7 @@ Widget build(BuildContext context) { {% endhighlight %} {% endtabs %} -![flutter datagrid highlight rows](images/styles/flutter-datagrid-highlight-rows.gif) +![Flutter DataGrid highlight rows](images/styles/flutter-datagrid-highlight-rows.gif) ## Change the cell value color @@ -471,4 +471,4 @@ class EmployeeDataSource extends DataGridSource { {% endhighlight %} {% endtabs %} -![flutter datagrid cell value color](images/styles/flutter-datagrid-cell-value-styling.png) \ No newline at end of file +![Flutter DataGrid cell value color](images/styles/flutter-datagrid-cell-value-styling.png) \ No newline at end of file From 1f315e93ab4f785544e5b9e65c46d1d957b4c25d Mon Sep 17 00:00:00 2001 From: Jeffreysebastian <145664919+Jeffreysebastian@users.noreply.github.com> Date: Mon, 15 Apr 2024 15:25:56 +0530 Subject: [PATCH 3/4] Updated Changes --- Flutter/datagrid/editing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Flutter/datagrid/editing.md b/Flutter/datagrid/editing.md index 82c220ce9..30650dd08 100644 --- a/Flutter/datagrid/editing.md +++ b/Flutter/datagrid/editing.md @@ -1,7 +1,7 @@ --- layout: post title: Editing in Flutter DataGrid | Flutter DataTable | Syncfusion -description: Learn here all about how to perform editing in Syncfusion Flutter Datagrid (SfDataGrid) widget and more. +description: Learn here all about how to perform editing in Syncfusion Flutter DataGrid (SfDataGrid) widget and more. platform: flutter control: SfDataGrid documentation: ug From aa899d178280dfa2423f5b509f5e611b81cb2311 Mon Sep 17 00:00:00 2001 From: Jeffreysebastian <145664919+Jeffreysebastian@users.noreply.github.com> Date: Tue, 16 Apr 2024 12:01:16 +0530 Subject: [PATCH 4/4] Updated Changes --- Flutter/datagrid/styles.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Flutter/datagrid/styles.md b/Flutter/datagrid/styles.md index 94ed87230..7d7e6facc 100644 --- a/Flutter/datagrid/styles.md +++ b/Flutter/datagrid/styles.md @@ -1,13 +1,13 @@ --- layout: post title: Styling feature in Flutter DataGrid | DataTable | Syncfusion -description: Learn here all about how to customize the appearance of Syncfusion Flutter Datagrid (SfDataGrid) widget and more. +description: Learn here all about how to customize the appearance of Syncfusion Flutter DataGrid (SfDataGrid) widget and more. platform: flutter control: SfDataGrid documentation: ug --- -# Styling in Flutter Datagrid (SfDataGrid) +# Styling in Flutter DataGrid (SfDataGrid) The DataGrid supports to change the appearance of the grid by using the [SfDataGridThemeData](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData-class.html) in [SfDataGridTheme](https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridTheme-class.html). The DataGrid should be wrapped inside the `SfDataGridTheme`.