Latest source merged from Syncfusion
This commit is contained in:
pipeline
Родитель
8a270776ae
Коммит
12e6cc03e8
|
|
@ -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,12 +311,12 @@ The [DataGridSource.onCellBeginEdit](https://pub.dev/documentation/syncfusion_fl
|
|||
|
||||
class EmployeeDataSource extends DataGridSource {
|
||||
@override
|
||||
bool onCellBeginEdit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex,
|
||||
GridColumn column) {
|
||||
if(column.columnName == 'id'){
|
||||
bool onCellBeginEdit(
|
||||
DataGridRow dataGridRow, RowColumnIndex rowColumnIndex, GridColumn column) {
|
||||
if (column.columnName == 'id') {
|
||||
// Return false, to restrict entering into the editing.
|
||||
return false;
|
||||
}else{
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 %}
|
||||
|
|
@ -548,19 +502,17 @@ The [SfDataGrid.endEdit](https://pub.dev/documentation/syncfusion_flutter_datagr
|
|||
{% tabs %}
|
||||
{% highlight dart %}
|
||||
|
||||
final DataGridController _dataGridControlle r = DataGridController();
|
||||
final DataGridController _dataGridController = 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{
|
||||
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 = [];
|
||||
} else {
|
||||
_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;
|
||||
|
|
@ -508,10 +296,10 @@ Widget buildStack(BoxConstraints constraints) {
|
|||
);
|
||||
}
|
||||
|
||||
class OrderInfoDataSource extends DataGridSource{
|
||||
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 = [];
|
||||
} else {
|
||||
_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,40 +401,37 @@ 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: [
|
||||
Widget build(BuildContext context) {
|
||||
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 %}
|
||||
{% endtabs %}
|
||||
|
|
@ -713,7 +499,7 @@ Widget build(BuildContext context) {
|
|||
),
|
||||
child: SfDataPager(
|
||||
delegate: _orderInfoDataSource,
|
||||
pageCount: orders.length / rowsPerPage,
|
||||
pageCount: _orders.length / _rowsPerPage,
|
||||
direction: Axis.horizontal,
|
||||
),
|
||||
),
|
||||
|
|
@ -732,8 +518,8 @@ You can change the number of visible items i.e. page buttons in view by using th
|
|||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Flutter DataGrid Sample'),
|
||||
|
|
@ -742,23 +528,22 @@ 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,
|
||||
),
|
||||
)
|
||||
],
|
||||
);
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -769,21 +554,21 @@ You can load any widget to page button by using [SfDataPager.pageItemBuilder](ht
|
|||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
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,17 +585,13 @@ 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 %}
|
||||
{% endtabs %}
|
||||
|
||||
|
|
|
|||
|
|
@ -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].id = 1010;
|
||||
_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].id = 1010;
|
||||
_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,12 +833,9 @@ Widget build(BuildContext context) {
|
|||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
]))
|
||||
]));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@ N> The default value of `isScrollbarAlwaysShown` is false.
|
|||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
|
|
@ -63,10 +63,8 @@ N> The default value of `isScrollbarAlwaysShown` is false.
|
|||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
]));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -82,8 +80,8 @@ The following example shows how to disable the horizontal and vertical scrolling
|
|||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
|
|
@ -126,10 +124,8 @@ The following example shows how to disable the horizontal and vertical scrolling
|
|||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
]));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -149,18 +145,22 @@ N> The default value of `canAnimate` is `false`.
|
|||
|
||||
final DataGridController _controller = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@override
|
||||
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,11 +198,9 @@ final DataGridController _controller = DataGridController();
|
|||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
]))
|
||||
]));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -220,18 +218,22 @@ N> The default value of `canAnimate` is `false`.
|
|||
|
||||
final DataGridController _controller = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@override
|
||||
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,11 +271,9 @@ final DataGridController _controller = DataGridController();
|
|||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
]))
|
||||
]));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -289,18 +289,22 @@ N> The default value of `canAnimate` is `false`.
|
|||
|
||||
final DataGridController _controller = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@override
|
||||
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,11 +342,9 @@ final DataGridController _controller = DataGridController();
|
|||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
]))
|
||||
]));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -365,21 +367,25 @@ N> The default value of `DataGridScrollPosition` is `Start`.
|
|||
|
||||
final DataGridController _controller = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@override
|
||||
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,11 +423,9 @@ final DataGridController _controller = DataGridController();
|
|||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
]))
|
||||
]));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -437,18 +441,22 @@ N> The default value of `canAnimate` is `false`.
|
|||
|
||||
final DataGridController _controller = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@override
|
||||
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,11 +494,9 @@ final DataGridController _controller = DataGridController();
|
|||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
]))
|
||||
]));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -506,18 +512,22 @@ N> The default value of `canAnimate` is `false`.
|
|||
|
||||
final DataGridController _controller = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@override
|
||||
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,11 +565,9 @@ final DataGridController _controller = DataGridController();
|
|||
'Salary',
|
||||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
controller: _controller,
|
||||
)),
|
||||
);
|
||||
}
|
||||
]))
|
||||
]));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -575,43 +583,45 @@ 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();
|
||||
}
|
||||
void verticalListner() {
|
||||
if (_verticalScrollController.position.pixels >=
|
||||
_verticalScrollController.position.maxScrollExtent * (70 / 100)) {
|
||||
_employeeDataSource.loadMoreRows();
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
employeeDataSource = _EmployeeDataSource();
|
||||
verticalScrollController = ScrollController()..addListener(verticalListner);
|
||||
}
|
||||
_employeeDataSource = _EmployeeDataSource();
|
||||
_verticalScrollController = ScrollController()..addListener(verticalListner);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text('Flutter DataGrid Sample'),
|
||||
),
|
||||
body: SfDataGrid(
|
||||
source: employeeDataSource,
|
||||
verticalScrollController: verticalScrollController,
|
||||
source: _employeeDataSource,
|
||||
verticalScrollController: _verticalScrollController,
|
||||
columnWidthMode: ColumnWidthMode.fill,
|
||||
columns: _getColumns()),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _EmployeeDataSource extends DataGridSource {
|
||||
_EmployeeDataSource() {
|
||||
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,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -108,7 +108,7 @@ It allows you to select only one row. For example, you have selected a row. Now
|
|||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context){
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
|
|
@ -150,9 +150,7 @@ Widget build(BuildContext context){
|
|||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
selectionMode: SelectionMode.single
|
||||
)
|
||||
);
|
||||
selectionMode: SelectionMode.single));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
@ -170,7 +168,7 @@ While using `multiple`, you can select multiple rows by pressing the key modifie
|
|||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context){
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
|
|
@ -212,9 +210,7 @@ Widget build(BuildContext context){
|
|||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
selectionMode: SelectionMode.multiple
|
||||
)
|
||||
);
|
||||
selectionMode: SelectionMode.multiple));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
@ -232,7 +228,7 @@ The selection can be disabled by setting the `selectionMode` property as `none`.
|
|||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context){
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
|
|
@ -274,9 +270,7 @@ Widget build(BuildContext context){
|
|||
overflow: TextOverflow.ellipsis,
|
||||
))),
|
||||
],
|
||||
selectionMode: SelectionMode.none
|
||||
)
|
||||
);
|
||||
selectionMode: SelectionMode.none));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
|
|
@ -296,21 +290,20 @@ You can get the information of selected rows by using [controller](https://pub.d
|
|||
final DataGridController _dataGridController = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context){
|
||||
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 %}
|
||||
|
|
@ -384,10 +374,9 @@ The following code example shows how to select a row using `selectedIndex`,
|
|||
final DataGridController _dataGridController = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context){
|
||||
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
|
||||
Widget build(BuildContext context){
|
||||
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
|
||||
Widget build(BuildContext context){
|
||||
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 %}
|
||||
|
|
@ -602,14 +598,13 @@ The current cell information such as row index, column index can be retrieved us
|
|||
final DataGridController _dataGridController = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context){
|
||||
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 %}
|
||||
|
|
@ -677,14 +668,13 @@ The CurrentCell can be moved to a particular cell by using the [moveCurrentCellT
|
|||
final DataGridController _dataGridController = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context){
|
||||
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 %}
|
||||
|
|
@ -752,14 +738,13 @@ The following code example shows how to clear selection when `selectionMode` pro
|
|||
final DataGridController _dataGridController = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context){
|
||||
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 %}
|
||||
|
|
@ -824,14 +805,13 @@ The following code example shows how to clear selection when `selectionMode` pro
|
|||
final DataGridController _dataGridController = DataGridController();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context){
|
||||
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,8 +1022,18 @@ 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
|
||||
Widget build(BuildContext context){
|
||||
void initState() {
|
||||
super.initState();
|
||||
_employees = getEmployeeData();
|
||||
_employeeDataSource = EmployeeDataSource(employees: _employees);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
|
|
@ -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 %}
|
||||
|
|
@ -1269,7 +1253,7 @@ To perform custom actions apart from the functionalities mentioned in the above
|
|||
final CustomSelectionManager _customSelectionManager = CustomSelectionManager();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context){
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
source: _employeeDataSource,
|
||||
|
|
@ -1313,16 +1297,14 @@ Widget build(BuildContext context){
|
|||
],
|
||||
selectionMode: SelectionMode.multiple,
|
||||
selectionManager: _customSelectionManager,
|
||||
)
|
||||
);
|
||||
));
|
||||
}
|
||||
|
||||
class CustomSelectionManager extends RowSelectionManager{
|
||||
|
||||
class CustomSelectionManager extends RowSelectionManager {
|
||||
@override
|
||||
void handleKeyEvent(RawKeyEvent keyEvent) {
|
||||
if(keyEvent.logicalKey == LogicalKeyboardKey.keyA){
|
||||
if(keyEvent.isControlPressed){
|
||||
if (keyEvent.logicalKey == LogicalKeyboardKey.keyA) {
|
||||
if (keyEvent.isControlPressed) {
|
||||
//apply your logic
|
||||
return;
|
||||
}
|
||||
|
|
@ -1345,7 +1327,7 @@ When pressing the <kbd>Enter</kbd> key, the current cell will be moved to the ne
|
|||
final CustomSelectionManager _customSelectionManager = CustomSelectionManager();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context){
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
home: Scaffold(
|
||||
body: SfDataGrid(
|
||||
|
|
@ -1391,14 +1373,13 @@ Widget build(BuildContext context){
|
|||
selectionMode: SelectionMode.multiple,
|
||||
navigationMode: GridNavigationMode.cell,
|
||||
selectionManager: _customSelectionManager,
|
||||
))
|
||||
);
|
||||
)));
|
||||
}
|
||||
|
||||
class CustomSelectionManager extends RowSelectionManager{
|
||||
class CustomSelectionManager extends RowSelectionManager {
|
||||
@override
|
||||
void handleKeyEvent(RawKeyEvent keyEvent) {
|
||||
if(keyEvent.logicalKey == LogicalKeyboardKey.enter){
|
||||
if (keyEvent.logicalKey == LogicalKeyboardKey.enter) {
|
||||
//apply your logic
|
||||
return;
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
@ -1561,15 +1541,12 @@ import 'package:syncfusion_flutter_datagrid/datagrid.dart';
|
|||
import 'package:syncfusion_flutter_core/theme.dart';
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context){
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
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,17 +18,17 @@ Change the header background color by using [SfDataGridThemeData.headerColor](ht
|
|||
|
||||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
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,11 +60,8 @@ Change the header background color by using [SfDataGridThemeData.headerColor](ht
|
|||
padding: EdgeInsets.all(8.0),
|
||||
alignment: Alignment.center,
|
||||
child: Text('Salary'))),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
])));
|
||||
}
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
||||
|
|
@ -74,10 +71,13 @@ 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) {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Syncfusion Flutter DataGrid'),
|
||||
|
|
@ -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,11 +117,8 @@ 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,11 +258,13 @@ 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 %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGrid(
|
||||
highlightRowOnHover: false,
|
||||
|
|
@ -305,10 +298,8 @@ By default, the row highlighting on hovering support is enabled for the web and
|
|||
alignment: Alignment.centerRight,
|
||||
child: Text('Salary'),
|
||||
)),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
]));
|
||||
}
|
||||
|
||||
{% endhighlight %}
|
||||
{% endtabs %}
|
||||
|
|
@ -320,8 +311,8 @@ Change the row highlighting color and text style by using the [SfDataGridThemeDa
|
|||
{% tabs %}
|
||||
{% highlight Dart %}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: SfDataGridTheme(
|
||||
data: SfDataGridThemeData(
|
||||
|
|
@ -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,11 +350,8 @@ 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;
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче