Create Grid Based on Dynamic JSON Or Dynamic table /rows/columns

[MalikSamiAwan]

Is there any way to create grid dynamically based on json In my case the resultant json could be a single json value or multiple it is dynamic Based on that i have to create a dynamic grid

This is the exact issue i am having but the sample code in the issue is outdated and is not working anymore https://github.com/syncfusion/flutter-widgets/issues/143

Here is my code i have took the json from above support team example:

`import 'dart:convert';

import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:syncfusion_flutter_datagrid/datagrid.dart';

import '../helpers/inputField.dart';

class ResultGridDynamicJson extends StatefulWidget { const ResultGridDynamicJson({Key? key}) : super(key: key);

@override State createState() => _ResultGridDynamicJsonState(); }

class _ResultGridDynamicJsonState extends State {

late var _employeeDataGridSource;

Future<List> generateProductList() async {

final List<dynamic> employeesData = [];

final String responseBody =
await rootBundle.loadString("assets/product_data.json");
pprint('Json = ${responseBody}');

var data = await json.decode(responseBody);

data = data['payloadJson']['DETAIL'];
pprint('Detail = ${data}');

for (final val in data) {

  employeesData.add(val);

}
_employeeDataGridSource = EmployeeDataGridSource(employees: employeesData);
pprint('Final ${data}');

return Future<List<dynamic>>.value(data);

}

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter DataGrid Demo'), ), body: FutureBuilder<List>( future: generateProductList(), builder: (context, snapShot) { if (snapShot.hasData) { pprint(snapShot.data,1); dynamic columns = snapShot.data?[0]; columns = columns.keys.toList();

          return SfDataGrid(
              source: _employeeDataGridSource,
              // columnWidthMode: ColumnWidthMode.header,
              columns: columns
                  .map<GridColumn>((columnName) => GridColumn(
                label: Text('${columnName}'),
                  columnName: columnName,
                  // t: TextOverflow.visible
              ))
                  .toList());
        }

        return Center(
          child: CircularProgressIndicator(),
        );
      },
    ));

} }

class EmployeeDataGridSource extends DataGridSource { EmployeeDataGridSource({required List employees}) { _employees = employees; } List _employees = [];

@override List get dataSource => _employees.map((e) { return e.entries.toList(); }).toList();

@override dynamic getValue(dynamic employeedata, String columnName) { return employeedata.firstWhere((e) => e.key == columnName).value; }

@override DataGridRowAdapter? buildRow(DataGridRow row) { pprint('Values = ${row}',2); return DataGridRowAdapter( cells: row.getCells().map((dataGridCell) { return Container( alignment:Alignment.centerRight, padding: const EdgeInsets.symmetric(horizontal: 16.0), child: Text( "${dataGridCell.value.toString()} TESTING", // overflow: TextOverflow.ellipsis, )); }).toList()); } }`

Please provide the upto date workaround for this Thankyou

[Tamilarasan-Paranthaman]

Hi @MalikSamiAwan,

Based on your request, we have created a sample that dynamically generates a DataGrid based on JSON data. In the attached sample, we have utilized a local product JSON file to dynamically populate the DataGrid. Please review the provided sample for a more in-depth understanding.

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample1604798088

Regards, Tamilarasan

[MalikSamiAwan]

Hi @Tamilarasan-Paranthaman Thankyou very much

[FarjanaParveen]

Hi @MalikSamiAwan ,

We are suspect that the reported problem has been resolved at your end. Please let us know if you have any further queries on this. We are happy to help you.

Regards, Farjana Parveen A

[1284115201]

Thank you, my problem has also been resolved