Skip to content

Commit 1788105

Browse files
FarjanaParveenFarjanaParveen
authored
Merge pull request #1 from SyncfusionExamples/900865
How to load data into a DataGrid for each page using JSON.
2 parents 6230282 + 7c50fa5 commit 1788105

File tree

124 files changed

+4859
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

124 files changed

+4859
-2
lines changed

‎.gitignore‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Miscellaneous
2+
*.class
3+
*.log
4+
*.pyc
5+
*.swp
6+
.DS_Store
7+
.atom/
8+
.buildlog/
9+
.history
10+
.svn/
11+
migrate_working_dir/
12+
13+
# IntelliJ related
14+
*.iml
15+
*.ipr
16+
*.iws
17+
.idea/
18+
19+
# The .vscode folder contains launch configuration and tasks you configure in
20+
# VS Code which you may wish to be included in version control, so this line
21+
# is commented out by default.
22+
#.vscode/
23+
24+
# Flutter/Dart/Pub related
25+
**/doc/api/
26+
**/ios/Flutter/.last_build_id
27+
.dart_tool/
28+
.flutter-plugins
29+
.flutter-plugins-dependencies
30+
.pub-cache/
31+
.pub/
32+
/build/
33+
34+
# Symbolication related
35+
app.*.symbols
36+
37+
# Obfuscation related
38+
app.*.map.json
39+
40+
# Android Studio will place build artifacts here
41+
/android/app/debug
42+
/android/app/profile
43+
/android/app/release

‎README.md‎

