syncfusion-content · SyncfusionBuild · Dec 16, 2021 · Nov 12, 2021 · Nov 13, 2021 · Nov 19, 2021
diff --git a/Flutter/DateRangePicker/selections.md b/Flutter/DateRangePicker/selections.md
@@ -139,6 +139,33 @@ Extend the selected range with the new selected date in any date range picker vi
 >**NOTE**
 * The hovering effect which occurs while extending the range will not be displayed when the `DateRangePickerNavigationMode` is set as `DateRangePickerNavigationMode.scroll`.
 
+## Extendable range selection Direction
+It allows to extend the selection direction by using the [extendableRangeSelectionDirection]() property of the DateRangePicker. 
+You can set the extendable range selection direction as forward, backward, both and none. 
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+        home: Scaffold(
+      body: SfDateRangePicker(
+        view: DateRangePickerView.month,
+        selectionMode: DateRangePickerSelectionMode.extendableRange,
+        extendableRangeSelectionDirection:
+            ExtendableRangeSelectionDirection.forward,
+      ),
+    ));
+  }
+
+{% endhighlight %}
+{% endtabs %}
+
+>**NOTE**
+* If it is set to none, it won't allow to extend the selection. It will remain in the initial range.
+* If it is set to forward direction, the start date will not be changed here.
+* If it is set to backward direction, the end date will not be changed here.
 
 ## Selection radius
 Customize the radius of the selection using the [selectionRadius](https://pub.dev/documentation/syncfusion_flutter_datepicker/latest/datepicker/SfDateRangePicker/selectionRadius.html) property of the `SfDateRangePicker`.

diff --git a/Flutter/Release-notes/v19.4.0.38.md b/Flutter/Release-notes/v19.4.0.38.md
@@ -0,0 +1,17 @@
+---
+title: Essential Studio for Flutter 2021 Volume 4 Main Release Notes  
+description: Essential Studio for Flutter 2021 Volume 4 Main Release Notes  
+platform: flutter
+documentation: ug
+---
+
+# Essential Studio for Flutter  Release Notes  
+
+{% include release-info.html date="December 17, 2021"  version="v19.4.0.38" %} 
+
+
+{% directory path: _includes/release-notes/v19.4.0.38 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
diff --git a/Flutter/calendar/callbacks.md b/Flutter/calendar/callbacks.md
@@ -76,6 +76,46 @@ Widget build(BuildContext context) {
 >**NOTE**
 * For recurrence appointment, the tap details will always return as `Appointment`, even for the custom business object.
 
+## Calendar details callback
+
+Return calendar details based on the given offset passed through argument by using the [getCalendarDetailsAtOffset]() method.
+
+`date` - returns the date based on the given offset.
+`appointments` - returns the appointments based on the given offset.
+`targetElement` - returns the calendar element based on the given offset.
+`resource` - returns the resource based on the given offset.
+
+{% tabs %}
+{% highlight Dart %}
+
+@override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+          body: MouseRegion(
+              onHover: (PointerHoverEvent event) {
+                CalendarDetails? details = _calendarController
+                    .getCalendarDetailsAtOffset!(event.localPosition);
+                if (details!.targetElement == CalendarElement.appointment) {
+                  dynamic appointments = details.appointments;
+                  final String subject =
+                      details.appointments![0].subject.toString();
+                  final dynamic startTime = details.appointments![0].startTime;
+                  final dynamic endTime = details.appointments![0].endTime;
+                }
+              },
+              child: SfCalendar(
+                view: CalendarView.month,
+                controller: _calendarController,
+                dataSource: _getCalendarDataSource(),
+              ))),
+    );
+  }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
 ## Long press callback
 The [onLongPress](https://pub.dev/documentation/syncfusion_flutter_calendar/latest/calendar/SfCalendar/onLongPress.html) callback is called, whenever the `SfCalendar` elements are long pressed on view.
 

diff --git a/Flutter/datagrid/images/paging/flutter_datapager_rowsperpage.gif b/Flutter/datagrid/images/paging/flutter_datapager_rowsperpage.gif
diff --git a/Flutter/datagrid/images/scrolling/flutter-datagrid-increase-row-cache-extent.gif b/Flutter/datagrid/images/scrolling/flutter-datagrid-increase-row-cache-extent.gif
diff --git a/Flutter/datagrid/images/swiping/flutter-datagrid-individual-swiping.gif b/Flutter/datagrid/images/swiping/flutter-datagrid-individual-swiping.gif
diff --git a/Flutter/datagrid/paging.md b/Flutter/datagrid/paging.md
@@ -436,6 +436,133 @@ Widget build(BuildContext context) {
 {% endhighlight %}
 {% endtabs %}
 
+## Show dropdown button to choose rows per page
+
+Show the dropdown button option to select a different number of rows per page by defining the `onRowPerPageChanged` callback. If it is null, no option will be provided to select different number of rows per page.
+
+You can use `availableRowsPerPage` property to define the list of numbers to be displayed in drop-down. The default value of `availableRowsPerPage` property is [10,15,20].
+
+>**NOTE** 
+  You can view dropdown button option by horizontally scrolling the DataPager. The dropdown button option is not supported, if the [direction](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager/direction.html) is vertical.
+
+{% tabs %}
+{% highlight Dart %}
+
+  int _rowsPerPage=10;
+  List<Employee> employees = <Employee>[];
+  late EmployeeDataSource employeeDataSource;
+  double datapagerHeight = 70.0;
+
+  @override
+  void initState() {
+    super.initState();
+    employees = getEmployeeData();
+    employeeDataSource = EmployeeDataSource(employeeData: employees);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        appBar: AppBar(
+          title: const Text('Syncfusion Flutter DataGrid'),
+        ),
+        body: LayoutBuilder(
+            builder: (BuildContext context, BoxConstraints constraints) {
+          return Column(
+            children: [
+              Container(
+                height: constraints.maxHeight - datapagerHeight,
+                child: SfDataGrid(
+                    source: employeeDataSource,
+                    columnWidthMode: ColumnWidthMode.fill,
+                    columns: _column),
+              ),
+              Container(
+                  height: datapagerHeight,
+                  child: SfDataPager(
+                    delegate: employeeDataSource,
+                    availableRowsPerPage: [10, 20, 30],
+                    onRowsPerPageChanged: (int? rowsPerPage) {
+                      setState(() {
+                        _rowsPerPage = rowsPerPage!;
+                        employeeDataSource.updateDataGriDataSource();
+                      });
+                    },
+                    pageCount:
+                        ((employees.length / _rowsPerPage).ceil()).toDouble(),
+                  )),
+            ],
+          );
+        }));
+  }
+
+  class EmployeeDataSource extends DataGridSource {
+  /// Creates the employee data source class with required details.
+  EmployeeDataSource({required List<Employee> employeeData}) {
+    _employeeData = employeeData;
+    _paginatedRows = employeeData;
+    buildDataGridRow();
+  }
+
+  void buildDataGridRow() {
+    _employeeDataGridRows = _paginatedRows
+        .map<DataGridRow>((e) => DataGridRow(cells: [
+              DataGridCell<int>(columnName: 'id', value: e.id),
+              DataGridCell<String>(columnName: 'name', value: e.name),
+              DataGridCell<String>(
+                  columnName: 'designation', value: e.designation),
+              DataGridCell<int>(columnName: 'salary', value: e.salary),
+            ]))
+        .toList();
+  }
+
+  List<DataGridRow> _employeeDataGridRows = [];
+  List<Employee> _paginatedRows = [];
+  List<Employee> _employeeData = [];
+
+  @override
+  List<DataGridRow> get rows => _employeeDataGridRows;
+
+  @override
+  DataGridRowAdapter buildRow(DataGridRow row) {
+    return DataGridRowAdapter(
+        cells: row.getCells().map<Widget>((e) {
+      return Container(
+        alignment: Alignment.center,
+        padding: EdgeInsets.all(8.0),
+        child: Text(e.value.toString()),
+      );
+    }).toList());
+  }
+
+  @override
+  Future<bool> handlePageChange(int oldPageIndex, int newPageIndex) {
+    final int _startIndex = newPageIndex * _rowsPerPage;
+    int _endIndex = _startIndex + _rowsPerPage;
+    if (_endIndex > _employeeData.length) {
+      _endIndex = _employeeData.length;
+    }
+
+    /// Get particular range from the sorted collection.
+    if (_startIndex < _employeeData.length &&
+        _endIndex <= _employeeData.length) {
+      _paginatedRows = _employeeData.getRange(_startIndex, _endIndex).toList();
+    } else {
+      _paginatedRows = <Employee>[];
+    }
+    buildDataGridRow();
+    notifyListeners();
+    return Future<bool>.value(true);
+  }
+
+  void updateDataGriDataSource() {
+    notifyListeners();
+  }
+  }
+{% endhighlight %}
+{% endtabs %}
+
+![flutter datapager with rowsperpage](images/paging/flutter_datapager_rowsperpage.gif)
 
 ## Orientation
 

diff --git a/Flutter/datagrid/scrolling.md b/Flutter/datagrid/scrolling.md
@@ -686,4 +686,139 @@ class _EmployeeDataSource extends DataGridSource {
 {% endtabs %}
 
 **NOTE**  
-  Download demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-load-data-lazily-when-scrolling-reaches-70-in-flutter-datatable-sfdatagrid).
+  Download demo application from [GitHub](https://github.com/SyncfusionExamples/how-to-load-data-lazily-when-scrolling-reaches-70-in-flutter-datatable-sfdatagrid).
+
+## Increase row cache limit
+
+By default, rows are generated based on the view port size and these rows are reused while scrolling. You can set the `SfDataGrid.rowsCacheExtent` property to avoid the visible changes caused by re-using. For example, if you show the checkbox in a column without setting the rows using this property, checkbox state changes with animation can be seen when vertical scrolling is performed.
+
+The `rowsCacheExtent` property will create the additional rows internally with the existing visible rows, which are already allocated based on view port size. So, the number of rows that will be reused will increase.
+
+{% tabs %}
+{% highlight Dart %}
+
+  List<Employee> employees = <Employee>[];
+  late EmployeeDataSource employeeDataSource;
+
+  @override
+  void initState() {
+    super.initState();
+    employees = getEmployeeData();
+    employeeDataSource = EmployeeDataSource(employeeData: employees);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Syncfusion Flutter DataGrid'),
+      ),
+      body: SfDataGrid(
+        source: employeeDataSource,
+        columnWidthMode: ColumnWidthMode.fill,
+        showCheckboxColumn: true,
+        selectionMode: SelectionMode.multiple,
+        rowsCacheExtent: 10,
+        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'))),
+        ],
+      ),
+    );
+  }
+
+{% endhighlight %}
+{% endtabs %}
+
+![Flutter DataTable shows increase row cache extent](images/scrolling/flutter-datagrid-increase-row-cache-extent.gif)
+
+## Set height and width of DataGrid based on rows and columns available
+
+If the height or width of the DataGrid is infinity, then DataGrid sets its height or width to 300 by default. Users can set the height or width based on the number of rows or columns available in DataGrid by using the `shrinkWrapRows` or `shrinkWrapColumns` property, respectively.
+
+>**NOTE**
+       Shrink wrapping is significantly more expensive than setting the height and width manually.
+
+{% tabs %}
+{% highlight Dart %} 
+
+import 'package:syncfusion_flutter_datagrid/datagrid.dart';
+
+late EmployeeDataSource _employeeDataSource;
+
+ @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(builder: (context, constraints) {
+      return SingleChildScrollView(
+        child: SfDataGrid(
+          shrinkWrapColumns: true,
+          shrinkWrapRows: true,
+          source: _employeeDataSource,
+          columns: <GridColumn>[
+            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: 'designation',
+                label: Container(
+                    padding: EdgeInsets.symmetric(horizontal: 16.0),
+                    alignment: Alignment.centerLeft,
+                    child: Text(
+                      'Designation',
+                      overflow: TextOverflow.ellipsis,
+                    ))),
+            GridColumn(
+                columnName: 'salary',
+                label: Container(
+                    padding: EdgeInsets.symmetric(horizontal: 16.0),
+                    alignment: Alignment.centerRight,
+                    child: Text(
+                      'Salary',
+                      overflow: TextOverflow.ellipsis,
+                    ))),
+          ],
+        ),
+      );
+    });
+  }
+
+{% endhighlight %}
+{% endtabs %}
+