FLUT-871331 - [Others] New Feature Documentation

Flutter/datagrid/column-types.md

@@ -556,6 +556,73 @@ Widget build(BuildContext context) {
 
 ![flutter datagrid checkbox shape](images/column-types/flutter-datagrid-checkbox-shape.png)
 
+### Callbacks
+
+The `SfDataGrid` provides the following callback for checkbox interactions:
+
+* [onCheckboxValueChanged]() : This callback is triggered when the checkbox is selected or deselected, either by tapping on the checkbox or by selecting or deselecting a row (i.e., when the value of the checkbox changes).
+
+The checkbox callbacks provide the following properties in their arguments:
+
+* [value]() : Represents the current state of the checkbox.
+* [row]() : Refers to the DataGridRow linked to the checkbox in the checkbox column. If the checkbox is part of a column header, the value will be null, indicating that it is not linked to any specific data row.
+* [rowType]() : Defines the type of row associated with the checkbox. It indicates whether the checkbox value in a data row or header row has been modified.
+
+{% tabs %}
+{% highlight Dart %} 
+
+@override  
+Widget build(BuildContext context) {  
+  return Scaffold(  
+    appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')),  
+    body: SfDataGrid(  
+      source: employeeDataSource,  
+      showCheckboxColumn: true,  
+      onCheckboxValueChanged: (details) {  
+        print(details);  
+      },  
+      selectionMode: SelectionMode.multiple,  
+      columns: [  
+        GridColumn(  
+          columnName: 'ID',  
+          label: Container(  
+            padding: const EdgeInsets.symmetric(horizontal: 8.0),  
+            alignment: Alignment.center,  
+            child: const Text('ID'),  
+          ),  
+        ),  
+        GridColumn(  
+          columnName: 'Name',  
+          label: Container(  
+            padding: const EdgeInsets.symmetric(horizontal: 8.0),  
+            alignment: Alignment.center,  
+            child: const Text('Name'),  
+          ),  
+        ),  
+        GridColumn(  
+          columnName: 'Designation',  
+          label: Container(  
+            padding: const EdgeInsets.symmetric(horizontal: 8.0),  
+            alignment: Alignment.center,  
+            child: const Text('Designation'),  
+          ),  
+        ),  
+        GridColumn(  
+          columnName: 'Salary',  
+          label: Container(  
+            padding: const EdgeInsets.symmetric(horizontal: 8.0),  
+            alignment: Alignment.center,  
+            child: const Text('Salary'),  
+          ),  
+        ),  
+      ],  
+    ),  
+  );  
+}
+
+{% endhighlight %}
+{% endtabs %}
+
 ### Limitations
 
 The following are the limitations of GridCheckboxColumn:

Flutter/datagrid/placeholder.md

@@ -0,0 +1,87 @@
+---
+layout: post
+title: Placeholder in Flutter DataGrid | DataTable | Syncfusion
+description: Learn here all about how to add a placeholder to the Syncfusion Flutter DataGrid (SfDataGrid) control and more.
+platform: flutter
+control: SfDataGrid
+documentation: ug
+---
+
+# Placeholder in Flutter Datagrid (SfDataGrid)
+
+The `SfDataGrid` provides built-in support for displaying a placeholder when the data source is empty by setting the [SfDataGrid.placeholder]() property. When the `SfDataGrid.placeholder` is set, the DataGrid automatically shows the specified widget in the scroll view area. By default, the `SfDataGrid` does not display anything when the data source is empty.
+
+The following example shows how to add a `placeholder` in SfDataGrid:
+
+{% tabs %}
+{% highlight Dart %} 
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    appBar: AppBar(
+      title: const Text('Syncfusion Flutter DataGrid'),
+    ),
+    body: SfDataGrid(
+      source: employeeDataSource,
+      columnWidthMode: ColumnWidthMode.auto,
+      columns: <GridColumn>[
+        GridColumn(
+          columnName: 'id',
+          label: Container(
+            padding: EdgeInsets.all(16.0),
+            alignment: Alignment.center,
+            child: Text('ID'),
+          ),
+        ),
+        GridColumn(
+          columnName: 'name',
+          label: Container(
+            padding: EdgeInsets.all(8.0),
+            alignment: Alignment.center,
+            child: Text('Name'),
+          ),
+        ),
+        GridColumn(
+          columnName: 'designation',
+          label: Container(
+            padding: EdgeInsets.all(8.0),
+            alignment: Alignment.center,
+            child: Text(
+              'Designation',
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+        ),
+        GridColumn(
+          columnName: 'salary',
+          label: Container(
+            padding: EdgeInsets.all(8.0),
+            alignment: Alignment.center,
+            child: Text('Salary'),
+          ),
+        ),
+      ],
+      placeholder: Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Icon(Icons.thumb_down_alt_outlined, size: 30),
+            SizedBox(height: 8),
+            Text(
+              'No Records Found',
+              style: TextStyle(fontSize: 16),
+            ),
+          ],
+        ),
+      ),
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+<img alt="Flutter DataGrid displays a placeholder when there are no rows" src="images/placeholder/flutter-datagrid-placeholder.png" width="404" height="396"/>
+
+

Flutter/datagrid/sorting.md

@@ -284,6 +284,95 @@ Widget build(BuildContext context) {
 {% endhighlight %}
 {% endtabs %}
 
+### Callbacks
+
+The `SfDataGrid` provides the following callbacks for sorting:
+
+* [onColumnSortChanging]() : This callback is invoked when a column is being sorted in `SfDataGrid`. If the callback returns `true`, the `SfDataGrid` will proceed with the sorting; if it returns `false`, the sort operation will be canceled.
+
+* [onColumnSortChanged]() : This callback is invoked when a column is sorted in `SfDataGrid`.
+
+The followings are the parameters of the [SfDataGrid.onColumnSortChanging]() and [SfDataGrid.onColumnSortChanged]() callbacks:
+
+* newSortedColumn: Retrieves the `SortColumnDetails` that is going to sort a column.
+
+* oldSortedColumn: Retrieves the `SortColumnDetails` that is removed from a column.
+
+The following example demonstrates how to use the `SfDataGrid.onColumnSortChanging` and `SfDataGrid.onColumnSortChanged` callbacks to sort a column and retrieve sorting details:
+
+{% tabs %}
+{% highlight Dart %} 
+
+import 'package:syncfusion_flutter_datagrid/datagrid.dart';
+
+@override
+Widget build(BuildContext context) {
+  return Scaffold(
+    body: SfDataGrid(
+      source: _employeeDataSource,
+      allowSorting: true,
+      onColumnSortChanging: (newSortedColumn, oldSortedColumn) {
+        print(newSortedColumn);
+        print(oldSortedColumn);
+        return true;
+      },
+      onColumnSortChanged: (newSortedColumn, oldSortedColumn) {
+        print(newSortedColumn);
+        print(oldSortedColumn);
+      },
+      columns: [
+        GridColumn(
+          columnName: 'id',
+          label: Container(
+            padding: EdgeInsets.symmetric(horizontal: 16.0),
+            alignment: Alignment.centerRight,
+            child: Text(
+              'ID',
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+        ),
+        GridColumn(
+          columnName: 'name',
+          label: Container(
+            padding: EdgeInsets.symmetric(horizontal: 16.0),
+            alignment: Alignment.centerLeft,
+            child: Text(
+              'Name',
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+        ),
+        GridColumn(
+          columnName: 'city',
+          label: Container(
+            padding: EdgeInsets.symmetric(horizontal: 16.0),
+            alignment: Alignment.centerLeft,
+            child: Text(
+              'City',
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+        ),
+        GridColumn(
+          columnName: 'freight',
+          label: Container(
+            padding: EdgeInsets.symmetric(horizontal: 16.0),
+            alignment: Alignment.centerRight,
+            child: Text(
+              'Freight',
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+        ),
+      ],
+    ),
+  );
+}
+
+{% endhighlight %}
+{% endtabs %}
+
 ## Show sort number
 
 The Datagrid provides support for the sequence numbers to display the sorted columns during multi-column sorting by setting [SfDataGrid.showSortNumbers](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/showSortNumbers.html) to true. This is applicable when the `SfDataGrid.allowMultiColumnSorting` property is enabled.

flutter-toc.html

@@ -314,6 +314,7 @@
             <li><a href="/Flutter/datagrid/conditional-styling">Conditional Styling</a></li>
             <li><a href="/Flutter/datagrid/columns-resizing">Columns Resizing</a></li>
             <li><a href="/Flutter/datagrid/footer">Footer</a></li>
+            <li><a href="/Flutter/datagrid/placeholder">Placeholder</a></li>
             <li><a href="/Flutter/datagrid/load-more">Load More</a></li>
             <li><a href="/Flutter/datagrid/pull-to-refresh">Pull To Refresh</a></li>
             <li><a href="/Flutter/datagrid/column-drag-and-drop">Column Drag and Drop</a></li>
@@ -651,4 +652,4 @@
    </li>
 
 
-</ul>
+</ul>