Lines changed: 101 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,101 @@
1-
# How-to-load-data-into-a-DataGrid-for-each-page-using-JSON
2-
How to load data into a DataGrid for each page using JSON
1+
# How to load data into a DataGrid for each page using JSON in Flutter DataTable (SfDataGrid).
2+
In this article, we will show you how to load data into a DataGrid for each page using JSON in [Flutter DataTable](https://www.syncfusion.com/flutter-widgets/flutter-datagrid).
3+
4+
## STEP 1:
5+
6+
Refer to this KB [link](https://support.syncfusion.com/kb/article/10959/how-to-populate-flutter-datatable-datagrid-with-json-api) to populate Flutter DataTable (DataGrid) with JSON API.
7+
8+
## STEP 2:
9+
10+
Initialize the [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) and [SfDataPager](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataPager-class.html) widgets with all the required properties. Instead of supplying the entire data to the DataGrid, provide only the data corresponding to the current page to the [DataGridSource](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource-class.html).
11+
12+
```dart
13+
Future generateProductList() async {
14+
// Here we have get the entire data asynchronously.
15+
var response = await http.get(Uri.parse(
16+
'https://ej2services.syncfusion.com/production/web-services/api/Orders?'));
17+
var list = json.decode(response.body).cast<Map<String, dynamic>>();
18+
productlist =
19+
await list.map<Product>((json) => Product.fromJson(json)).toList();
20+
jsonDataGridSource =
21+
JsonDataGridSource(productlist.getRange(0, rowsPerPage).toList());
22+
23+
return productlist;
24+
}
25+
26+
@override
27+
Widget build(BuildContext context) {
28+
return Scaffold(
29+
appBar: AppBar(
30+
title: const Text('Flutter DataGrid Sample'),
31+
),
32+
body: FutureBuilder(
33+
future: generateProductList(),
34+
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
35+
return snapshot.hasData
36+
? LayoutBuilder(builder: (context, constraints) {
37+
return Column(children: [
38+
SizedBox(
39+
height: constraints.maxHeight - 60,
40+
width: constraints.maxWidth,
41+
child: buildDataGrid()),
42+
SizedBox(
43+
height: 60,
44+
width: constraints.maxWidth,
45+
child: SfDataPager(
46+
pageCount: (productlist.length / rowsPerPage)
47+
.ceil()
48+
.toDouble(),
49+
delegate: jsonDataGridSource,
50+
availableRowsPerPage: const [10, 20, 30],
51+
onRowsPerPageChanged: (int? rowsPerPages) {
52+
setState(() {
53+
rowsPerPage = rowsPerPages!;
54+
jsonDataGridSource.updateDataGriDataSource();
55+
});
56+
},
57+
),
58+
)
59+
]);
60+
})
61+
: const Center(
62+
child: CircularProgressIndicator(strokeWidth: 3));
63+
}));
64+
}
65+
66+
Widget buildDataGrid() {
67+
return SfDataGrid(
68+
columns: getColumns(),
69+
source: jsonDataGridSource,
70+
columnWidthMode: ColumnWidthMode.fill);
71+
}
72+
```
73+
74+
## STEP 3:
75+
76+
Then, load the relevant data for the specific page within the [handlePageChange](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/handlePageChange.html) method. This method is invoked whenever the page is changed through the data pager.
77+
78+
```dart
79+
class JsonDataGridSource extends DataGridSource {
80+
...
81+
82+
@override
83+
Future<bool> handlePageChange(int oldPageIndex, int newPageIndex) async {
84+
int startIndex = newPageIndex * rowsPerPage;
85+
int endIndex = startIndex + rowsPerPage;
86+
if (endIndex > productlist.length) {
87+
endIndex = productlist.length;
88+
}
89+
if (startIndex < productlist.length && endIndex <= productlist.length) {
90+
buildDataGridRow(productlist.getRange(startIndex, endIndex).toList());
91+
notifyListeners();
92+
} else {
93+
dataGridRows = [];
94+
}
95+
96+
return true;
97+
}
98+
}
99+
```
100+
101+
You can download this example on [GitHub](https://github.com/SyncfusionExamples/How-to-load-data-into-a-DataGrid-for-each-page-using-JSON).

‎android/.gitignore‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
gradle-wrapper.jar
2+
/.gradle
3+
/captures/
4+
/gradlew
5+
/gradlew.bat
6+
/local.properties
7+
GeneratedPluginRegistrant.java
8+
9+
# Remember to never publicly share your keystore.
10+
# See https://flutter.dev/to/reference-keystore
11+
key.properties
12+
**/*.keystore
13+
**/*.jks

‎android/app/build.gradle‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
plugins {
2+
id "com.android.application"
3+
id "kotlin-android"
4+
// The Flutter Gradle Plugin must be applied after the Android and Kotlin Gradle plugins.
5+
id "dev.flutter.flutter-gradle-plugin"
6+
}
7+
8+
android {
9+
namespace = "com.example.flutter_application"
10+
compileSdk = flutter.compileSdkVersion
11+
ndkVersion = flutter.ndkVersion
12+
13+
compileOptions {
14+
sourceCompatibility = JavaVersion.VERSION_1_8
15+
targetCompatibility = JavaVersion.VERSION_1_8
16+
}
17+
18+
kotlinOptions {
19+
jvmTarget = JavaVersion.VERSION_1_8
20+
}
21+
22+
defaultConfig {
23+
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
24+
applicationId = "com.example.flutter_application"
25+
// You can update the following values to match your application needs.
26+
// For more information, see: https://flutter.dev/to/review-gradle-config.
27+
minSdk = flutter.minSdkVersion
28+
targetSdk = flutter.targetSdkVersion
29+
versionCode = flutter.versionCode
30+
versionName = flutter.versionName
31+
}
32+
33+
buildTypes {
34+
release {
35+
// TODO: Add your own signing config for the release build.
36+
// Signing with the debug keys for now, so `flutter run --release` works.
37+
signingConfig = signingConfigs.debug
38+
}
39+
}
40+
}
41+
42+
flutter {
43+
source = "../.."
44+
}

‎android/app/src/debug/AndroidManifest.xml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
2+
<!-- The INTERNET permission is required for development. Specifically,
3+
the Flutter tool needs it to communicate with the running application
4+
to allow setting breakpoints, to provide hot reload, etc.
5+
-->
6+
<uses-permission android:name="android.permission.INTERNET"/>
7+
</manifest>

‎android/app/src/main/AndroidManifest.xml‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
2+
<application
3+
android:label="flutter_application"
4+
android:name="${applicationName}"
5+
android:icon="@mipmap/ic_launcher">
6+
<activity
7+
android:name=".MainActivity"
8+
android:exported="true"
9+
android:launchMode="singleTop"
10+
android:taskAffinity=""
11+
android:theme="@style/LaunchTheme"
12+
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
13+
android:hardwareAccelerated="true"
14+
android:windowSoftInputMode="adjustResize">
15+
<!-- Specifies an Android theme to apply to this Activity as soon as
16+
the Android process has started. This theme is visible to the user
17+
while the Flutter UI initializes. After that, this theme continues
18+
to determine the Window background behind the Flutter UI. -->
19+
<meta-data
20+
android:name="io.flutter.embedding.android.NormalTheme"
21+
android:resource="@style/NormalTheme"
22+
/>
23+
<intent-filter>
24+
<action android:name="android.intent.action.MAIN"/>
25+
<category android:name="android.intent.category.LAUNCHER"/>
26+
</intent-filter>
27+
</activity>
28+
<!-- Don't delete the meta-data below.
29+
This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
30+
<meta-data
31+
android:name="flutterEmbedding"
32+
android:value="2" />
33+
</application>
34+
<!-- Required to query activities that can process text, see:
35+
https://developer.android.com/training/package-visibility and
36+
https://developer.android.com/reference/android/content/Intent#ACTION_PROCESS_TEXT.
37+
38+
In particular, this is used by the Flutter engine in io.flutter.plugin.text.ProcessTextPlugin. -->
39+
<queries>
40+
<intent>
41+
<action android:name="android.intent.action.PROCESS_TEXT"/>
42+
<data android:mimeType="text/plain"/>
43+
</intent>
44+
</queries>
45+
</manifest>

‎android/app/src/main/kotlin/com/example/flutter_application/MainActivity.kt‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
package com.example.flutter_application
2+
3+
import io.flutter.embedding.android.FlutterActivity
4+
5+
class MainActivity: FlutterActivity()

‎android/app/src/main/res/drawable-v21/launch_background.xml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!-- Modify this file to customize your launch splash screen -->
3+
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
4+
<item android:drawable="?android:colorBackground" />
5+
6+
<!-- You can insert your own image assets here -->
7+
<!-- <item>
8+
<bitmap
9+
android:gravity="center"
10+
android:src="@mipmap/launch_image" />
11+
</item> -->
12+
</layer-list>

‎android/app/src/main/res/drawable/launch_background.xml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!-- Modify this file to customize your launch splash screen -->
3+
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
4+
<item android:drawable="@android:color/white" />
5+
6+
<!-- You can insert your own image assets here -->
7+
<!-- <item>
8+
<bitmap
9+
android:gravity="center"
10+
android:src="@mipmap/launch_image" />
11+
</item> -->
12+
</layer-list>

‎android/app/src/main/res/mipmap-hdpi/ic_launcher.png‎

544 Bytes
Loading

0 commit comments

Comments
 (0)