Frozen column customization
I have 2 points when it comes to frozen column:
- Can we make it that the scrollbar is only visible in the area that is not frozen?
- Can we remove the solid line between frozen and not frozen columns? I like the elevation effect but the line should be customizable.
Hi Denis Komarov,
As per your requirements, we don't have support to show the scrollbar only in the non-frozen columns. All the columns will be laid out inside the scrollview. So that, the scrollbar can’t be shown in non-frozen columns alone. Can you please let us know about your specific use case?
The frozen line can be customized by using the `SfDataGridTheme`. If you want to hide the frozen line, you can simply set the `SfDataGridThemeData.frozenPaneLineColor` to transparent. Please check the following UG documentation to know how to customize the appearance of the frozen line,
https://help.syncfusion.com/flutter/datagrid/freeze-panes#appearance
We hope it helps. Please let us know if you need any further assistance on this.
Regards,
Ashok K
Hello, I've applied SfDataGridThemeData.frozenPaneLineColor attribute to my DataTable but it does not apply the color. Can you help me check? Thank you
Sample code where it doesnt work on Web.
```
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/theme.dart';
import 'package:syncfusion_flutter_datagrid/datagrid.dart';
void main() {
runApp(MyApp());
}
/// The application that contains datagrid on it.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Syncfusion DataGrid Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: const MyHomePage(),
);
}
}
/// The home page of the application which hosts the datagrid.
class MyHomePage extends StatefulWidget {
/// Creates the home page.
const MyHomePage({Key? key}) : super(key: key);
@override
MyHomePageState createState() => MyHomePageState();
}
/// A state class of a [MyHomePage] stateful widget.
class MyHomePageState extends State<MyHomePage> {
List<Employee> _employees = <Employee>[];
late EmployeeDataSource _employeeDataSource;
final GlobalKey<SfDataGridState> _key = GlobalKey<SfDataGridState>();
@override
void initState() {
super.initState();
_employees = _getEmployeeData();
_employeeDataSource = EmployeeDataSource(employeeData: _employees);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'Syncfusion Flutter DataGrid Export',
overflow: TextOverflow.ellipsis,
),
),
body: Column(
children: <Widget>[
Expanded(
child: SfDataGridTheme(
data: SfDataGridThemeData(frozenPaneLineColor: Colors.green),
child: SfDataGrid(
key: _key,
source: _employeeDataSource,
frozenColumnsCount: 1,
columns: <GridColumn>[
GridColumn(
columnName: 'ID',
label: Container(
padding: const EdgeInsets.all(16.0),
alignment: Alignment.center,
child: const Text(
'ID',
))),
GridColumn(
columnName: 'Name',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text('Name'))),
GridColumn(
columnName: 'Designation',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text(
'Designation',
overflow: TextOverflow.ellipsis,
))),
GridColumn(
columnName: 'Salary',
label: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: const Text('Salary'))),
],
),
),
),
],
),
);
}
List<Employee> _getEmployeeData() {
return <Employee>[
Employee(10001, 'James', 'Project Lead', 20000),
Employee(10002, 'Kathryn', 'Manager', 30000),
Employee(10003, 'Lara', 'Developer', 15000),
Employee(10004, 'Michael', 'Designer', 15000),
Employee(10005, 'Martin', 'Developer', 15000),
Employee(10006, 'Newberry', 'Developer', 15000),
Employee(10007, 'Balnc', 'Developer', 15000),
Employee(10008, 'Perry', 'Developer', 15000),
Employee(10009, 'Gable', 'Developer', 15000),
Employee(10010, 'Grimes', 'Developer', 15000)
];
}
}
/// Custom business object class which contains properties to hold the detailed
/// information about the employee which will be rendered in datagrid.
class Employee {
/// Creates the employee class with required details.
Employee(this.id, this.name, this.designation, this.salary);
/// Id of an employee.
final int id;
/// Name of an employee.
final String name;
/// Designation of an employee.
final String designation;
/// Salary of an employee.
final int salary;
}
/// An object to set the employee collection data source to the datagrid. This
/// is used to map the employee data to the datagrid widget.
class EmployeeDataSource extends DataGridSource {
/// Creates the employee data source class with required details.
EmployeeDataSource({required List<Employee> employeeData}) {
_employeeData = employeeData
.map<DataGridRow>((Employee e) => DataGridRow(cells: <DataGridCell>[
DataGridCell<int>(columnName: 'ID', value: e.id),
DataGridCell<String>(columnName: 'Name', value: e.name),
DataGridCell<String>(
columnName: 'Designation', value: e.designation),
DataGridCell<int>(columnName: 'Salary', value: e.salary),
]))
.toList();
}
List<DataGridRow> _employeeData = <DataGridRow>[];
@override
List<DataGridRow> get rows => _employeeData;
@override
DataGridRowAdapter buildRow(DataGridRow row) {
return DataGridRowAdapter(
cells: row.getCells().map<Widget>((DataGridCell cell) {
return Container(
alignment: Alignment.center,
padding: const EdgeInsets.all(8.0),
child: Text(cell.value.toString()),
);
}).toList());
}
}
```
Hi Denis,
Currently, DataGrid does not have support for changing the frozen line with elevation effect color. We have considered your request as a feature. This feature will be implemented in our 2022 Volume 3 SP release, which is expected to be rolled out at the end of October 2022. We will let you know when this feature is implemented. We appreciate your patience until then. You can follow up with the below feedback for further details,
Feedback Link: https://www.syncfusion.com/feedback/38203/support-to-change-the-color-of-the-frozen-line-with-elevation-effect
As of now, you can change the frozen line color by setting SfDataGridThemeData.frozenPaneElevation as 0. Please check the following code snippet.
|
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text( 'Syncfusion Flutter DataGrid Export', overflow: TextOverflow.ellipsis, ), ), body: SfDataGridTheme( data: SfDataGridThemeData( frozenPaneElevation: 0, frozenPaneLineColor: Colors.green), child: SfDataGrid( key: _key, source: _employeeDataSource, frozenColumnsCount: 1, columns: getColumns, ), ), ); } |
Regards,
Tamilarasan
Unfortunately, we couldn't provide the support for changing frozen line color with elevation effect in the 2022 Volume 3 SP release. We will implement this feature in our 2022 Volume 4 release, which is expected to be rolled out by the mid of December 2022. We will let you know once it is published. We appreciate your patience and understanding until then.
Denis,
We have provided the "Support to change the color of the frozen line with elevation effect" in our Essential Studio 2022 Volume 4 Main Release V20.4.0.38 which has been rolled out and is available for download under the following link.
Please get in touch with us if you would require any further assistance.
- 6 Replies
- 3 Participants
-
DK Denis Komarov
- Oct 3, 2022 11:14 AM UTC
- Jan 5, 2023 04:38 AM UTC
