Latest source merged from Syncfusion

This commit is contained in:
pipeline 2021-09-09 20:56:45 -07:00
Родитель 8a270776ae
Коммит 12e6cc03e8
23 изменённых файлов: 3962 добавлений и 4541 удалений

Просмотреть файл

@ -43,9 +43,7 @@ import 'package:syncfusion_flutter_datagrid/datagrid.dart';
Widget build(BuildContext context) {
return MediaQuery(
data: MediaQueryData(textScaleFactor: 1.5),
child: SfDataGrid(
source: employeeDataSource,
columns: <GridColumn>[
child: SfDataGrid(source: _employeeDataSource, columns: <GridColumn>[
GridColumn(
columnName: 'id',
label: Container(
@ -54,9 +52,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -65,21 +61,16 @@ Widget build(BuildContext context) {
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'salary',
visible: false,
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
label: Container(
@ -88,12 +79,8 @@ Widget build(BuildContext context) {
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
);
)))
]));
}
{% endhighlight %}
@ -110,15 +97,14 @@ The row heights in `SfDataGrid` will be automatically adjusted based on the [vis
{% tabs %}
{% highlight Dart %}
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
@override
Widget build(BuildContext context) {
return Theme(
data: ThemeData(visualDensity: VisualDensity.compact),
child: SfDataGrid(
source: employeeDataSource,
columns: <GridColumn>[
child: SfDataGrid(source: _employeeDataSource, columns: <GridColumn>[
GridColumn(
columnName: 'id',
label: Container(
@ -127,9 +113,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -138,21 +122,16 @@ Widget build(BuildContext context) {
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'salary',
visible: false,
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
label: Container(
@ -161,12 +140,8 @@ Widget build(BuildContext context) {
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
);
)))
]));
}
{% endhighlight %}

Просмотреть файл

@ -25,9 +25,7 @@ Column can be bound to a property in data object using [GridColumn.columnName](h
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfDataGrid(
source: _employeeDataSource,
columns: <GridColumn>[
body: SfDataGrid(source: _employeeDataSource, columns: <GridColumn>[
GridColumn(
columnName: 'id',
label: Container(
@ -36,9 +34,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -47,20 +43,7 @@ Widget build(BuildContext context) {
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
GridColumn(
columnName: 'salary',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
label: Container(
@ -69,12 +52,17 @@ Widget build(BuildContext context) {
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 %}
@ -93,9 +81,7 @@ Widget build(BuildContext context) {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfDataGrid(
source: _employeeDataSource,
columns: <GridColumn>[
body: SfDataGrid(source: _employeeDataSource, columns: <GridColumn>[
GridColumn(
columnName: 'id',
label: Container(
@ -104,9 +90,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -115,35 +99,27 @@ Widget build(BuildContext context) {
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
GridColumn(
columnName: 'salary',
visible: false,
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
visible: false,
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 %}
@ -162,9 +138,7 @@ Widget build(BuildContext context) {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfDataGrid(
source: _employeeDataSource,
columns: <GridColumn>[
body: SfDataGrid(source: _employeeDataSource, columns: <GridColumn>[
GridColumn(
columnName: 'id',
label: Container(
@ -173,9 +147,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
width: 100.0,
@ -185,20 +157,7 @@ Widget build(BuildContext context) {
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
GridColumn(
columnName: 'salary',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
label: Container(
@ -207,12 +166,17 @@ Widget build(BuildContext context) {
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 %}

Просмотреть файл

@ -43,9 +43,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -54,9 +52,7 @@ Widget build(BuildContext context) {
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
label: Container(
@ -65,9 +61,7 @@ Widget build(BuildContext context) {
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'city',
label: Container(
@ -76,9 +70,7 @@ Widget build(BuildContext context) {
child: Text(
'city',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'salary',
label: Container(
@ -87,12 +79,8 @@ Widget build(BuildContext context) {
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
);
)))
]));
}
{% endhighlight %}
@ -125,9 +113,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
softWrap: false,
),
),
),
))),
GridColumn(
columnName: 'Name',
label: Container(
@ -136,9 +122,7 @@ Widget build(BuildContext context) {
child: Text(
'Name',
softWrap: false,
),
),
),
))),
GridColumn(
columnName: 'Designation',
label: Container(
@ -147,9 +131,7 @@ Widget build(BuildContext context) {
child: Text(
'Designation',
softWrap: false,
),
),
),
))),
GridColumn(
columnName: 'Salary',
label: Container(
@ -158,11 +140,8 @@ Widget build(BuildContext context) {
child: Text(
'Salary',
softWrap: false,
),
),
),
],
);
)))
]);
}
{% endhighlight %}
@ -185,7 +164,7 @@ Widget build(BuildContext context) {
columnWidthMode: ColumnWidthMode.auto,
columns: <GridColumn>[
GridColumn(
columnName: 'ID',
columnName: 'id',
autoFitPadding: EdgeInsets.all(10.0),
label: Container(
padding: EdgeInsets.all(10.0),
@ -193,11 +172,9 @@ Widget build(BuildContext context) {
child: Text(
'ID',
softWrap: false,
),
),
),
))),
GridColumn(
columnName: 'Name',
columnName: 'name',
autoFitPadding: EdgeInsets.all(10.0),
label: Container(
padding: EdgeInsets.all(10.0),
@ -205,11 +182,9 @@ Widget build(BuildContext context) {
child: Text(
'Name',
softWrap: false,
),
),
),
))),
GridColumn(
columnName: 'Designation',
columnName: 'designation',
autoFitPadding: EdgeInsets.all(10.0),
label: Container(
padding: EdgeInsets.all(10.0),
@ -217,11 +192,9 @@ Widget build(BuildContext context) {
child: Text(
'Designation',
softWrap: false,
),
),
),
))),
GridColumn(
columnName: 'Salary',
columnName: 'salary',
autoFitPadding: EdgeInsets.all(10.0),
label: Container(
padding: EdgeInsets.all(10.0),
@ -229,11 +202,8 @@ Widget build(BuildContext context) {
child: Text(
'Salary',
softWrap: false,
),
),
),
],
);
)))
]);
}
class EmployeeDataSource extends DataGridSource {
@ -304,12 +274,11 @@ Widget build(BuildContext context) {
label: Container(
padding: EdgeInsets.all(12.0),
alignment: Alignment.center,
child: Text('Name',
child: Text(
'Name',
style: TextStyle(
fontWeight: FontWeight.bold,
fontWeight: FontWeight.bold,
fontWeight: FontWeight.bold,
fontStyle: FontStyle.italic)))),
fontWeight: FontWeight.bold, fontStyle: FontStyle.italic),
))),
GridColumn(
columnName: 'Designation',
autoFitPadding: EdgeInsets.all(12.0),
@ -329,8 +298,7 @@ Widget build(BuildContext context) {
padding: EdgeInsets.all(12.0),
alignment: Alignment.center,
child: Text('Salary'))),
],
);
]);
}
class EmployeeDataSource extends DataGridSource {
@ -362,8 +330,7 @@ class EmployeeDataSource extends DataGridSource {
style: (e.columnName == 'Name' || e.columnName == 'Designation')
? TextStyle(
fontWeight: FontWeight.bold, fontStyle: FontStyle.italic)
: null),
);
: null));
}).toList());
}
}
@ -404,6 +371,8 @@ By default, the cell width is calculated based on the `DataGridCell.value` prope
{% tabs %}
{% highlight Dart %}
import 'package:intl/intl.dart';
final CustomColumnSizer _customColumnSizer = CustomColumnSizer();
@override
@ -421,9 +390,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
softWrap: false,
),
),
),
))),
GridColumn(
columnName: 'Name',
label: Container(
@ -432,9 +399,7 @@ Widget build(BuildContext context) {
child: Text(
'Name',
softWrap: false,
),
),
),
))),
GridColumn(
columnName: 'DOB',
label: Container(
@ -443,9 +408,7 @@ Widget build(BuildContext context) {
child: Text(
'DOB',
softWrap: false,
),
),
),
))),
GridColumn(
columnName: 'Salary',
label: Container(
@ -454,11 +417,8 @@ Widget build(BuildContext context) {
child: Text(
'Salary',
softWrap: false,
),
),
),
],
);
)))
]);
}
class EmployeeDataSource extends DataGridSource {
@ -486,7 +446,8 @@ class EmployeeDataSource extends DataGridSource {
if (e.columnName == 'DOB') {
cellValue = DateFormat.yMMMMd('en_US').format(e.value);
} else if (e.columnName == 'Salary') {
cellValue = NumberFormat.simpleCurrency(decimalDigits: 0).format(e.value);
cellValue =
NumberFormat.simpleCurrency(decimalDigits: 0).format(e.value);
} else {
cellValue = e.value.toString();
}
@ -507,7 +468,8 @@ class CustomColumnSizer extends ColumnSizer {
if (column.columnName == 'DOB') {
cellValue = DateFormat.yMMMMd('en_US').format(cellValue as DateTime);
} else if (column.columnName == 'Salary') {
cellValue = NumberFormat.simpleCurrency(decimalDigits: 0).format(cellValue);
cellValue =
NumberFormat.simpleCurrency(decimalDigits: 0).format(cellValue);
}
return super.computeCellWidth(column, row, cellValue, textStyle);
@ -544,9 +506,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -555,9 +515,7 @@ Widget build(BuildContext context) {
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'salary',
label: Container(
@ -566,9 +524,7 @@ Widget build(BuildContext context) {
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
label: Container(
@ -577,12 +533,8 @@ Widget build(BuildContext context) {
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
);
)))
]));
}
{% endhighlight %}
@ -609,32 +561,26 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
columnWidthMode: ColumnWidthMode.lastColumnFill,
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'salary',
columnWidthMode: ColumnWidthMode.lastColumnFill,
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
label: Container(
@ -643,12 +589,8 @@ Widget build(BuildContext context) {
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
);
)))
]));
}
{% endhighlight %}
@ -666,15 +608,15 @@ Returning true may impact performance as the column widths are recalculated agai
{% highlight Dart %}
class EmployeeDataSource extends DataGridSource {
EmployeeDataSource(List<Employee> employees) {
EmployeeDataSource({required List<Employee> employees}) {
dataGridRows = employees
.map<DataGridRow>((dataGridRow) => DataGridRow(cells: [
DataGridCell<int>(columnName: 'id', value: dataGridRow.id),
DataGridCell<String>(columnName: 'name', value: dataGridRow.name),
DataGridCell<int>(
columnName: 'salary', value: dataGridRow.salary),
DataGridCell<String>(
columnName: 'designation', value: dataGridRow.designation),
DataGridCell<int>(
columnName: 'salary', value: dataGridRow.salary),
]))
.toList();
}

Просмотреть файл

@ -37,9 +37,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -48,9 +46,7 @@ Widget build(BuildContext context) {
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
label: Container(
@ -59,9 +55,7 @@ Widget build(BuildContext context) {
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'salary',
label: Container(
@ -70,12 +64,8 @@ Widget build(BuildContext context) {
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
);
)))
]));
}
class EmployeeDataSource extends DataGridSource {

Просмотреть файл

@ -264,8 +264,7 @@ Widget build(BuildContext context) {
appBar: AppBar(
title: const Text('Syncfusion Flutter DataGrid'),
),
body: Column(
children: [
body: Column(children: [
TextButton(
child: const Text('Update cell value'),
onPressed: () {
@ -282,9 +281,7 @@ Widget build(BuildContext context) {
_employeeDataSource.updateDataGridSource(
rowColumnIndex: RowColumnIndex(0, 3));
}),
SfDataGrid(
source: _employeeDataSource,
columns: <GridColumn>[
SfDataGrid(source: _employeeDataSource, columns: <GridColumn>[
GridColumn(
columnName: 'id',
label: Container(
@ -293,9 +290,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -304,9 +299,7 @@ Widget build(BuildContext context) {
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
label: Container(
@ -315,9 +308,7 @@ Widget build(BuildContext context) {
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'salary',
label: Container(
@ -326,14 +317,9 @@ Widget build(BuildContext context) {
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
],
),
);
)))
])
]));
}
class EmployeeDataSource extends DataGridSource {

Просмотреть файл

@ -44,9 +44,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -55,9 +53,7 @@ Widget build(BuildContext context) {
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
label: Container(
@ -66,9 +62,7 @@ Widget build(BuildContext context) {
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'salary',
label: Container(
@ -77,12 +71,8 @@ Widget build(BuildContext context) {
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
);
))),
]));
}
class EmployeeDataSource extends DataGridSource {
@ -151,8 +141,7 @@ class EmployeeDataSource extends DataGridSource {
return Container(
padding: const EdgeInsets.all(8.0),
alignment:
isNumericType ? Alignment.centerRight : Alignment.centerLeft,
alignment: isNumericType ? Alignment.centerRight : Alignment.centerLeft,
child: TextField(
autofocus: true,
controller: editingController..text = displayText,
@ -160,8 +149,7 @@ class EmployeeDataSource extends DataGridSource {
decoration: InputDecoration(
contentPadding: const EdgeInsets.fromLTRB(0, 0, 0, 16.0),
),
keyboardType:
isNumericType ? TextInputType.number : TextInputType.text,
keyboardType: isNumericType ? TextInputType.number : TextInputType.text,
onChanged: (String value) {
if (value.isNotEmpty) {
if (isNumericType) {
@ -215,9 +203,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -226,9 +212,7 @@ Widget build(BuildContext context) {
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
label: Container(
@ -237,9 +221,7 @@ Widget build(BuildContext context) {
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'salary',
label: Container(
@ -248,12 +230,8 @@ Widget build(BuildContext context) {
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
);
)))
]));
}
{% endhighlight %}
@ -284,9 +262,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -295,9 +271,7 @@ Widget build(BuildContext context) {
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
label: Container(
@ -306,9 +280,7 @@ Widget build(BuildContext context) {
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'salary',
label: Container(
@ -317,12 +289,8 @@ Widget build(BuildContext context) {
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
);
)))
]));
}
{% endhighlight %}
@ -343,8 +311,8 @@ The [DataGridSource.onCellBeginEdit](https://pub.dev/documentation/syncfusion_fl
class EmployeeDataSource extends DataGridSource {
@override
bool onCellBeginEdit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex,
GridColumn column) {
bool onCellBeginEdit(
DataGridRow dataGridRow, RowColumnIndex rowColumnIndex, GridColumn column) {
if (column.columnName == 'id') {
// Return false, to restrict entering into the editing.
return false;
@ -396,7 +364,6 @@ The [DataGridSource.onCellSubmit](https://pub.dev/documentation/syncfusion_flutt
{% highlight dart %}
class EmployeeDataSource extends DataGridSource {
@override
void onCellSubmit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex,
GridColumn column) {
@ -448,7 +415,8 @@ The [DataGridSource.onCellCancelEdit](https://pub.dev/documentation/syncfusion_f
class EmployeeDataSource extends DataGridSource {
@override
void onCellCancelEdit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex, GridColumn column) {
void onCellCancelEdit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex,
GridColumn column) {
// handle the cancel editing code here
}
}
@ -470,14 +438,12 @@ final DataGridController _dataGridController = DataGridController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
body: Column(children: [
TextButton(
child: Text("Begin Edit"),
onPressed: () {
_dataGridController.beginEdit(RowColumnIndex(2, 3));
},
),
}),
Expanded(
child: SfDataGrid(
source: _employeeDataSource,
@ -494,9 +460,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -505,9 +469,7 @@ Widget build(BuildContext context) {
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
label: Container(
@ -516,9 +478,7 @@ Widget build(BuildContext context) {
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'salary',
label: Container(
@ -527,15 +487,9 @@ Widget build(BuildContext context) {
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
),
],
),
);
)))
]))
]));
}
{% endhighlight %}
@ -553,14 +507,12 @@ final DataGridController _dataGridControlle r = DataGridController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
body: Column(children: [
TextButton(
child: Text("End Edit"),
onPressed: () {
_dataGridController.endEdit();
},
),
}),
Expanded(
child: SfDataGrid(
source: _employeeDataSource,
@ -577,9 +529,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -588,9 +538,7 @@ Widget build(BuildContext context) {
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
label: Container(
@ -599,9 +547,7 @@ Widget build(BuildContext context) {
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'salary',
label: Container(
@ -610,15 +556,9 @@ Widget build(BuildContext context) {
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
),
],
),
);
)))
]))
]));
}
{% endhighlight %}
@ -640,7 +580,7 @@ class EmployeeDataSource extends DataGridSource {
if (rowColumnIndex.equals(RowColumnIndex(2, 2))) {
return false;
} else {
return false;
return true;
}
}
}

Просмотреть файл

@ -24,9 +24,7 @@ Widget build(BuildContext context) {
child: Text(
'FOOTER VIEW',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
),
))),
columns: <GridColumn>[
GridColumn(
columnName: 'id',
@ -57,8 +55,7 @@ Widget build(BuildContext context) {
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text('Salary'))),
],
);
]);
}
{% endhighlight %}
@ -84,9 +81,7 @@ Widget build(BuildContext context) {
child: Text(
'FOOTER VIEW',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
),
))),
columns: <GridColumn>[
GridColumn(
columnName: 'id',
@ -117,8 +112,7 @@ Widget build(BuildContext context) {
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text('Salary'))),
],
);
]);
}
{% endhighlight %}
@ -139,13 +133,12 @@ Widget build(BuildContext context) {
source: _employeeDataSource,
footerFrozenRowsCount: 1,
footer: Container(
color: Colors.grey[400],
child: Center(
child: Text(
'FOOTER VIEW',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
),
))),
columns: <GridColumn>[
GridColumn(
columnName: 'id',
@ -176,8 +169,7 @@ Widget build(BuildContext context) {
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text('Salary'))),
],
);
]);
}
{% endhighlight %}

Просмотреть файл

@ -63,7 +63,7 @@ The following code example shows how to freeze a column at left using `frozenCol
Widget build(BuildContext context) {
return Scaffold(
body: SfDataGrid(
source: _employeeDataSource,
source: _orderDataGridSource,
frozenColumnsCount: 1,
columns: <GridColumn>[
GridColumn(
@ -74,9 +74,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'productId',
label: Container(
@ -85,9 +83,7 @@ Widget build(BuildContext context) {
child: Text(
'Product ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -96,9 +92,7 @@ Widget build(BuildContext context) {
child: Text(
'Customer Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'product',
label: Container(
@ -107,9 +101,7 @@ Widget build(BuildContext context) {
child: Text(
'Product',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'orderDate',
label: Container(
@ -118,9 +110,7 @@ Widget build(BuildContext context) {
child: Text(
'Order Date',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'quantity',
label: Container(
@ -129,9 +119,7 @@ Widget build(BuildContext context) {
child: Text(
'Quantity',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'city',
label: Container(
@ -140,9 +128,7 @@ Widget build(BuildContext context) {
child: Text(
'City',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'unitPrice',
label: Container(
@ -151,12 +137,8 @@ Widget build(BuildContext context) {
child: Text(
'Unit Price',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
);
)))
]));
}
@ -174,7 +156,7 @@ The following code example shows how to freeze a column at right using `footerFr
Widget build(BuildContext context) {
return Scaffold(
body: SfDataGrid(
source: _employeeDataSource,
source: _orderDataGridSource,
footerFrozenColumnsCount: 1,
columns: <GridColumn>[
GridColumn(
@ -185,9 +167,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'productId',
label: Container(
@ -196,9 +176,7 @@ Widget build(BuildContext context) {
child: Text(
'Product ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -207,9 +185,7 @@ Widget build(BuildContext context) {
child: Text(
'Customer Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'product',
label: Container(
@ -218,9 +194,7 @@ Widget build(BuildContext context) {
child: Text(
'Product',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'orderDate',
label: Container(
@ -229,9 +203,7 @@ Widget build(BuildContext context) {
child: Text(
'Order Date',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'quantity',
label: Container(
@ -240,9 +212,7 @@ Widget build(BuildContext context) {
child: Text(
'Quantity',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'city',
label: Container(
@ -251,9 +221,7 @@ Widget build(BuildContext context) {
child: Text(
'City',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'unitPrice',
label: Container(
@ -262,12 +230,8 @@ Widget build(BuildContext context) {
child: Text(
'Unit Price',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
);
)))
]));
}
{% endhighlight %}
@ -292,7 +256,7 @@ The following code example shows how to freeze a row at top using `frozenRowsCou
Widget build(BuildContext context) {
return Scaffold(
body: SfDataGrid(
source: _employeeDataSource,
source: _orderDataGridSource,
frozenRowsCount: 1,
columns: <GridColumn>[
GridColumn(
@ -303,9 +267,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'productId',
label: Container(
@ -314,9 +276,7 @@ Widget build(BuildContext context) {
child: Text(
'Product ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -325,9 +285,7 @@ Widget build(BuildContext context) {
child: Text(
'Customer Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'product',
label: Container(
@ -336,9 +294,7 @@ Widget build(BuildContext context) {
child: Text(
'Product',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'orderDate',
label: Container(
@ -347,9 +303,7 @@ Widget build(BuildContext context) {
child: Text(
'Order Date',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'quantity',
label: Container(
@ -358,9 +312,7 @@ Widget build(BuildContext context) {
child: Text(
'Quantity',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'city',
label: Container(
@ -369,9 +321,7 @@ Widget build(BuildContext context) {
child: Text(
'City',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'unitPrice',
label: Container(
@ -380,12 +330,8 @@ Widget build(BuildContext context) {
child: Text(
'Unit Price',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
);
)))
]));
}
{% endhighlight %}
@ -402,7 +348,7 @@ The following code example shows how to freeze a row at bottom using `footerFroz
Widget build(BuildContext context) {
return Scaffold(
body: SfDataGrid(
source: _employeeDataSource,
source: _orderDataGridSource,
footerFrozenRowsCount: 1,
columns: <GridColumn>[
GridColumn(
@ -413,9 +359,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'productId',
label: Container(
@ -424,9 +368,7 @@ Widget build(BuildContext context) {
child: Text(
'Product ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -435,9 +377,7 @@ Widget build(BuildContext context) {
child: Text(
'Customer Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'product',
label: Container(
@ -446,9 +386,7 @@ Widget build(BuildContext context) {
child: Text(
'Product',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'orderDate',
label: Container(
@ -457,9 +395,7 @@ Widget build(BuildContext context) {
child: Text(
'Order Date',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'quantity',
label: Container(
@ -468,9 +404,7 @@ Widget build(BuildContext context) {
child: Text(
'Quantity',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'city',
label: Container(
@ -479,9 +413,7 @@ Widget build(BuildContext context) {
child: Text(
'City',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'unitPrice',
label: Container(
@ -490,12 +422,8 @@ Widget build(BuildContext context) {
child: Text(
'Unit Price',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
);
)))
]));
}
{% endhighlight %}
@ -541,9 +469,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'productId',
label: Container(
@ -552,9 +478,7 @@ Widget build(BuildContext context) {
child: Text(
'Product ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -563,9 +487,7 @@ Widget build(BuildContext context) {
child: Text(
'Customer Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'product',
label: Container(
@ -574,9 +496,7 @@ Widget build(BuildContext context) {
child: Text(
'Product',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'orderDate',
label: Container(
@ -585,9 +505,7 @@ Widget build(BuildContext context) {
child: Text(
'Order Date',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'quantity',
label: Container(
@ -596,9 +514,7 @@ Widget build(BuildContext context) {
child: Text(
'Quantity',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'city',
label: Container(
@ -607,9 +523,7 @@ Widget build(BuildContext context) {
child: Text(
'City',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'unitPrice',
label: Container(
@ -618,12 +532,9 @@ Widget build(BuildContext context) {
child: Text(
'Unit Price',
overflow: TextOverflow.ellipsis,
),
),
),
],
)),
);
)))
]),
));
}
{% endhighlight %}
@ -654,9 +565,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'productId',
label: Container(
@ -665,9 +574,7 @@ Widget build(BuildContext context) {
child: Text(
'Product ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -676,9 +583,7 @@ Widget build(BuildContext context) {
child: Text(
'Customer Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'product',
label: Container(
@ -687,9 +592,7 @@ Widget build(BuildContext context) {
child: Text(
'Product',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'orderDate',
label: Container(
@ -698,9 +601,7 @@ Widget build(BuildContext context) {
child: Text(
'Order Date',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'quantity',
label: Container(
@ -709,9 +610,7 @@ Widget build(BuildContext context) {
child: Text(
'Quantity',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'city',
label: Container(
@ -720,9 +619,7 @@ Widget build(BuildContext context) {
child: Text(
'City',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'unitPrice',
label: Container(
@ -731,12 +628,9 @@ Widget build(BuildContext context) {
child: Text(
'Unit Price',
overflow: TextOverflow.ellipsis,
),
),
),
],
)),
);
)))
]),
));
}
{% endhighlight %}
@ -772,9 +666,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'productId',
label: Container(
@ -783,9 +675,7 @@ Widget build(BuildContext context) {
child: Text(
'Product ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -794,9 +684,7 @@ Widget build(BuildContext context) {
child: Text(
'Customer Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'product',
label: Container(
@ -805,9 +693,7 @@ Widget build(BuildContext context) {
child: Text(
'Product',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'orderDate',
label: Container(
@ -816,9 +702,7 @@ Widget build(BuildContext context) {
child: Text(
'Order Date',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'quantity',
label: Container(
@ -827,9 +711,7 @@ Widget build(BuildContext context) {
child: Text(
'Quantity',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'city',
label: Container(
@ -838,9 +720,7 @@ Widget build(BuildContext context) {
child: Text(
'City',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'unitPrice',
label: Container(
@ -849,12 +729,9 @@ Widget build(BuildContext context) {
child: Text(
'Unit Price',
overflow: TextOverflow.ellipsis,
),
),
),
],
)),
);
)))
]),
));
}
{% endhighlight %}

Просмотреть файл

@ -61,7 +61,6 @@ Add the SfDataGrid widget as a child of any widget. [SfDataGrid](https://pub.dev
{% tabs %}
{% highlight Dart %}
late EmployeeDataSource _employeeDataSource;
@override
Widget build(BuildContext context) {
@ -242,8 +241,6 @@ Widget build(BuildContext context) {
{% tabs %}
{% highlight Dart %}
late EmployeeDataSource _employeeDataSource;
@override
Widget build(BuildContext context) {
return Scaffold(
@ -299,8 +296,6 @@ Widget build(BuildContext context) {
{% tabs %}
{% highlight Dart %}
late EmployeeDataSource _employeeDataSource;
@override
Widget build(BuildContext context) {
return Scaffold(
@ -360,8 +355,6 @@ The information about the rows that are selected can be retrieved using [selecte
{% tabs %}
{% highlight Dart %}
late EmployeeDataSource _employeeDataSource;
final DataGridController _controller = DataGridController();
@override

Двоичный файл не отображается.

До

Ширина:  |  Высота:  |  Размер: 450 KiB

После

Ширина:  |  Высота:  |  Размер: 318 KiB

Двоичный файл не отображается.

До

Ширина:  |  Высота:  |  Размер: 394 KiB

После

Ширина:  |  Высота:  |  Размер: 309 KiB

Просмотреть файл

@ -24,8 +24,6 @@ The following example demonstrates infinite scrolling by showing the circular pr
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
EmployeeDataSource _employeeDataSource = EmployeeDataSource();
@override
Widget build(BuildContext context) {
return SfDataGrid(
@ -210,8 +208,6 @@ The following example demonstrates how to show the button when vertical scrollin
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
EmployeeDataSource _employeeDataSource = EmployeeDataSource();
@override
Widget build(BuildContext context) {
return SfDataGrid(

Просмотреть файл

@ -49,10 +49,8 @@ Widget build(BuildContext context) {
appBar: AppBar(
title: Text('DataPager'),
),
body: LayoutBuilder(
builder: (context, constraints) {
return Column(
children: [
body: LayoutBuilder(builder: (context, constraints) {
return Column(children: [
SizedBox(
height: constraints.maxHeight - 60,
width: constraints.maxWidth,
@ -67,9 +65,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -78,9 +74,7 @@ Widget build(BuildContext context) {
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
label: Container(
@ -89,9 +83,7 @@ Widget build(BuildContext context) {
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'salary',
label: Container(
@ -100,28 +92,19 @@ Widget build(BuildContext context) {
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
),
)))
])),
Container(
height: 60,
width: constraints.maxWidth,
child: SfDataPager(
delegate: _employeeDataSource,
pageCount: employees.length / rowsPerPage,
pageCount: _employees.length / rowsPerPage,
visibleItemsCount: 5,
direction: Axis.horizontal,
),
)
],
);
},
),
),
);
))
]);
})));
}
{% endhighlight %}
@ -173,10 +156,8 @@ Widget build(BuildContext context) {
appBar: AppBar(
title: Text('DataPager'),
),
body: LayoutBuilder(
builder: (context, constraints) {
return Column(
children: [
body: LayoutBuilder(builder: (context, constraints) {
return Column(children: [
SizedBox(
height: constraints.maxHeight - 60,
width: constraints.maxWidth,
@ -191,9 +172,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'name',
label: Container(
@ -202,9 +181,7 @@ Widget build(BuildContext context) {
child: Text(
'Name',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'designation',
label: Container(
@ -213,9 +190,7 @@ Widget build(BuildContext context) {
child: Text(
'Designation',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'salary',
label: Container(
@ -224,28 +199,19 @@ Widget build(BuildContext context) {
child: Text(
'Salary',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
),
)))
])),
Container(
height: 60,
width: constraints.maxWidth,
child: SfDataPager(
delegate: _employeeDataSource,
pageCount: employees.length / rowsPerPage,
pageCount: _employees.length / rowsPerPage,
visibleItemsCount: 5,
direction: Axis.horizontal,
),
)
],
);
},
),
),
);
))
]);
})));
}
{% endhighlight %}

Просмотреть файл

@ -25,6 +25,8 @@ The following code example illustrates using `SfDataPager` with the datagrid con
{% tabs %}
{% highlight Dart %}
import 'package:intl/intl.dart';
final int rowsPerPage = 15;
final double dataPagerHeight = 60.0;
@ -38,12 +40,23 @@ final OrderInfoDataSource _orderInfoDataSource = OrderInfoDataSource();
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraint) {
return Column(
children: [
return Column(children: [
SizedBox(
height: constraint.maxHeight - dataPagerHeight,
height: constraint.maxHeight - _dataPagerHeight,
width: constraint.maxWidth,
child: SfDataGrid(
child: _buildDataGrid(constraint)),
Container(
height: _dataPagerHeight,
child: SfDataPager(
delegate: _orderInfoDataSource,
pageCount: _orders.length / _rowsPerPage,
direction: Axis.horizontal,
))
]);
});
}
Widget _buildDataGrid(BoxConstraints constraint) {
return SfDataGrid(
source: _orderInfoDataSource,
columnWidthMode: ColumnWidthMode.fill,
columns: <GridColumn>[
@ -55,9 +68,7 @@ Widget build(BuildContext context) {
child: Text(
'Order ID',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'customerID',
label: Container(
@ -66,8 +77,7 @@ Widget build(BuildContext context) {
child: Text(
'Customer Name',
overflow: TextOverflow.ellipsis,
),
)),
))),
GridColumn(
columnName: 'orderDate',
label: Container(
@ -76,9 +86,7 @@ Widget build(BuildContext context) {
child: Text(
'Order Date',
overflow: TextOverflow.ellipsis,
),
),
),
))),
GridColumn(
columnName: 'freight',
label: Container(
@ -87,29 +95,14 @@ Widget build(BuildContext context) {
child: Text(
'Freight',
overflow: TextOverflow.ellipsis,
),
),
),
],
),
),
Container(
height: dataPagerHeight,
child: SfDataPager(
delegate: _orderInfoDataSource,
pageCount: orders.length / rowsPerPage,
direction: Axis.horizontal,
),
)
],
);
});
)))
]);
}
class OrderInfoDataSource extends DataGridSource {
OrderInfoDataSource() {
paginatedOrders = orders.getRange(0, 19).toList(growable: false);
buildPaginateDataGridRows();
_paginatedOrders = _orders.getRange(0, 19).toList(growable: false);
buildPaginatedDataGridRows();
}
List<DataGridRow> dataGridRows = [];
@ -162,25 +155,26 @@ class OrderInfoDataSource extends DataGridSource{
@override
Future<bool> handlePageChange(int oldPageIndex, int newPageIndex) async {
int startIndex = newPageIndex * rowsPerPage;
int endIndex = startIndex + rowsPerPage;
if(startIndex < orders.length && endIndex <= orders.length){
paginatedOrders = orders.getRange(startIndex, endIndex).toList(growable: false);
int startIndex = newPageIndex * _rowsPerPage;
int endIndex = startIndex + _rowsPerPage;
if (startIndex < _orders.length && endIndex <= _orders.length) {
_paginatedOrders =
_orders.getRange(startIndex, endIndex).toList(growable: false);
buildPaginatedDataGridRows();
notifyListeners();
} else {
paginatedOrders = [];
_paginatedOrders = [];
}
return true;
}
void buildPaginatedDataGridRows() {
dataGridRows = paginatedOrders.map<DataGridRow>((dataGridRow) {
dataGridRows = _paginatedOrders.map<DataGridRow>((dataGridRow) {
return DataGridRow(cells: [
DataGridCell(columnName: 'orderID', value: dataGridRow.orderID),
DataGridCell(columnName: 'customerID', value: dataGridRow.customerID),
DataGridCell(columnName: 'orderDate', value: dataGridRow.orderData),
DataGridCell(columnName: 'orderDate', value: dataGridRow.orderDate),
DataGridCell(columnName: 'freight', value: dataGridRow.freight),
]);
}).toList(growable: false);
@ -201,25 +195,20 @@ Typically, these callbacks are used to show and hide loading indicator.
{% tabs %}
{% highlight Dart %}
final OrderInfoDataSource _orderInfoDataSource = OrderInfoDataSource();
@override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) {
return Scaffold(body: LayoutBuilder(builder: (context, constraints) {
return Row(children: [
Column(
children: [
Column(children: [
SizedBox(
height: constraints.maxHeight - 60,
width: constraints.maxWidth,
child: buildDataGrid(constraints)),
child: _buildDataGrid(constraints)),
Container(
height: 60,
width: constraints.maxWidth,
child: SfDataPager(
pageCount: orders.length / rowsPerPage,
pageCount: _orders.length / _rowsPerPage,
direction: Axis.horizontal,
onPageNavigationStart: (int pageIndex) {
//You can do your customization
@ -227,148 +216,10 @@ Widget build(BuildContext context) {
delegate: _orderInfoDataSource,
onPageNavigationEnd: (int pageIndex) {
//You can do your customization
},
),
)
],
),
}))
])
]);
},
),
);
}
Widget buildDataGrid(BoxConstraints constraint) {
return SfDataGrid(
source: _orderInfoDataSource,
columnWidthMode: ColumnWidthMode.fill,
columns: <GridColumn>[
GridColumn(
columnName: 'orderID',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
'Order ID',
overflow: TextOverflow.ellipsis,
),
),
),
GridColumn(
columnName: 'customerID',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(
'Customer Name',
overflow: TextOverflow.ellipsis,
),
)),
GridColumn(
columnName: 'orderDate',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
'Order Date',
overflow: TextOverflow.ellipsis,
),
),
),
GridColumn(
columnName: 'freight',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.center,
child: Text(
'Freight',
overflow: TextOverflow.ellipsis,
),
),
),
],
);
}
class OrderInfoDataSource extends DataGridSource{
OrderInfoDataSource() {
paginatedOrders = orders.getRange(0, 19).toList(growable: false);
buildPaginatedDataGridRows();
}
List<DataGridRow> dataGridRows = [];
@override
List<DataGridRow> get rows => dataGridRows;
@override
DataGridRowAdapter? buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row.getCells().map<Widget>((dataGridCell) {
if (dataGridCell.columnName == 'orderID') {
return Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
dataGridCell.value.toString(),
overflow: TextOverflow.ellipsis,
),
);
} else if (dataGridCell.columnName == 'customerID') {
return Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(
dataGridCell.value.toString(),
overflow: TextOverflow.ellipsis,
));
} else if (dataGridCell.columnName == 'orderDate') {
return Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
DateFormat.yMd().format(dataGridCell.value).toString(),
overflow: TextOverflow.ellipsis,
));
} else {
return Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.center,
child: Text(
NumberFormat.currency(locale: 'en_US', symbol: '\$')
.format(dataGridCell.value)
.toString(),
overflow: TextOverflow.ellipsis,
));
}
}).toList());
}
@override
Future<bool> handlePageChange(int oldPageIndex, int newPageIndex) async {
int startIndex = newPageIndex * rowsPerPage;
int endIndex = startIndex + rowsPerPage;
if(startIndex < orders.length && endIndex <= orders.length){
paginatedOrders = orders.getRange(startIndex, endIndex).toList(growable: false);
buildPaginatedDataGridRows();
notifyListeners();
}else{
paginatedOrders = [];
}
return true;
}
void buildPaginatedDataGridRows() {
dataGridRows = paginatedOrders.map<DataGridRow>((dataGridRow) {
return DataGridRow(cells: [
DataGridCell(columnName: 'orderID', value: dataGridRow.orderID),
DataGridCell(columnName: 'customerID', value: dataGridRow.customerID),
DataGridCell(columnName: 'orderDate', value: dataGridRow.orderData),
DataGridCell(columnName: 'freight', value: dataGridRow.freight),
]);
}).toList(growable: false);
}
}));
}
{% endhighlight %}
@ -385,28 +236,24 @@ In the below example, we have set await for 2000ms and displayed the loading ind
{% tabs %}
{% highlight Dart %}
final OrderInfoDataSource _orderInfoDataSource = OrderInfoDataSource();
import 'package:intl/intl.dart';
bool showLoadingIndicator = true;
@override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) {
return Scaffold(body: LayoutBuilder(builder: (context, constraints) {
return Row(children: [
Column(
children: [
Column(children: [
SizedBox(
height: constraints.maxHeight - 60,
width: constraints.maxWidth,
child: buildStack(constraints)),
child: _buildStack(constraints)),
Container(
height: 60,
width: constraints.maxWidth,
child: SfDataPager(
pageCount:
orders.length / rowsPerPage,
pageCount: _orders.length / _rowsPerPage,
direction: Axis.horizontal,
onPageNavigationStart: (int pageIndex) {
setState(() {
@ -418,73 +265,16 @@ Widget build(BuildContext context) {
setState(() {
showLoadingIndicator = false;
});
},
),
)
],
),
}))
])
]);
},
),
);
}));
}
Widget buildDataGrid(BoxConstraints constraint) {
return SfDataGrid(
source: _orderInfoDataSource,
columnWidthMode: ColumnWidthMode.fill,
columns: <GridColumn>[
GridColumn(
columnName: 'orderID',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
'Order ID',
overflow: TextOverflow.ellipsis,
),
),
),
GridColumn(
columnName: 'customerID',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: Text(
'Customer Name',
overflow: TextOverflow.ellipsis,
),
)),
GridColumn(
columnName: 'orderDate',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerRight,
child: Text(
'Order Date',
overflow: TextOverflow.ellipsis,
),
),
),
GridColumn(
columnName: 'freight',
label: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.center,
child: Text(
'Freight',
overflow: TextOverflow.ellipsis,
),
),
),
],
);
}
Widget buildStack(BoxConstraints constraints) {
Widget _buildStack(BoxConstraints constraints) {
List<Widget> _getChildren() {
final List<Widget> stackChildren = [];
stackChildren.add(buildDataGrid(constraints));
stackChildren.add(_buildDataGrid(constraints));
if (showLoadingIndicator) {
stackChildren.add(Container(
@ -495,9 +285,7 @@ Widget buildStack(BoxConstraints constraints) {
alignment: Alignment.center,
child: CircularProgressIndicator(
strokeWidth: 3,
),
),
));
))));
}
return stackChildren;
@ -510,8 +298,8 @@ Widget buildStack(BoxConstraints constraints) {
class OrderInfoDataSource extends DataGridSource {
OrderInfoDataSource() {
paginatedOrders = orders.getRange(0, 19).toList(growable: false);
buildPaginateDataGridRows();
_paginatedOrders = _orders.getRange(0, 19).toList(growable: false);
buildPaginatedDataGridRows();
}
List<DataGridRow> dataGridRows = [];
@ -564,26 +352,27 @@ class OrderInfoDataSource extends DataGridSource{
@override
Future<bool> handlePageChange(int oldPageIndex, int newPageIndex) async {
int startIndex = newPageIndex * rowsPerPage;
int endIndex = startIndex + rowsPerPage;
if(startIndex < orders.length && endIndex <= orders.length){
int startIndex = newPageIndex * _rowsPerPage;
int endIndex = startIndex + _rowsPerPage;
if (startIndex < _orders.length && endIndex <= _orders.length) {
await Future.delayed(Duration(milliseconds: 2000));
paginatedOrders = orders.getRange(startIndex, endIndex).toList(growable: false);
_paginatedOrders =
_orders.getRange(startIndex, endIndex).toList(growable: false);
buildPaginatedDataGridRows();
notifyListeners();
} else {
paginatedOrders = [];
_paginatedOrders = [];
}
return true;
}
void buildPaginatedDataGridRows() {
dataGridRows = paginatedOrders.map<DataGridRow>((dataGridRow) {
dataGridRows = _paginatedOrders.map<DataGridRow>((dataGridRow) {
return DataGridRow(cells: [
DataGridCell(columnName: 'orderID', value: dataGridRow.orderID),
DataGridCell(columnName: 'customerID', value: dataGridRow.customerID),
DataGridCell(columnName: 'orderDate', value: dataGridRow.orderData),
DataGridCell(columnName: 'orderDate', value: dataGridRow.orderDate),
DataGridCell(columnName: 'freight', value: dataGridRow.freight),
]);
}).toList(growable: false);
@ -612,39 +401,36 @@ The following code example shows how to navigate the previous page programmatica
{% tabs %}
{% highlight Dart %}
DataPagerController _controller = DataPagerController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(builder: (context, constraint) {
return Column(
children: [
return Scaffold(body: LayoutBuilder(builder: (context, constraint) {
return Column(children: [
MaterialButton(
onPressed: () {
controller.previousPage();
_controller.previousPage();
},
child: Text('Move Previous page'),
),
SizedBox(
height: constraint.maxHeight - 120,
width: constraint.maxWidth,
child: _buildDataGrid()),
child: _buildDataGrid(constraint)),
Container(
height: 60,
child: Align(
alignment: Alignment.center,
child: SfDataPager(
delegate: orderInfoDataSource,
initialPageIndex: index,
controller: controller,
pageCount: orderInfoDataSource.orders.length /
orderInfoDataSource.rowsPerPage,
delegate: _orderInfoDataSource,
initialPageIndex: 2,
controller: _controller,
pageCount: _orders.length / _rowsPerPage,
direction: Axis.horizontal,
)),
)
],
);
}),
);
)))
]);
}));
}
{% endhighlight %}
@ -713,7 +499,7 @@ Widget build(BuildContext context) {
),
child: SfDataPager(
delegate: _orderInfoDataSource,
pageCount: orders.length / rowsPerPage,
pageCount: _orders.length / _rowsPerPage,
direction: Axis.horizontal,
),
),
@ -742,16 +528,15 @@ You can change the number of visible items i.e. page buttons in view by using th
return Column(
children: [
SizedBox(
height: constraint.maxHeight - dataPagerHeight,
height: constraint.maxHeight - _dataPagerHeight,
width: constraint.maxWidth,
child: _buildDataGrid()),
child: _buildDataGrid(constraint)),
Container(
height: dataPagerHeight,
height: _dataPagerHeight,
child: SfDataPager(
visibleItemsCount: 1,
delegate: orderInfoDataSource,
pageCount: orderInfoDataSource.orders.length /
orderInfoDataSource.rowsPerPage,
delegate: _orderInfoDataSource,
pageCount: _orders.length / _rowsPerPage,
direction: Axis.horizontal,
),
)
@ -769,6 +554,7 @@ You can load any widget to page button by using [SfDataPager.pageItemBuilder](ht
{% tabs %}
{% highlight Dart %}
@override
Widget build(BuildContext context) {
return Scaffold(
@ -776,14 +562,13 @@ You can load any widget to page button by using [SfDataPager.pageItemBuilder](ht
title: Text('Flutter DataGrid Sample'),
),
body: LayoutBuilder(builder: (context, constraint) {
return Column(
children: [
return Column(children: [
SizedBox(
height: constraint.maxHeight - dataPagerHeight,
height: constraint.maxHeight - _dataPagerHeight,
width: constraint.maxWidth,
child: _buildDataGrid()),
child: _buildDataGrid(constraint)),
Container(
height: dataPagerHeight,
height: _dataPagerHeight,
child: SfDataPagerTheme(
data: SfDataPagerThemeData(
itemBorderColor: Colors.blue,
@ -800,15 +585,11 @@ You can load any widget to page button by using [SfDataPager.pageItemBuilder](ht
fontSize: 10, fontWeight: FontWeight.w700),
));
},
delegate: orderInfoDataSource,
pageCount: orderInfoDataSource.orders.length /
orderInfoDataSource.rowsPerPage,
delegate: _orderInfoDataSource,
pageCount: _orders.length / _rowsPerPage,
direction: Axis.horizontal,
),
),
)
],
);
)))
]);
}));
}
{% endhighlight %}

Просмотреть файл

@ -171,8 +171,6 @@ You can also change the stroke width and displacement of refresh indicator by us
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
EmployeeDataSource _employeeDataSource = EmployeeDataSource();
@override
Widget build(BuildContext context) {
return Theme(
@ -240,7 +238,6 @@ If you want to refresh data without showing a refresh indicator, you can pass `f
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
final GlobalKey<SfDataGridState> key = GlobalKey<SfDataGridState>();
EmployeeDataSource _employeeDataSource = EmployeeDataSource();
@override
Widget build(BuildContext context) {

Просмотреть файл

@ -7,7 +7,7 @@ control: SfDataGrid
documentation: ug
---
## Right to Left (RTL) in Flutter DataGrid (SfDataGrid)
# Right to Left (RTL) in Flutter DataGrid (SfDataGrid)
SfDataGrid supports right-to-left rendering. The columns will be rendered based on LTR and RTL direction.
@ -29,7 +29,7 @@ Widget build(BuildContext context) {
return Directionality(
textDirection: TextDirection.rtl,
child: SfDataGrid(
source: employeeDataSource,
source: _employeeDataSource,
columnWidthMode: ColumnWidthMode.fill,
columns: <GridColumn>[
GridColumn(
@ -61,9 +61,7 @@ Widget build(BuildContext context) {
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text('Salary'))),
],
),
);
]));
}
{% endhighlight %}
@ -73,6 +71,18 @@ Widget build(BuildContext context) {
To change the datagrid rendering direction from right to left, change the [locale](https://api.flutter.dev/flutter/material/MaterialApp/locale.html) to any of the RTL languages such as Arabic, Persian, Hebrew, Pashto, and Urdu.
To use `flutter_localizations`, add the package as dependency to `pubspec.yaml` file.
{% highlight dart %}
dependencies:
flutter_localizations:
sdk: flutter
{% endhighlight %}
Then, import the `flutter_localizations` library, specify [localizationsDelegates](https://api.flutter.dev/flutter/widgets/LocalizationsDelegate-class.html) and `supportedLocales` for `MaterialApp`.
{% tabs %}
{% highlight Dart %}
@ -93,7 +103,7 @@ Widget build(BuildContext context) {
],
locale: Locale('ar'),
home: SfDataGrid(
source: employeeDataSource,
source: _employeeDataSource,
columnWidthMode: ColumnWidthMode.fill,
columns: <GridColumn>[
GridColumn(
@ -125,9 +135,7 @@ Widget build(BuildContext context) {
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text('Salary'))),
],
),
);
]));
}
{% endhighlight %}

Просмотреть файл

@ -21,7 +21,7 @@ The row height of particular row can be set by using the [SfDataGrid.onQueryRowH
@override
Widget build(BuildContext context) {
return SfDataGrid(
source: employeeDataSource,
source: _employeeDataSource,
onQueryRowHeight: (details) {
// Set the row height as 70.0 to the column header row.
return details.rowIndex == 0 ? 70.0 : 49.0;
@ -35,9 +35,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
softWrap: true,
),
),
),
))),
GridColumn(
columnName: 'Contact Name',
label: Container(
@ -46,9 +44,7 @@ Widget build(BuildContext context) {
child: Text(
'Contact Name',
softWrap: true,
),
),
),
))),
GridColumn(
columnName: 'Company Name',
label: Container(
@ -57,9 +53,7 @@ Widget build(BuildContext context) {
child: Text(
'Company Name',
softWrap: true,
),
),
),
))),
GridColumn(
columnName: 'City',
label: Container(
@ -68,11 +62,8 @@ Widget build(BuildContext context) {
child: Text(
'City',
softWrap: true,
),
),
),
],
);
)))
]);
}
{% endhighlight %}
@ -90,7 +81,7 @@ The row height can be autofit based on its content in the `SfDataGrid.onQueryRow
@override
Widget build(BuildContext context) {
return SfDataGrid(
source: employeeDataSource,
source: _employeeDataSource,
onQueryRowHeight: (details) {
return details.getIntrinsicRowHeight(details.rowIndex);
},
@ -103,9 +94,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
softWrap: true,
),
),
),
))),
GridColumn(
columnName: 'Contact Name',
label: Container(
@ -114,9 +103,7 @@ Widget build(BuildContext context) {
child: Text(
'Contact Name',
softWrap: true,
),
),
),
))),
GridColumn(
columnName: 'Company Name',
label: Container(
@ -125,9 +112,7 @@ Widget build(BuildContext context) {
child: Text(
'Company Name',
softWrap: true,
),
),
),
))),
GridColumn(
columnName: 'City',
label: Container(
@ -136,11 +121,8 @@ Widget build(BuildContext context) {
child: Text(
'City',
softWrap: true,
),
),
),
],
);
)))
]);
}
{% endhighlight %}
@ -160,7 +142,7 @@ The `RowHeightDetails.getIntrinsicRowHeight` method provides some properties to
@override
Widget build(BuildContext context) {
return SfDataGrid(
source: employeeDataSource,
source: _employeeDataSource,
onQueryRowHeight: (details) {
return details.getIntrinsicRowHeight(details.rowIndex,
excludedColumns: ['Contact Name'], canIncludeHiddenColumns: true);
@ -168,39 +150,31 @@ Widget build(BuildContext context) {
columns: <GridColumn>[
GridColumn(
columnName: 'ID',
autoFitPadding: EdgeInsets.all(16.0),
label: Container(
padding: EdgeInsets.all(16.0),
alignment: Alignment.centerRight,
child: Text(
'ID',
softWrap: true,
),
),
),
))),
GridColumn(
columnName: 'Contact Name',
autoFitPadding: EdgeInsets.all(16.0),
label: Container(
padding: EdgeInsets.all(16.0),
alignment: Alignment.centerLeft,
child: Text(
'Contact Name',
softWrap: true,
),
),
),
))),
GridColumn(
columnName: 'Company Name',
visible: false,
autoFitPadding: EdgeInsets.all(16.0),
width: 100.0,
label: Container(
padding: EdgeInsets.all(16.0),
alignment: Alignment.centerLeft,
child: Text(
'Company Name',
softWrap: true,
),
),
),
))),
GridColumn(
columnName: 'City',
label: Container(
@ -209,22 +183,8 @@ Widget build(BuildContext context) {
child: Text(
'City',
softWrap: true,
),
),
),
GridColumn(
columnName: 'Country',
label: Container(
padding: EdgeInsets.all(16.0),
alignment: Alignment.centerLeft,
child: Text(
'Country',
softWrap: true,
),
),
),
],
);
)))
]);
}
{% endhighlight %}
@ -244,7 +204,7 @@ final CustomColumnSizer _customColumnSizer = CustomColumnSizer();
@override
Widget build(BuildContext context) {
return SfDataGrid(
source: employeeDataSource,
source: _employeeDataSource,
columnSizer: _customColumnSizer,
onQueryRowHeight: (details) {
return details.getIntrinsicRowHeight(details.rowIndex);
@ -259,9 +219,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
softWrap: true,
),
),
),
))),
GridColumn(
columnName: 'Contact Name',
autoFitPadding: EdgeInsets.all(10.0),
@ -273,9 +231,7 @@ Widget build(BuildContext context) {
softWrap: true,
style: TextStyle(
fontWeight: FontWeight.bold, fontStyle: FontStyle.italic),
),
),
),
))),
GridColumn(
columnName: 'Company Name',
visible: true,
@ -287,29 +243,24 @@ Widget build(BuildContext context) {
child: Text(
'Company Name',
softWrap: true,
),
),
),
))),
GridColumn(
columnName: 'City',
autoFitPadding: EdgeInsets.all(10.0)EdgeInsets.all(10.0),
autoFitPadding: EdgeInsets.all(10.0),
label: Container(
padding: EdgeInsets.all(10.0)EdgeInsets.all(10.0),
padding: EdgeInsets.all(10.0),
alignment: Alignment.centerLeft,
child: Text(
'City',
softWrap: true,
style: TextStyle(
fontWeight: FontWeight.bold, fontStyle: FontStyle.italic),
),
),
),
],
);
)))
]);
}
class EmployeeDataSource extends DataGridSource {
EmployeeDataSource({required List<_Employee> employees}) {
EmployeeDataSource({required List<Employee> employees}) {
dataGridRows = employees.map<DataGridRow>((dataGridRow) {
return DataGridRow(cells: [
DataGridCell<int>(columnName: 'ID', value: dataGridRow.id),
@ -382,17 +333,37 @@ class CustomColumnSizer extends ColumnSizer {
By default, the cell height is calculated based on the `DataGridCell.value` property. To autofit the cell height based on the displayed formatted value (i.e, DateFormat and NumberFormat), simply override the `computeCellHeight` method and return the super method with the required `cellValue`.
To use `intl`, add the package as dependency to `pubspec.yaml` file.
{% highlight dart %}
dependencies:
intl: ^0.17.0
{% endhighlight %}
Import the `intl` library, to use the date and number format.
{% tabs %}
{% highlight dart %}
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
late EmployeeDataSource employeeDataSource;
final CustomColumnSizer _customColumnSizer = CustomColumnSizer();
@override
Widget build(BuildContext context) {
return SfDataGrid(
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Syncfusion Flutter DataGrid'),
),
body: SfDataGrid(
source: employeeDataSource,
columnSizer: _customColumnSizer,
onQueryRowHeight: (details) {
onQueryRowHeight: (RowHeightDetails details) {
return details.getIntrinsicRowHeight(details.rowIndex);
},
columns: <GridColumn>[
@ -405,9 +376,7 @@ Widget build(BuildContext context) {
child: Text(
'ID',
softWrap: true,
),
),
),
))),
GridColumn(
columnName: 'Contact Name',
autoFitPadding: EdgeInsets.all(10.0),
@ -417,9 +386,7 @@ Widget build(BuildContext context) {
child: Text(
'Contact Name',
softWrap: true,
),
),
),
))),
GridColumn(
columnName: 'Date of Birth',
visible: true,
@ -431,9 +398,7 @@ Widget build(BuildContext context) {
child: Text(
'Date of Birth',
softWrap: true,
),
),
),
))),
GridColumn(
columnName: 'Salary',
autoFitPadding: EdgeInsets.all(10.0),
@ -443,15 +408,12 @@ Widget build(BuildContext context) {
child: Text(
'Salary',
softWrap: true,
),
),
),
],
);
)))
])));
}
class EmployeeDataSource extends DataGridSource {
EmployeeDataSource({required List<_Employee> employees}) {
EmployeeDataSource({required List<Employee> employees}) {
dataGridRows = employees.map<DataGridRow>((dataGridRow) {
return DataGridRow(cells: [
DataGridCell<int>(columnName: 'ID', value: dataGridRow.id),
@ -528,7 +490,7 @@ class CustomColumnSizer extends ColumnSizer {
Widget build(BuildContext context) {
return Scaffold(
body: SfDataGrid(
source: _employeeDatasource,
source: _employeeDataSource,
headerRowHeight: 70,
columns: <GridColumn>[
GridColumn(
@ -587,7 +549,7 @@ You can customize the height of the grid rows in `SfDataGrid` by using the [rowH
Widget build(BuildContext context) {
return Scaffold(
body: SfDataGrid(
source: _employeeDatasource,
source: _employeeDataSource,
rowHeight: 60,
columns: <GridColumn>[
GridColumn(
@ -648,16 +610,23 @@ You can refresh a specific row and its height by using the [DataGridController.r
If you call `refreshRow` method, `onQueryRowHeight` callback will called for that specific row. So, auto-calculation of height can be recalculated for that row.
In the below example, row data is updated when the `refreshRow` is called in `onPressed` callback of the `FlatButton`.
In the below example, row data is updated when the `refreshRow` is called in `onPressed` callback of the `TextButton`.
{% tabs %}
{% highlight Dart %}
List<Employee> _employees = [];
final EmployeeDataSource _employeeDataSource = EmployeeDataSource();
late EmployeeDataSource _employeeDataSource;
final DataGridController _controller = DataGridController();
List<Employee> _employees = <Employee>[];
@override
void initState() {
super.initState();
_employees = getEmployeeData();
_employeeDataSource = EmployeeDataSource(employees: _employees);
}
@override
Widget build(BuildContext context) {
@ -665,23 +634,24 @@ Widget build(BuildContext context) {
appBar: AppBar(
title: const Text('Syncfusion Flutter DataGrid'),
),
body: Column(
children: [
FlatButton(
child: const Text('Update cell value),
body: Column(children: [
TextButton(
child: const Text('Update cell value'),
onPressed: () {
_employees[0].id = 1010;
_employeeData[0].name = 'Maria Anders';
_employeeData[0].designation = 'Sales Representative';
_employees[0].name = 'Maria Anders';
_employees[0].designation = 'Sales Representative';
_employees[0].salary = 25000;
_controller.refreshRow(0);
_employeeDataSource.getData(_employees);
_employeeDataSource.updateDataSource();
_employeeDataSource.buildDataGridSource(_employees);
_employeeDataSource.updateDataGridSource();
}),
SfDataGrid(
Expanded(
child: SfDataGrid(
source: _employeeDataSource,
controller: _controller,
columnSizer: _columnSizer,
columnWidthMode: ColumnWidthMode.auto,
onQueryRowHeight: (RowHeightDetails details) {
if (details.rowIndex == 0) {
return 100.0;
@ -726,26 +696,74 @@ Widget build(BuildContext context) {
'Salary',
overflow: TextOverflow.ellipsis,
))),
],
),
],
),
);
]))
]));
}
class EmployeeDataSource extends DataGridSource {
EmployeeDataSource({required List<Employee> employees}) {
buildDataGridSource(employees);
}
void buildDataGridSource(List<Employee> employees) {
dataGridRows = employees
.map<DataGridRow>((dataGridRow) => DataGridRow(cells: [
DataGridCell<int>(columnName: 'id', value: dataGridRow.id),
DataGridCell<String>(columnName: 'name', value: dataGridRow.name),
DataGridCell<String>(
columnName: 'designation', value: dataGridRow.designation),
DataGridCell<int>(
columnName: 'salary', value: dataGridRow.salary),
]))
.toList();
}
List<DataGridRow> dataGridRows = [];
@override
List<DataGridRow> get rows => dataGridRows;
@override
DataGridRowAdapter? buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row.getCells().map<Widget>((dataGridCell) {
return Container(
alignment: (dataGridCell.columnName == 'id' ||
dataGridCell.columnName == 'salary')
? Alignment.centerRight
: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Text(
dataGridCell.value.toString(),
overflow: TextOverflow.ellipsis,
));
}).toList());
}
void updateDataGridSource() {
notifyListeners();
}
}
{% endhighlight %}
{% endtabs %}
In the below example, row data is refreshed along with its row height when the `refreshRow` is called in `onPressed` callback of the `FlatButton`.
In the below example, row data is refreshed along with its row height when the `refreshRow` is called in `onPressed` callback of the `TextButton`.
{% tabs %}
{% highlight Dart %}
List<Employee> _employees = [];
final EmployeeDataSource _employeeDataSource = EmployeeDataSource();;
late EmployeeDataSource _employeeDataSource;
final DataGridController _controller = DataGridController();
List<Employee> _employees = <Employee>[];
@override
void initState() {
super.initState();
_employees = getEmployeeData();
_employeeDataSource = EmployeeDataSource(employees: _employees);
}
@override
Widget build(BuildContext context) {
@ -753,27 +771,29 @@ Widget build(BuildContext context) {
appBar: AppBar(
title: const Text('Syncfusion Flutter DataGrid'),
),
body: Column(
children: [
FlatButton(
child: const Text('Update cell value),
body: Column(children: [
TextButton(
child: const Text('Update cell value'),
onPressed: () {
_employees[0].id = 1010;
_employeeData[0].name = 'Maria Anders';
_employeeData[0].designation = 'Sales Representative';
_employees[0].name = 'Maria Anders';
_employees[0].designation = 'Sales Representative';
_employees[0].salary = 25000;
_controller.refreshRow(0, recalculateRowHeight: true);
_employeeDataSource.getData(_employees);
_employeeDataSource.updateDataSource();
_employeeDataSource.buildDataGridSource(_employees);
_employeeDataSource.updateDataGridSource();
}),
SfDataGrid(
Expanded(
child: SfDataGrid(
source: _employeeDataSource,
controller: _controller,
columnSizer: _columnSizer,
columnWidthMode: ColumnWidthMode.auto,
onQueryRowHeight: (RowHeightDetails details) {
if (details.rowIndex == 0) {
return 100;
return 100.0;
}
return 50.0;
},
columns: <GridColumn>[
@ -813,11 +833,8 @@ Widget build(BuildContext context) {
'Salary',
overflow: TextOverflow.ellipsis,
))),
],
),
],
),
);
]))
]));
}
{% endhighlight %}

Просмотреть файл

@ -63,9 +63,7 @@ N> The default value of `isScrollbarAlwaysShown` is false.
'Salary',
overflow: TextOverflow.ellipsis,
))),
],
),
);
]));
}
{% endhighlight %}
@ -126,9 +124,7 @@ The following example shows how to disable the horizontal and vertical scrolling
'Salary',
overflow: TextOverflow.ellipsis,
))),
],
),
);
]));
}
{% endhighlight %}
@ -153,14 +149,18 @@ final DataGridController _controller = DataGridController();
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: [
FlatButton(
TextButton(
child: Text('ScrollToCell'),
onPressed: () {
_controller.scrollToCell(15, 2);
},
),
Expanded( child:SfDataGrid(
_controller.scrollToCell(10, 1);
}),
Expanded(
child: SfDataGrid(
source: _employeeDataSource,
defaultColumnWidth: 150,
gridLinesVisibility: GridLinesVisibility.both,
headerGridLinesVisibility: GridLinesVisibility.both,
controller: _controller,
columns: [
GridColumn(
columnName: 'id',
@ -198,10 +198,8 @@ final DataGridController _controller = DataGridController();
'Salary',
overflow: TextOverflow.ellipsis,
))),
],
controller: _controller,
)),
);
]))
]));
}
{% endhighlight %}
@ -224,14 +222,18 @@ final DataGridController _controller = DataGridController();
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: [
FlatButton(
TextButton(
child: Text('ScrollToRow'),
onPressed: () {
_controller.scrollToRow(15);
},
),
Expanded( child:SfDataGrid(
_controller.scrollToRow(10);
}),
Expanded(
child: SfDataGrid(
source: _employeeDataSource,
defaultColumnWidth: 150,
gridLinesVisibility: GridLinesVisibility.both,
headerGridLinesVisibility: GridLinesVisibility.both,
controller: _controller,
columns: [
GridColumn(
columnName: 'id',
@ -269,10 +271,8 @@ final DataGridController _controller = DataGridController();
'Salary',
overflow: TextOverflow.ellipsis,
))),
],
controller: _controller,
)),
);
]))
]));
}
{% endhighlight %}
@ -293,14 +293,18 @@ final DataGridController _controller = DataGridController();
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: [
FlatButton(
TextButton(
child: Text('ScrollToColumn'),
onPressed: () {
_controller.scrollToColumn(2);
},
),
Expanded( child:SfDataGrid(
_controller.scrollToColumn(1);
}),
Expanded(
child: SfDataGrid(
source: _employeeDataSource,
defaultColumnWidth: 150,
gridLinesVisibility: GridLinesVisibility.both,
headerGridLinesVisibility: GridLinesVisibility.both,
controller: _controller,
columns: [
GridColumn(
columnName: 'id',
@ -338,10 +342,8 @@ final DataGridController _controller = DataGridController();
'Salary',
overflow: TextOverflow.ellipsis,
))),
],
controller: _controller,
)),
);
]))
]));
}
{% endhighlight %}
@ -369,17 +371,21 @@ final DataGridController _controller = DataGridController();
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: [
FlatButton(
TextButton(
child: Text('ScrollToCell'),
onPressed: () {
_controller.scrollToCell(15, 2,
_controller.scrollToCell(10, 1,
canAnimate: true,
rowPosition: DataGridScrollPosition.start,
columnPosition: DataGridScrollPosition.start);
},
),
Expanded( child:SfDataGrid(
}),
Expanded(
child: SfDataGrid(
source: _employeeDataSource,
defaultColumnWidth: 150,
gridLinesVisibility: GridLinesVisibility.both,
headerGridLinesVisibility: GridLinesVisibility.both,
controller: _controller,
columns: [
GridColumn(
columnName: 'id',
@ -417,10 +423,8 @@ final DataGridController _controller = DataGridController();
'Salary',
overflow: TextOverflow.ellipsis,
))),
],
controller: _controller,
)),
);
]))
]));
}
{% endhighlight %}
@ -441,14 +445,18 @@ final DataGridController _controller = DataGridController();
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: [
FlatButton(
TextButton(
child: Text('ScrollToVerticalOffset'),
onPressed: () {
_controller.scrollToVerticalOffset(500);
},
),
Expanded( child:SfDataGrid(
}),
Expanded(
child: SfDataGrid(
source: _employeeDataSource,
defaultColumnWidth: 150,
gridLinesVisibility: GridLinesVisibility.both,
headerGridLinesVisibility: GridLinesVisibility.both,
controller: _controller,
columns: [
GridColumn(
columnName: 'id',
@ -486,10 +494,8 @@ final DataGridController _controller = DataGridController();
'Salary',
overflow: TextOverflow.ellipsis,
))),
],
controller: _controller,
)),
);
]))
]));
}
{% endhighlight %}
@ -510,14 +516,18 @@ final DataGridController _controller = DataGridController();
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: [
FlatButton(
TextButton(
child: Text('ScrollToHorizontalOffset'),
onPressed: () {
_controller.scrollToHorizontalOffset(400);
},
),
Expanded( child:SfDataGrid(
}),
Expanded(
child: SfDataGrid(
source: _employeeDataSource,
defaultColumnWidth: 150,
gridLinesVisibility: GridLinesVisibility.both,
headerGridLinesVisibility: GridLinesVisibility.both,
controller: _controller,
columns: [
GridColumn(
columnName: 'id',
@ -555,10 +565,8 @@ final DataGridController _controller = DataGridController();
'Salary',
overflow: TextOverflow.ellipsis,
))),
],
controller: _controller,
)),
);
]))
]));
}
{% endhighlight %}
@ -575,21 +583,23 @@ The following example demonstrates how to load more rows when vertical scrolling
{% tabs %}
{% highlight Dart %}
late _EmployeeDataSource employeeDataSource;
import 'package:intl/intl.dart';
late EmployeeDataSource _employeeDataSource;
late ScrollController verticalScrollController;
void verticalListner() {
if (verticalScrollController.position.pixels >=
verticalScrollController.position.maxScrollExtent * (70 / 100)) {
employeeDataSource.loadMoreRows();
if (_verticalScrollController.position.pixels >=
_verticalScrollController.position.maxScrollExtent * (70 / 100)) {
_employeeDataSource.loadMoreRows();
}
}
@override
void initState() {
super.initState();
employeeDataSource = _EmployeeDataSource();
verticalScrollController = ScrollController()..addListener(verticalListner);
_employeeDataSource = _EmployeeDataSource();
_verticalScrollController = ScrollController()..addListener(verticalListner);
}
@override
@ -599,8 +609,8 @@ late ScrollController verticalScrollController;
title: Text('Flutter DataGrid Sample'),
),
body: SfDataGrid(
source: employeeDataSource,
verticalScrollController: verticalScrollController,
source: _employeeDataSource,
verticalScrollController: _verticalScrollController,
columnWidthMode: ColumnWidthMode.fill,
columns: _getColumns()),
);
@ -611,7 +621,7 @@ class _EmployeeDataSource extends DataGridSource {
loadEmployees(25);
}
List<_Employee> employees = [];
List<Employee> employees = [];
List<DataGridRow> dataGridRows = [];
@ -624,27 +634,18 @@ class _EmployeeDataSource extends DataGridSource {
Container(
padding: EdgeInsets.all(8),
alignment: Alignment.centerRight,
child: Text(
row.getCells()[0].value.toString(),
overflow: TextOverflow.ellipsis,
),
),
child: Text(row.getCells()[0].value.toString(),
overflow: TextOverflow.ellipsis)),
Container(
padding: EdgeInsets.all(8),
alignment: Alignment.centerRight,
child: Text(
row.getCells()[1].value.toString(),
overflow: TextOverflow.ellipsis,
),
),
child: Text(row.getCells()[1].value.toString(),
overflow: TextOverflow.ellipsis)),
Container(
padding: EdgeInsets.all(8),
alignment: Alignment.centerLeft,
child: Text(
row.getCells()[2].value.toString(),
overflow: TextOverflow.ellipsis,
),
),
child: Text(row.getCells()[2].value.toString(),
overflow: TextOverflow.ellipsis)),
Container(
padding: EdgeInsets.all(8),
alignment: Alignment.centerRight,
@ -652,9 +653,7 @@ class _EmployeeDataSource extends DataGridSource {
NumberFormat.currency(locale: 'en_US', symbol: '\$')
.format(row.getCells()[3].value)
.toString(),
overflow: TextOverflow.ellipsis,
),
),
overflow: TextOverflow.ellipsis))
]);
}
@ -664,7 +663,7 @@ class _EmployeeDataSource extends DataGridSource {
endIndex = startIndex + count;
for (int i = startIndex; i < endIndex; i++) {
var employee = _Employee(
var employee = Employee(
1000 + i,
1700 + i,
names[i < names.length ? i : random.nextInt(names.length - 1)],

Просмотреть файл

@ -89,9 +89,9 @@ Widget build(BuildContext context) {
overflow: TextOverflow.ellipsis,
))),
],
selectionMode: SelectionMode.single
navigationMode: GridNavigationMode.cell
)
selectionMode: SelectionMode.single,
navigationMode: GridNavigationMode.cell,
),
);
}
@ -150,9 +150,7 @@ Widget build(BuildContext context){
overflow: TextOverflow.ellipsis,
))),
],
selectionMode: SelectionMode.single
)
);
selectionMode: SelectionMode.single));
}
{% endhighlight %}
@ -212,9 +210,7 @@ Widget build(BuildContext context){
overflow: TextOverflow.ellipsis,
))),
],
selectionMode: SelectionMode.multiple
)
);
selectionMode: SelectionMode.multiple));
}
{% endhighlight %}
@ -274,9 +270,7 @@ Widget build(BuildContext context){
overflow: TextOverflow.ellipsis,
))),
],
selectionMode: SelectionMode.none
)
);
selectionMode: SelectionMode.none));
}
{% endhighlight %}
@ -298,19 +292,18 @@ final DataGridController _dataGridController = DataGridController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children:[
body: Column(children: [
TextButton(
child: Text('Get Selection Information'),
onPressed: () {
//SelectedIndex
var _selectedIndex = this._dataGridController.selectedIndex;
var _selectedIndex = _dataGridController.selectedIndex;
//SelectedRow
var _selectedRow = this._dataGridController.selectedRow;
var _selectedRow = _dataGridController.selectedRow;
//SelectedRows
var _selectedRows = this._dataGridController.selectedRows;
var _selectedRows = _dataGridController.selectedRows;
print(_selectedIndex);
print(_selectedRow);
@ -357,12 +350,9 @@ Widget build(BuildContext context){
overflow: TextOverflow.ellipsis,
))),
],
controller: this._dataGridController,
selectionMode: SelectionMode.multiple
))
]
)
);
controller: _dataGridController,
selectionMode: SelectionMode.multiple))
]));
}
{% endhighlight %}
@ -386,8 +376,7 @@ final DataGridController _dataGridController = DataGridController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children:[
body: Column(children: [
TextButton(
child: Text('Set Selection'),
onPressed: () {
@ -435,12 +424,9 @@ Widget build(BuildContext context){
overflow: TextOverflow.ellipsis,
))),
],
controller: this._dataGridController,
selectionMode: SelectionMode.single
))
]
)
);
controller: _dataGridController,
selectionMode: SelectionMode.single))
]));
}
{% endhighlight %}
@ -451,13 +437,21 @@ The following code example shows how to select a row using `selectedRow`,
{% tabs %}
{% highlight Dart %}
late EmployeeDataSource _employeeDataSource;
final DataGridController _dataGridController = DataGridController();
List<Employee> _employees = <Employee>[];
@override
void initState() {
super.initState();
_employees = getEmployeeData();
_employeeDataSource = EmployeeDataSource(employees: _employees);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children:[
body: Column(children: [
TextButton(
child: Text('Set Selection'),
onPressed: () {
@ -505,12 +499,9 @@ Widget build(BuildContext context){
overflow: TextOverflow.ellipsis,
))),
],
controller: this._dataGridController,
selectionMode: SelectionMode.single
))
]
)
);
controller: _dataGridController,
selectionMode: SelectionMode.single))
]));
}
{% endhighlight %}
@ -521,13 +512,21 @@ Multiple rows can be selected by adding collection of `DataGridRow` to `selecte
{% tabs %}
{% highlight Dart %}
late EmployeeDataSource _employeeDataSource;
final DataGridController _dataGridController = DataGridController();
List<Employee> _employees = <Employee>[];
@override
void initState() {
super.initState();
_employees = getEmployeeData();
_employeeDataSource = EmployeeDataSource(employees: _employees);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children:[
body: Column(children: [
TextButton(
child: Text('Set Selection'),
onPressed: () {
@ -579,12 +578,9 @@ Widget build(BuildContext context){
overflow: TextOverflow.ellipsis,
))),
],
controller: this._dataGridController,
selectionMode: SelectionMode.multiple
))
]
)
);
controller: _dataGridController,
selectionMode: SelectionMode.multiple))
]));
}
{% endhighlight %}
@ -604,12 +600,11 @@ final DataGridController _dataGridController = DataGridController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children:[
body: Column(children: [
TextButton(
child: Text('Get current cell'),
onPressed: () {
var _currentCell = this._dataGridController.currentCell;
var _currentCell = _dataGridController.currentCell;
print(_currentCell);
}),
Expanded(
@ -653,14 +648,10 @@ Widget build(BuildContext context){
overflow: TextOverflow.ellipsis,
))),
],
controller: this._dataGridController,
controller: _dataGridController,
selectionMode: SelectionMode.single,
navigationMode: GridNavigationMode.cell
)
)
]
)
);
navigationMode: GridNavigationMode.cell))
]));
}
{% endhighlight %}
@ -679,12 +670,11 @@ final DataGridController _dataGridController = DataGridController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children:[
body: Column(children: [
TextButton(
child: Text('Move current cell'),
onPressed: () {
this._dataGridController.moveCurrentCellTo(RowColumnIndex(6,4));
_dataGridController.moveCurrentCellTo(RowColumnIndex(6, 3));
}),
Expanded(
child: SfDataGrid(
@ -727,14 +717,10 @@ Widget build(BuildContext context){
overflow: TextOverflow.ellipsis,
))),
],
controller: this._dataGridController,
controller: _dataGridController,
selectionMode: SelectionMode.single,
navigationMode: GridNavigationMode.cell
)
)
]
)
);
navigationMode: GridNavigationMode.cell))
]));
}
{% endhighlight %}
@ -754,12 +740,11 @@ final DataGridController _dataGridController = DataGridController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children:[
body: Column(children: [
TextButton(
child: Text('Clear Selection'),
onPressed: () {
this._dataGridController.selectedIndex = -1;
_dataGridController.selectedIndex = -1;
//or
//this._dataGridController.selectedRow = null;
}),
@ -804,13 +789,9 @@ Widget build(BuildContext context){
overflow: TextOverflow.ellipsis,
))),
],
controller: this._dataGridController,
selectionMode: SelectionMode.single
)
)
]
)
);
controller: _dataGridController,
selectionMode: SelectionMode.single))
]));
}
{% endhighlight %}
@ -826,12 +807,11 @@ final DataGridController _dataGridController = DataGridController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children:[
body: Column(children: [
TextButton(
child: Text('Clear Selection'),
onPressed: () {
this._dataGridController.selectedRows = [];
_dataGridController.selectedRows = [];
}),
Expanded(
child: SfDataGrid(
@ -874,13 +854,9 @@ Widget build(BuildContext context){
overflow: TextOverflow.ellipsis,
))),
],
controller: this._dataGridController,
selectionMode: SelectionMode.multiple
)
)
]
)
);
controller: _dataGridController,
selectionMode: SelectionMode.multiple))
]));
}
{% endhighlight %}
@ -1046,6 +1022,16 @@ The following example shows how to cancel the selection when select a row which
{% tabs %}
{% highlight Dart %}
late EmployeeDataSource _employeeDataSource;
List<Employee> _employees = <Employee>[];
@override
void initState() {
super.initState();
_employees = getEmployeeData();
_employeeDataSource = EmployeeDataSource(employees: _employees);
}
@override
Widget build(BuildContext context) {
return Scaffold(
@ -1090,8 +1076,8 @@ Widget build(BuildContext context){
))),
],
selectionMode: SelectionMode.single,
onSelectionChanging: (List<DataGridRow> addedRows, List<DataGridRow> removedRows){
onSelectionChanging:
(List<DataGridRow> addedRows, List<DataGridRow> removedRows) {
final index = _employeeDataSource.dataGridRows.indexOf(addedRows.last);
Employee employee = _employees[index];
if (employee.designation == 'Manager') {
@ -1100,11 +1086,11 @@ Widget build(BuildContext context){
return true;
},
onSelectionChanged: (List<DataGridRow> addedRows, List<DataGridRow> removedRows){
onSelectionChanged:
(List<DataGridRow> addedRows, List<DataGridRow> removedRows) {
// apply your logics
},
)
);
));
}
{% endhighlight %}
@ -1168,7 +1154,8 @@ Widget build(BuildContext context) {
navigationMode: GridNavigationMode.cell,
onCurrentCellActivating: (RowColumnIndex currentRowColumnIndex,
RowColumnIndex previousRowColumnIndex) {
if (currentRowColumnIndex.rowIndex == 2 && currentRowColumnIndex.columnIndex == 3) {
if (currentRowColumnIndex.rowIndex == 2 &&
currentRowColumnIndex.columnIndex == 3) {
return false;
}
@ -1178,8 +1165,7 @@ Widget build(BuildContext context) {
RowColumnIndex previousRowColumnIndex) {
// apply your logics
},
)
);
));
}
{% endhighlight %}
@ -1251,9 +1237,7 @@ Widget build(BuildContext context) {
},
onCellSecondaryTap: (DataGridCellTapDetails details) {
print(details);
},
),
);
}));
}
{% endhighlight %}
@ -1313,12 +1297,10 @@ Widget build(BuildContext context){
],
selectionMode: SelectionMode.multiple,
selectionManager: _customSelectionManager,
)
);
));
}
class CustomSelectionManager extends RowSelectionManager {
@override
void handleKeyEvent(RawKeyEvent keyEvent) {
if (keyEvent.logicalKey == LogicalKeyboardKey.keyA) {
@ -1391,8 +1373,7 @@ Widget build(BuildContext context){
selectionMode: SelectionMode.multiple,
navigationMode: GridNavigationMode.cell,
selectionManager: _customSelectionManager,
))
);
)));
}
class CustomSelectionManager extends RowSelectionManager {
@ -1440,7 +1421,7 @@ late EmployeeDataSource _employeeDataSource;
@override
void initState() {
super.initState();
employeeDataSource = EmployeeDataSource(_dataGridController);
_employeeDataSource = EmployeeDataSource(_dataGridController);
}
@override
@ -1489,8 +1470,7 @@ Widget build(BuildContext context) {
))),
],
selectionMode: SelectionMode.multiple,
))
);
)));
}
class EmployeeDataSource extends DataGridSource {
@ -1566,10 +1546,7 @@ Widget build(BuildContext context){
body: SfDataGridTheme(
data: SfDataGridThemeData(
currentCellStyle: DataGridCurrentCellStyle(
borderWidth: 2,
borderColor: Colors.pinkAccent
)
),
borderWidth: 2, borderColor: Colors.pinkAccent)),
child: SfDataGrid(
source: _employeeDataSource,
columns: [
@ -1612,8 +1589,7 @@ Widget build(BuildContext context){
],
selectionMode: SelectionMode.multiple,
navigationMode: GridNavigationMode.cell,
))
);
)));
}
{% endhighlight %}

Просмотреть файл

@ -26,6 +26,14 @@ The `SortColumnDetails` object holds the following two properties:
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
late EmployeeDataSource _employeeDataSource;
List<Employee> _employees = <Employee>[];
@override
void initState() {
super.initState();
_employees = getEmployeeData();
_employeeDataSource = EmployeeDataSource(employees: _employees);
}
@override
Widget build(BuildContext context) {
@ -98,8 +106,6 @@ To apply sorting for multiple columns in web and desktop, you can click the colu
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
late EmployeeDataSource _employeeDataSource;
@override
Widget build(BuildContext context) {
return Scaffold(
@ -162,8 +168,6 @@ In addition to sort the data in ascending/descending order, the SfDataGrid unsor
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
late EmployeeDataSource _employeeDataSource;
@override
Widget build(BuildContext context) {
return Scaffold(
@ -227,8 +231,6 @@ By default, column gets sorted when column header clicked. This behavior can be
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
late EmployeeDataSource _employeeDataSource;
@override
Widget build(BuildContext context) {
return Scaffold(
@ -289,8 +291,6 @@ The datagrid provides support the sequence numbers to display the sorted columns
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
late EmployeeDataSource _employeeDataSource;
@override
Widget build(BuildContext context) {
return Scaffold(
@ -354,8 +354,6 @@ The data grid disables sorting for an individual column by setting the [GridColu
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
late EmployeeDataSource _employeeDataSource;
@override
Widget build(BuildContext context) {
return Scaffold(
@ -419,8 +417,6 @@ The following code describes how to change sort icon color by using [SfDataGridT
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
import 'package:syncfusion_flutter_core/theme.dart';
late EmployeeDataSource _employeeDataSource;
@override
Widget build(BuildContext context) {
return Scaffold(

Просмотреть файл

@ -19,8 +19,6 @@ Each [StackedHeaderRow](https://pub.dev/documentation/syncfusion_flutter_datagri
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
late ProductDataSource _productDataSource;
@override
Widget build(BuildContext context) {
return SfDataGrid(
@ -96,8 +94,6 @@ You can provide multiple stacked headers to the datagrid by adding the multiple
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
late ProductDataSource _productDataSource;
@override
Widget build(BuildContext context) {
return SfDataGrid(
@ -182,8 +178,6 @@ You can also change the row height of stacked header row and column header row b
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
late ProductDataSource _productDataSource;
@override
Widget build(BuildContext context) {
return SfDataGrid(

Просмотреть файл

@ -18,6 +18,7 @@ Change the header background color by using [SfDataGridThemeData.headerColor](ht
{% tabs %}
{% highlight Dart %}
@override
Widget build(BuildContext context) {
return Scaffold(
@ -25,10 +26,9 @@ Change the header background color by using [SfDataGridThemeData.headerColor](ht
title: const Text('Syncfusion Flutter DataGrid'),
),
body: SfDataGridTheme(
data: SfDataGridThemeData(
headerColor: const Color(0xff009889)),
data: SfDataGridThemeData(headerColor: const Color(0xff009889)),
child: SfDataGrid(
source: employeeDataSource,
source: _employeeDataSource,
columnWidthMode: ColumnWidthMode.fill,
columns: <GridColumn>[
GridColumn(
@ -60,10 +60,7 @@ Change the header background color by using [SfDataGridThemeData.headerColor](ht
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text('Salary'))),
],
),
),
);
])));
}
{% endhighlight %}
{% endtabs %}
@ -74,8 +71,11 @@ Change the header background color by using [SfDataGridThemeData.headerColor](ht
Change the color of the header on hovering by using the [headerHoverColor]( https://pub.dev/documentation/syncfusion_flutter_core/latest/theme/SfDataGridThemeData/headerHoverColor.html) property.
N> This is applicable for web and desktop platforms.
{% tabs %}
{% highlight Dart %}
@override
Widget build(BuildContext context) {
return Scaffold(
@ -85,7 +85,7 @@ Change the color of the header on hovering by using the [headerHoverColor]( http
body: SfDataGridTheme(
data: SfDataGridThemeData(headerHoverColor: Colors.yellow),
child: SfDataGrid(
source: employeeDataSource,
source: _employeeDataSource,
columnWidthMode: ColumnWidthMode.fill,
columns: <GridColumn>[
GridColumn(
@ -104,7 +104,6 @@ Change the color of the header on hovering by using the [headerHoverColor]( http
child: Text('Name'))),
GridColumn(
columnName: 'designation',
width: 100,
label: Container(
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
@ -118,10 +117,7 @@ Change the color of the header on hovering by using the [headerHoverColor]( http
padding: EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text('Salary'))),
],
),
),
);
])));
}
{% endhighlight %}
{% endtabs %}
@ -141,9 +137,7 @@ Widget build(BuildContext context) {
body: SfDataGridTheme(
data: SfDataGridThemeData(
gridLineColor: Colors.amber, gridLineStrokeWidth: 3.0),
child: SfDataGrid(
source: _employeeDataSource,
columns: <GridColumn>[
child: SfDataGrid(source: _employeeDataSource, columns: <GridColumn>[
GridColumn(
columnName: 'id',
label: Container(
@ -180,10 +174,7 @@ Widget build(BuildContext context) {
'Salary',
overflow: TextOverflow.ellipsis,
))),
],
),
),
);
])));
}
{% endhighlight %}
@ -267,6 +258,8 @@ Widget build(BuildContext context) {
By default, the row highlighting on hovering support is enabled for the web and desktop platforms. Disable the row highlighting by setting the [SfDataGrid.highlightRowOnHover](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/highlightRowOnHover.html) property to `false`.
N> This is applicable for web and desktop platforms.
{% tabs %}
{% highlight Dart %}
@ -305,9 +298,7 @@ By default, the row highlighting on hovering support is enabled for the web and
alignment: Alignment.centerRight,
child: Text('Salary'),
)),
],
),
);
]));
}
{% endhighlight %}
@ -330,9 +321,7 @@ Change the row highlighting color and text style by using the [SfDataGridThemeDa
color: Colors.red,
fontSize: 14,
)),
child: SfDataGrid(
source: _employeeDataSource,
columns: <GridColumn>[
child: SfDataGrid(source: _employeeDataSource, columns: <GridColumn>[
GridColumn(
columnName: 'id',
label: Container(
@ -361,10 +350,7 @@ Change the row highlighting color and text style by using the [SfDataGridThemeDa
alignment: Alignment.centerRight,
child: Text('Salary'),
)),
],
),
),
);
])));
}
{% endhighlight %}
{% endtabs %}

Просмотреть файл

@ -20,12 +20,22 @@ The Flutter DataTable enables you to load the desired widget behind the swiped r
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
late EmployeeDataSource _employeeDataSource;
List<Employee> _employees = <Employee>[];
@override
void initState() {
super.initState();
_employees = getEmployeeData();
_employeeDataSource = EmployeeDataSource(employees: _employees);
}
@override
Widget build(BuildContext context) {
return SfDataGrid(
allowSwiping: true,
swipeMaxOffset: 100.0,
source: employeeDataSource,
source: _employeeDataSource,
startSwipeActionsBuilder:
(BuildContext context, DataGridRow row, int rowIndex) {
return GestureDetector(
@ -38,30 +48,26 @@ Widget build(BuildContext context) {
DataGridCell(value: 'Developer', columnName: 'designation'),
DataGridCell(value: 20000, columnName: 'salary')
]));
_employeeDataSource.updateDataSource();
_employeeDataSource.updateDataGridSource();
},
child: Container(
color: Colors.greenAccent,
child: Center(
child: Icon(Icons.add),
),
),
);
)));
},
endSwipeActionsBuilder:
(BuildContext context, DataGridRow row, int rowIndex) {
return GestureDetector(
onTap: () {
_employeeDataSource.dataGridRows.removeAt(rowIndex);
_employeeDataSource.updateDataSource();
_employeeDataSource.updateDataGridSource();
},
child: Container(
color: Colors.redAccent,
child: Center(
child: Icon(Icons.delete),
),
),
);
)));
},
columns: <GridColumn>[
GridColumn(
@ -104,6 +110,47 @@ Widget build(BuildContext context) {
);
}
class EmployeeDataSource extends DataGridSource {
EmployeeDataSource({required List<Employee> employees}) {
dataGridRows = employees
.map<DataGridRow>((dataGridRow) => DataGridRow(cells: [
DataGridCell<int>(columnName: 'id', value: dataGridRow.id),
DataGridCell<String>(columnName: 'name', value: dataGridRow.name),
DataGridCell<String>(
columnName: 'designation', value: dataGridRow.designation),
DataGridCell<int>(
columnName: 'salary', value: dataGridRow.salary),
]))
.toList();
}
List<DataGridRow> dataGridRows = [];
@override
List<DataGridRow> get rows => dataGridRows;
@override
DataGridRowAdapter? buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row.getCells().map<Widget>((dataGridCell) {
return Container(
alignment: (dataGridCell.columnName == 'id' ||
dataGridCell.columnName == 'salary')
? Alignment.centerRight
: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Text(
dataGridCell.value.toString(),
overflow: TextOverflow.ellipsis,
));
}).toList());
}
void updateDataGridSource() {
notifyListeners();
}
}
{% endhighlight %}
{% endtabs %}
@ -134,27 +181,27 @@ You can perform customized swipe functionality using the swiping callbacks. The
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
late EmployeeDataSource _employeeDataSource;
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
return SfDataGrid(
allowSwiping: true,
swipeMaxOffset: constraints.maxWidth,
source: employeeDataSource,
source: _employeeDataSource,
startSwipeActionsBuilder:
(BuildContext context, DataGridRow row, int rowIndex) {
return GestureDetector(
onTap: () {
_employeeDataSource.dataGridRows.removeAt(rowIndex);
_employeeDataSource.updateDataSource();
_employeeDataSource.updateDataGridSource();
},
child: Container(
color: Colors.green,
padding: EdgeInsets.only(left: 30.0),
alignment: Alignment.centerLeft,
child: Text('Delete', style: TextStyle(color: Colors.white)),
),
);
child: Text('Delete', style: TextStyle(color: Colors.white))));
},
onSwipeUpdate: (details) {
isReachedCenter =
@ -162,10 +209,9 @@ Widget build(BuildContext context) {
return true;
},
onSwipeEnd: (details) async {
if (isReachedCenter &&
_employeeDataSource.dataGridRows.isNotEmpty) {
if (isReachedCenter && _employeeDataSource.dataGridRows.isNotEmpty) {
_employeeDataSource.dataGridRows.removeAt(details.rowIndex);
_employeeDataSource.updateDataSource();
_employeeDataSource.updateDataGridSource();
isReachedCenter = false;
}
},