The Syncfusion Flutter DataGrid supports to edit the cell values by setting the SfDataGrid.allowEditing property as true and SfDataGrid.navigationMode as cell, SfDataGrid.selectionMode as other than none. This article will demonstrate how to update a specific column's value based on other columns when updating values at runtime in the Flutter DataGrid. Specifically, we will update the balance column value when the credit or debit value is changed at runtime. Step 1: To map data to the SfDataGrid, create a data source class by extending DataGridSource. In the DataGridSource.onCellSubmit method, you can update the dependent column value when the corresponding column value changes. After that, call the notifyDataSourceListeners method with the corresponding dependent column RowColumnIndex to notify the dependent column value in the underlying collection has changed, and the DataGrid will refresh that cell accordingly. In this article, we will demonstrate how to update the “balance” column cell value when the “credit” or “debit” column cell value is changed at runtime. class EmployeeDataSource extends DataGridSource { EmployeeDataSource(this.employees) { dataGridRows = employees.map((dataGridRow) => dataGridRow.getDataGridRow()).toList(); } List<Employee> employees = []; List<DataGridRow> dataGridRows = []; // Helps to hold the new value of all editable widget. // Based on the new value we will commit the new value into the corresponding // [DataGridCell] on [onSubmitCell] method. dynamic newCellValue; // Help to control the editable text in [TextField] widget. TextEditingController editingController = TextEditingController(); @override List<DataGridRow> get rows => dataGridRows; @override DataGridRowAdapter? buildRow(DataGridRow row) { return DataGridRowAdapter( cells: row.getCells().map((dataGridCell) { return Container( alignment: (dataGridCell.columnName == 'id' || dataGridCell.columnName == 'credit' || dataGridCell.columnName == 'debit' || dataGridCell.columnName == 'balance') ? Alignment.centerRight : Alignment.centerLeft, padding: const EdgeInsets.symmetric(horizontal: 8.0), child: Text( dataGridCell.value != null ? dataGridCell.value.toString() : "", overflow: TextOverflow.ellipsis, )); }).toList()); } @override void onCellSubmit(DataGridRow dataGridRow, RowColumnIndex rowColumnIndex, GridColumn column) { final dynamic oldValue = dataGridRow .getCells() .firstWhereOrNull((DataGridCell dataGridCell) => dataGridCell.columnName == column.columnName) ?.value ?? ''; final int dataRowIndex = dataGridRows.indexOf(dataGridRow); if (newCellValue == null || oldValue == newCellValue) { return; } if (column.columnName == 'id') { dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = DataGridCell<int>(columnName: 'id', value: newCellValue); employees[dataRowIndex].id = newCellValue as int; } else if (column.columnName == 'name') { dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = DataGridCell<String>(columnName: 'name', value: newCellValue); employees[dataRowIndex].name = newCellValue.toString(); } else if (column.columnName == 'credit') { dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = DataGridCell<int>(columnName: 'credit', value: newCellValue); employees[dataRowIndex].credit = newCellValue as int; // Get the value of the 'debit' column for the given dataGridRow, int debitValue = dataGridRow .getCells() .firstWhereOrNull( (DataGridCell dataGridCell) => dataGridCell.columnName == 'debit') ?.value; // Calculate the balance by subtracting debitValue from newCellValue int balance = newCellValue - debitValue; // Get the index of the 'balance' cell for the given row int balanceCellIndex = dataGridRow .getCells() .indexWhere((element) => element.columnName == 'balance'); // Update the value of the 'balance' column for the given row dataGridRows[dataRowIndex].getCells()[balanceCellIndex] = DataGridCell<int>(columnName: 'balance', value: balance); employees[dataRowIndex].balance = balance; // Call the `notifyDataSourceListeners()` method with the corresponding row and column // indices to refresh the cell with the updated value. notifyDataSourceListeners( rowColumnIndex: RowColumnIndex(rowColumnIndex.rowIndex, balanceCellIndex)); } else if (column.columnName == 'debit') { dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = DataGridCell<int>(columnName: 'debit', value: newCellValue); employees[dataRowIndex].debit = newCellValue as int; // Get the value of the 'credit' column for the given dataGridRow, int creditValue = dataGridRow .getCells() .firstWhereOrNull((DataGridCell dataGridCell) => dataGridCell.columnName == 'credit') ?.value; // Calculate the balance by subtracting the new cell value from the credit value. int balance = creditValue - newCellValue as int; // Get the index of the 'balance' cell for the given row int balanceCellIndex = dataGridRow .getCells() .indexWhere((element) => element.columnName == 'balance'); // Update the value of the 'balance' column for the given row dataGridRows[dataRowIndex].getCells()[balanceCellIndex] = DataGridCell<int>(columnName: 'balance', value: balance); employees[dataRowIndex].balance = balance; // Call the `notifyDataSourceListeners()` method with the corresponding row and column // indices to refresh the cell with the updated value. notifyDataSourceListeners( rowColumnIndex: RowColumnIndex(rowColumnIndex.rowIndex, balanceCellIndex)); } else { dataGridRows[dataRowIndex].getCells()[rowColumnIndex.columnIndex] = DataGridCell<int>(columnName: 'balance', value: newCellValue); employees[dataRowIndex].balance = newCellValue as int; } } … } Step 2: Initialize the SfDataGrid widget with all the required properties. List<Employee> _employees = []; late EmployeeDataSource _employeeDataSource; @override void initState() { super.initState(); _employees = getEmployeeData(); _employeeDataSource = EmployeeDataSource(_employees); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('Syncfusion Flutter DataGrid')), body: SfDataGrid( source: _employeeDataSource, allowEditing: true, editingGestureType: EditingGestureType.tap, navigationMode: GridNavigationMode.cell, selectionMode: SelectionMode.single, columnWidthMode: ColumnWidthMode.auto, columns: [ GridColumn( columnName: 'id', label: Container( padding: const EdgeInsets.symmetric(horizontal: 8.0), alignment: Alignment.centerRight, child: const Text('ID'))), GridColumn( columnName: 'name', label: Container( padding: const EdgeInsets.symmetric(horizontal: 8.0), alignment: Alignment.centerLeft, child: const Text('Name'))), GridColumn( columnName: 'credit', label: Container( padding: const EdgeInsets.symmetric(horizontal: 8.0), alignment: Alignment.centerRight, child: const Text('Credit'))), GridColumn( columnName: 'debit', label: Container( padding: const EdgeInsets.symmetric(horizontal: 8.0), alignment: Alignment.centerRight, child: const Text('Debit'))), GridColumn( columnName: 'balance', label: Container( padding: const EdgeInsets.symmetric(horizontal: 8.0), alignment: Alignment.centerRight, child: const Text('Balance'))), ], ), ); } You can download the example from GitHub. Conclusion I hope you enjoyed learning about how update cell in specific column based on other column cell value when editing at run time in Flutter DataTable (SfDataGrid). You can refer to our Flutter DataGrid’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter DataGrid documentation to understand how to present and manipulate data. For current customers, you can check out our Flutter components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Flutter DataGrid and other Flutter components. If you have any queries or require clarifications, please let us know in the comment section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The .NET MAUI DataGrid (SfDataGrid) allows to set the TextAlignment as Center for all columns in DataGrid on entire application through the implicit style as shown in the below code snippets. Step 1 : Write the implicit style for DataGridCell and DataGridHeaderCell with TextAlignment property value as Center in App.Xaml. <Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:DataGridMAUI" xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid" x:Class="DataGridMAUI.App"> <Application.Resources> <ResourceDictionary> <Style TargetType="syncfusion:DataGridCell"> <Setter Property="TextAlignment" Value="Center"></Setter> </Style> <Style TargetType="syncfusion:DataGridHeaderCell"> <Setter Property="TextAlignment" Value="Center"></Setter> </Style> </ResourceDictionary> </Application.Resources> </Application> View Sample on GithubTake a moment to pursue this documentation, where you will find more about Syncfusion .NET MAUI DataGrid(SfDataGrid) with code examples. Please refer to this link to learn about the essential features of Syncfusion .NET MAUI DataGrid(SfDataGrid). Conclusion I hope you enjoyed learning about how to make TextAlignment as Center for all Columns in MAUI DataGrid (SfDataGrid) on entire application. You can refer to our .NET MAUI DataGrid’s feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI DataGrid Documentation to understand how to present and manipulate data. For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI DataGrid and other .NET MAUI components. If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac or feedback portal. We are always happy to assist you!
The .NET MAUI DataGrid (SfDataGrid) displays all the text values in DataGridCell with a default TextColor. However, SfDataGrid allows you to customize the TextColor color of the DataGridCell for the entire view and to some specific cells based on conditions. You can use the SfDataGrid.DefaultStyle property to change the TextColor of all DataGridCell in the view. To find out more, please refer to our documentation. If you need to change the TextColor of a cell based on its value, you can use the CellStyle property in the DataGridColumn. You can create converters for the style properties to meet your requirements. XAML Refer the below code example in which TextColor of the ManagerID column is customized based on conditions written in the converter. <ContentPage.Resources> <ResourceDictionary> <local:ColorConverter x:Key="result"/> </ResourceDictionary> </ContentPage.Resources> <syncfusion:DataGridNumericColumn MappingName="ManagerID" HeaderText="ID" Format="d"> <syncfusion:DataGridNumericColumn.CellStyle> <Style TargetType="syncfusion:DataGridCell"> <Setter Property="TextColor" Value="{Binding ManagerID,Converter={StaticResource result}}" /> </Style> </syncfusion:DataGridNumericColumn.CellStyle> </syncfusion:DataGridNumericColumn> C# Refer the below code example for writing a converter to customize the cell TextColor based on conditions. public class ColorConverter: IValueConverter { public object Convert(object value, Type targetType, object parameter,CultureInfo culture) { int _value = (int)value; if (_value >= 45) return Colors.Green; return Colors.Red; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { return value; } } View Sample on GitHub For more details about applying conditional styles for a column in SfDataGrid, please refer the below user documentation link. Take a moment to pursue this documentation, where you can find more about Syncfusion .NET MAUI DataGrid (SfDataGrid) with code examples. Please refer to this link to learn about the essential features of Syncfusion .NET MAUI DataGrid (SfDataGrid). Conclusion I hope you enjoyed learning about how to customize the foreground color for cells in a column based on the cell content in MAUI DataGrid (SfDataGrid). You can refer to our .NET MAUI DataGrid’s feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI DataGrid Documentation to understand how to present and manipulate data. For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI DataGrid and other .NET MAUI components. If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac or feedback portal. We are always happy to assist you!
The WinUI Column Chart (Vertical Bar Chart) uses vertical bars (called columns) to display different values of one or more items. This section explains how to create WinUI Column Charts. The user guide Documentation helps you to acquire more knowledge on charts and their features. You can also refer to the Feature Tour site to get an overview of all the features in the chart. Step 1: Create a simple project using the instructions given in the Getting Started with your first WinUI app documentation. Step 2: Add Syncfusion.Chart.WinUI NuGet to the project and import the SfCartesianChart namespace as follows. [XAML] xmlns:chart="using:Syncfusion.UI.Xaml.Charts" [C#] using Syncfusion.UI.Xaml.Charts; Step 3: Initialize an empty chart with XAxes and YAxes as shown in the following code sample. [XAML] <chart:SfCartesianChart> <chart:SfCartesianChart.XAxes > <chart:CategoryAxis/> </chart:SfCartesianChart.XAxes > <chart:SfCartesianChart.YAxes > <chart:NumericalAxis/> </chart:SfCartesianChart.YAxes > </chart:SfCartesianChart> [C#] SfCartesianChart chart = new SfCartesianChart(); //Initializing XAxes CategoryAxis xAxis = new CategoryAxis(); chart.XAxes.Add.(xAxis); //Initializing YAxes NumericalAxis yAxis = new NumericalAxis(); chart.YAxes.Add.(yAxis); this.Content = chart; Step 4: Initialize a data model that represents a data point for the Column Chart. public class Model { public string Country { get; set; } public double Counts { get; set; } public Model(string name, double count) { Country = name; Counts = count; } } Step 5: Create a ViewModel class with a data collection property using the above model and initialize a list of objects as shown in the following code sample. public class ViewModel { public ObservableCollection<Model> Data { get; set; } public ViewModel() { Data = new ObservableCollection<Model>() { new Model("Korea",39), new Model("India",20), new Model("Africa", 61), new Model("China",65), new Model("France",45), }; } } Step 6: Set the ViewModel instance as the DataContext of your window; this is done to bind properties of ViewModel to the chart. Note:Add namespace of ViewModel class to your XAML page, if you prefer to set DataContext in XAML. [XAML] xmlns:viewModel="using:CartesianChartDesktop" . . . <chart:SfCartesianChart> <chart:SfCartesianChart.DataContext> <viewModel:ViewModel/> </chart:SfCartesianChart.DataContext> </chart:SfCartesianChart> [C#] SfCartesianChart chart = new SfCartesianChart(); chart.DataContext = new ViewModel(); Step 7: Populate chart with data. As we are going to visualize the comparison of internet users from various countries in the data model, add ColumnSeries to SfCartesianChart.Series property, and then bind the Data property of the above ViewModel to the ColumnSeries ItemsSource property, as shown in the following code sample. Note:Need to set XBindingPath and YBindingPath properties so that series will fetch values from the respective properties in the data model to plot the series. [XAML] <chart:SfCartesianChart> <chart:SfCartesianChart.DataContext> <viewModel:ViewModel/> </chart:SfCartesianChart.DataContext> . . . <chart:SfCartesianChart.Series> <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Country" YBindingPath="Counts" ShowDataLabels="True"/> </chart:SfCartesianChart.Series> </chart:SfCartesianChart> [C#] SfCartesianChart chart = new SfCartesianChart(); chart.DataContext = new ViewModel(); . . . ColumnSeries series = new ColumnSeries(); series.SetBinding(ColumnSeries.ItemsSourceProperty, new Binding() { Path = new PropertyPath("Data") }); series.XBindingPath = "Country"; series.YBindingPath = "Counts"; series.ShowDataLabels = true; chart.Series.Add(series); this.Content = chart; Output Hope you enjoyed learning about the quick getting started with WinUI Column Charts. Can explore the runnable demo from this GitHub location.ConclusionI hope you enjoyed how to create a WinUI Column Chart (SfCartesianChart).You can refer to our WinUI Column Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WinUI Column Chart example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The Syncfusion Flutter DataGrid provides the support to load any widget in the cells. In this article, you can learn about how to load the button widget for specific column and perform any action on that button click. STEP 1: Initialize the SfDataGrid widget with all the required properties. List<Employee> _employees = <Employee>[]; late EmployeeDataSource _employeeDataSource; @override void initState() { super.initState(); _employees = getEmployeeData(); _employeeDataSource = EmployeeDataSource(_employees); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter SfDataGrid'), ), body: SfDataGrid(source: _employeeDataSource, columns: [ GridColumn( columnName: 'id', label: Container( padding: const EdgeInsets.all(8.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'), ), ), GridColumn( columnName: 'button', label: Container( padding: const EdgeInsets.all(8.0), alignment: Alignment.center, child: const Text('Details '), ), ), ]), ); } STEP 2: Create a data source class by extending DataGridSource for mapping data to the SfDataGrid. In the buildRow method, you can load the button widget based on the condition. Here, the respective row detail will be shown in the AlertDialog with a button click. class EmployeeDataSource extends DataGridSource { EmployeeDataSource(List<Employee> employees) { buildDataGridRow(employees); } void buildDataGridRow(List<Employee> employeeData) { dataGridRow = employeeData.map<DataGridRow>((employee) { return DataGridRow(cells: [ DataGridCell<int>(columnName: 'id', value: employee.id), DataGridCell<String>(columnName: 'name', value: employee.name), DataGridCell<String>( columnName: 'designation', value: employee.designation), const DataGridCell<Widget>(columnName: 'button', value: null), ]); }).toList(); } List<DataGridRow> dataGridRow = <DataGridRow>[]; @override List<DataGridRow> get rows => dataGridRow.isEmpty ? [] : dataGridRow; @override DataGridRowAdapter? buildRow(DataGridRow row) { return DataGridRowAdapter( cells: row.getCells().map<Widget>((dataGridCell) { return Container( alignment: Alignment.center, child: dataGridCell.columnName == 'button' ? LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { return ElevatedButton( onPressed: () { showDialog( context: context, builder: (context) => AlertDialog( content: SizedBox( height: 100, child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( 'Employee ID: ${row.getCells()[0].value.toString()}'), Text( 'Employee Name: ${row.getCells()[1].value.toString()}'), Text( 'Employee Designation: ${row.getCells()[2].value.toString()}'), ], )))); }, child: const Text('Details')); }) : Text(dataGridCell.value.toString())); }).toList()); } } You can download the example from GitHub.
In TreeGrid, we can dynamically update all the inner properties available in column property. And, we can include/exclude the TreeGrid columns dynamically by using “setModel” method. Please find the code example to modify “headerText” and “textAlign” column property. <button onclick="clickme()" style="margin-bottom:10px">Update Column</button> @(Html.EJ().TreeGrid("TreeGridContainer") .Columns(co => { co.Field("taskID").HeaderText("Task Id").Width(60).Add(); co.Field("taskName").HeaderText("Task Name").Add(); co.Field("startDate").HeaderText("Start Date").TextAlign(TextAlign.Center).Add(); co.Field("progress").HeaderText("Progress").TextAlign(TextAlign.Right).Add(); }) )@(Html.EJ().ScriptManager()) <script type="text/javascript"> //To dynamically change the TreeGrid columns function clickme() { var treeObj = $("#TreeGridContainer").data("ejTreeGrid"), clonedColumns = $.extend([], treeObj.model.columns), duration = { field: "duration", headerText: "Duration", duration: "numericedit" }; clonedColumns[0].headerText = "Id"; clonedColumns[1].headerText = "Name"; clonedColumns[3].headerText = "Percent Done"; clonedColumns[2].textAlign = ej.TextAlign.Right; clonedColumns[3].textAlign = ej.TextAlign.Center; //To include new column dynamically clonedColumns.push(duration); treeObj.setModel({ "columns": clonedColumns }); } </script> The following output is displayed as a result of the above code example. Sample Please find the sample to customize the TreeGrid column properties. SampleConclusionI hope you enjoyed learning about how to customize the column properties in ASP.NET MVC Treegrid.You can refer to our ASP.NET MVC TreeGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET MVC TreeGrid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
The Flutter DataTable widget allows you to load any type of widget into each cell. To display the hyperlink column, create a hyperlink like appearance using the Text widget and return it in DataGridSource.buildRow. The following steps explain how to show the hyperlink column in Flutter DataTable, STEP 1: To launch the URL in the browser, add the following dependencies in pubspec.yaml. dependencies: flutter: sdk: flutter url_launcher: ^6.0.9 Step 2: Create an EmployeeDataGridSource class that extends the DataGridSource for mapping data to the SfDataGrid. Return the DataGridRowAdapter after overriding the buildRow method. Wrap the Text widget within the GestureDetecor widget. Provide the appropriate hyperlink to the onTap callback of GestureDetector widgets. And then wrap the GestureDetector within the Container widget. Then, set the TextDecoration as an underline for the Text widget to give the hyperlink appearance. Here, we have provided the hyperlink for a location column alone. Also, we have provided a container widget for the other columns. class _EmployeeDataGridSource extends DataGridSource { _EmployeeDataGridSource() { employees = getEmployees(20); buildDataGridRows(); } final math.Random random = math.Random(); List<DataGridRow> dataGridRows = <DataGridRow>[]; List<_Employee> employees = <_Employee>[]; void buildDataGridRows() { dataGridRows = employees.map<DataGridRow>((_Employee employee) { return DataGridRow(cells: <DataGridCell>[ DataGridCell<String>( columnName: 'employeeName', value: employee.employeeName), DataGridCell<String>( columnName: 'designation', value: employee.designation), DataGridCell<String>(columnName: 'location', value: employee.location), DataGridCell<int>(columnName: 'salary', value: employee.salary), ]); }).toList(); } // Overrides @override List<DataGridRow> get rows => dataGridRows; Widget buildLocation(dynamic value) { return Padding( padding: const EdgeInsets.only(left: 16.0), child: getWidget( const Icon( Icons.location_on, size: 20, color: Colors.blue, ), value), ); } Widget getWidget(Widget image, String text) { return Container( color: Colors.transparent, child: Row( children: <Widget>[ Container( child: image, ), const SizedBox(width: 6), Expanded( child: GestureDetector( onTap: () => _launchURL(locationURL[text]!), child: Text( text, style: TextStyle( decoration: TextDecoration.underline, color: Colors.blue), overflow: TextOverflow.ellipsis, ), )) ], ), ); } _launchURL(String hyperlink) async { if (await canLaunch(hyperlink)) { await launch(hyperlink); } else { throw 'Could not launch $hyperlink'; } } @override DataGridRowAdapter buildRow(DataGridRow row) { return DataGridRowAdapter(cells: <Widget>[ Container( padding: const EdgeInsets.all(8.0), alignment: Alignment.centerLeft, child: Text(row.getCells()[0].value.toString()), ), Container( padding: const EdgeInsets.all(8.0), alignment: Alignment.centerLeft, child: Text(row.getCells()[1].value.toString()), ), buildLocation(row.getCells()[2].value), Container( padding: const EdgeInsets.all(8.0), alignment: Alignment.centerRight, child: Text(NumberFormat.currency(locale: 'en_US', symbol: r'$') .format(row.getCells()[3].value) .toString()), ), ]); } } STEP 3: Initialize the SfDataGrid with all the required properties. @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Datagrid Sample'), ), body: _buildDataGrid(), ); } } View example in GitHub.
A .NET MAUI Column Chart is a visual representation of changing data that is created with a high level of user interactive. This section explains how to create a beautiful .NET MAUI Column Charts. Register the handler Syncfusion.Maui.Core NuGet is a dependent package for all Syncfusion controls of .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion core. For more details, refer to this link. Initialize a Chart Import the SfCartesianChart namespace as follows. [XAML] xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts" [C#] using Syncfusion.Maui.Charts; Initialize an empty chart with XAxes and YAxes as shown in the following code sample. [XAML] <chart:SfCartesianChart> <chart:SfCartesianChart.XAxes > <chart:CategoryAxis/> </chart:SfCartesianChart.XAxes> <chart:SfCartesianChart.YAxes> <chart:NumericalAxis/> </chart:SfCartesianChart.YAxes> </chart:SfCartesianChart> [C#] SfCartesianChart chart = new SfCartesianChart(); //Initializing Primary Axis CategoryAxis primaryAxis = new CategoryAxis(); chart.XAxes.Add(primaryAxis); //Initializing Secondary Axis NumericalAxis secondaryAxis = new NumericalAxis(); chart.YAxes.Add(secondaryAxis); this.Content = chart; Initialize ViewModel Now, define a simple data model that represents a data point for .NET MAUI Column Chart. Public class Model { public string Country { get; set; } public double Counts { get; set; } public Model(string name , double count) { Country = name; Counts = count; } } Create a ViewModel class and initialize a list of objects as shown in the following code sample. public class ViewModel { public ObservableCollection<Model> Data { get; set; } public ViewModel() { Data = new ObservableCollection<Model>() { new Model("Korea",39), new Model("India",20), new Model("Africa", 61), new Model("China",65), new Model("France",45), }; } } Set the ViewModel instance as the BindingContext of the chart; this is done to bind properties of ViewModel to SfCartesianChart. Note:Add the namespace of ViewModel class to your XAML page, if you prefer to set BindingContext in XAML. [XAML] xmlns:viewModel ="clr-namespace:MauiApp" . . . <chart:SfCartesianChart> <chart:SfCartesianChart.BindingContext> <viewModel:ViewModel/> </chart:SfCartesianChart.BindingContext> </chart:SfCartesianChart> [C#] SfCartesianChart chart = new SfCartesianChart(); chart.BindingContext = new ViewModel(); How to populate data in .NET MAUI Column Charts As we are going to visualize the comparison of annual internet users count in the data model, add ColumnSeries to SfCartesianChart.Series property, and then bind the Data property of the above ViewModel to the ColumnSeries ItemsSource property as shown in the following code sample. Note:Need to set XBindingPath and YBindingPath properties so that series will fetch values from the respective properties in the data model to plot the series. [XAML] <chart:SfCartesianChart> <chart:SfCartesianChart.BindingContext> <viewModel:ViewModel/> </chart:SfCartesianChart.BindingContext> . . . <chart:SfCartesianChart.Series> <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Country" YBindingPath="Counts" ShowDataLabels="True"/> </chart:SfCartesianChart.Series> </chart:SfCartesianChart> [C#] SfCartesianChart chart = new SfCartesianChart(); chart.BindingContext = new ViewModel(); . . . var binding = new Binding() { Path = "Data" }; var columnSeries = new ColumnSeries() { XBindingPath = "Country ", YBindingPath = "Counts", ShowDataLabels = true }; columnSeries.SetBinding(ChartSeries.ItemsSourceProperty, binding); chart.Series.Add(columnSeries); Output Hope you enjoyed learning about the quick getting started with .NET MAUI Column Charts. You can explore the runnable demo from this Github location. Conclusion I hope you enjoyed learning about how to create a Column Chart in .NET MAUI. You can refer to our .NET MAUI Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI Chart Documentation to understand how to present and manipulate data. For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components. If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac or feedback portal. We are always happy to assist you!
WPF TreeGrid (SfTreeGrid) allows you to show the ToolTip through the OnMouseEnter event. But the tooltip will not be displayed for disabled cells in TreeGrid. You can show tooltip for the disabled TreeGridCell and TreeGridExpandercell in TreeGrid by writing style and enabling ToolTipService.ShowOnDisabled. <Window.Resources> <local:ToolTipConverter x:Key="converter"/> <Style x:Key="toolTipTreeGridExpanderCell" TargetType="syncfusion:TreeGridExpanderCell" > <Setter Property="ToolTip" Value="{Binding Converter={StaticResource converter}, RelativeSource={RelativeSource Mode=Self} }"/> <Setter Property="ToolTipService.IsEnabled" Value="True" /> <Setter Property="ToolTipService.ShowOnDisabled" Value="True" /> </Style> <Style x:Key="toolTipTreeGridCell" TargetType="syncfusion:TreeGridCell" > <Setter Property="ToolTip" Value="{Binding Converter={StaticResource converter}, RelativeSource={RelativeSource Mode=Self} }"/> <Setter Property="ToolTipService.IsEnabled" Value="True" /> <Setter Property="ToolTipService.ShowOnDisabled" Value="True" /> </Style> </Window.Resources> <Grid> <syncfusion:SfTreeGrid Name="treeGrid" AutoGenerateColumns="True" IsEnabled="False" ShowToolTip="True" ExpanderCellStyle="{StaticResource toolTipTreeGridExpanderCell}" CellStyle="{StaticResource toolTipTreeGridCell}" ChildPropertyName="ReportsTo" ParentPropertyName="ID" SelfRelationRootValue="-1" ItemsSource="{Binding Employees}" /> </Grid> Here, TreeGridCell and TreeGridExpanderCell ToolTip are displayed using the converter, where the converter returns the cell value based on the underlying property. public class ToolTipConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var treeGridcell = value as TreeGridCell; string cellvalue = string.Empty; var column = treeGridcell.ColumnBase.TreeGridColumn; var treeGrid = column.GetType().GetProperty("TreeGrid", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic).GetValue(column) as SfTreeGrid; if (treeGridcell != null && treeGridcell.ColumnBase != null && !treeGridcell.ColumnBase.IsEditing) { string formattedValue = ""; object value1 = null; if (treeGridcell.ColumnBase.ColumnElement != null) { value1 = treeGridcell.ColumnBase.ColumnElement.DataContext; } if (treeGridcell.ColumnBase.TreeGridColumn != null && treeGrid != null && treeGrid.View != null && treeGridcell.ColumnBase.TreeGridColumn.MappingName != null) { var tempFormatValue = treeGrid.View.GetPropertyAccessProvider().GetFormattedValue(value1, treeGridcell.ColumnBase.TreeGridColumn.MappingName); formattedValue = tempFormatValue == null ? null : tempFormatValue.ToString(); cellvalue = formattedValue; } } return cellvalue; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } The following screenshot shows the tooltip display for the disabled cell in TreeGrid,Take a moment to peruse the WPF TreeGrid – ToolTip documentation, where you can find about tooltip with code examples. View sample in GitHubConclusionI hope you enjoyed learning about how to show tooltip on the disabled cell in WPF TreeGrid (SfTreeGrid).You can refer to our WPF TreeGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
WinForms DataGrid (SfDataGrid) does not have a build in ColorPickerColumn, but we can create the ColorPickerColumn by customizing the GridColumn and GridCellRendererBase in WinForms DataGrid (SfDataGrid). You can add both button and text in a column by customizing GridTextBoxCellRenderer. In the custom renderer, the OnRender method can be overridden to draw buttons in the cells when click on the button shows the ColorPicker. //To add custom renderer into SfDataGrid. this.sfDataGrid.CellRenderers.Add("ColorPicker", new GridColorPickeCellRenderer(this.sfDataGrid)); //To add GridColorPickeColumn in grid this.sfDataGrid.Columns.Add(new GridColorPickeColumn() { HeaderText = "Color Column", MappingName = "CustomerID", Width = 140 }); //Create the custom column public class GridColorPickeColumn : GridTextColumn { private CellButton cellButton; public CellButton CellButton { get { return cellButton; } set { cellButton = value; } } public GridColorPickeColumn() { SetCellType("ColorPicker"); } } //Custom Column Cell renderer public class GridColorPickeCellRenderer : GridTextBoxCellRenderer { public GridColorPickeCellRenderer(SfDataGrid dataGrid) { IsEditable = true; DataGrid = dataGrid; this.DataGrid.CellClick += DataGrid_CellClick; DropDownContainer = new PopupControlContainer(); } private void DataGrid_CellClick(object sender, CellClickEventArgs e) { if (dropdownContainer.Visible) { if (this.colorUI != null) { colorUI.Visible = false; dropdownContainer.HidePopup(PopupCloseType.Done); } } } protected SfDataGrid DataGrid { get; set; } protected override void OnRender(Graphics paint, Rectangle cellRect, string cellValue, CellStyleInfo style, DataColumnBase column, RowColumnIndex rowColumnIndex) { this.SelectedColor = ColorConvert.ColorFromString(cellValue); style.BackColor = SelectedColor; base.OnRender(paint, cellRect, cellValue, style, column, rowColumnIndex); //To set the rectangle for button in the cell. var rect = new Rectangle(cellRect.Location.X + cellRect.Width - 22, cellRect.Location.Y, 20, cellRect.Height); (column.GridColumn as GridColorPickeColumn).CellButton = new CellButton(); (column.GridColumn as GridColorPickeColumn).CellButton.Image = Image.FromFile(@"..\..\Images\icons.png"); (column.GridColumn as GridColorPickeColumn).CellButton.TextImageRelation = TextImageRelation.ImageBeforeText; PropertyInfo highlightedItemProperty = (column.GridColumn as GridColorPickeColumn).CellButton.GetType().GetProperties(BindingFlags.NonPublic | BindingFlags.Instance).Single(pi => pi.Name == "Bounds"); highlightedItemProperty.SetValue((column.GridColumn as GridColorPickeColumn).CellButton, rect); //To draw the button in cell DrawButton(paint, cellRect, rect, "...", new ButtonCellStyleInfo(), column, rowColumnIndex); } protected override void OnInitializeEditElement(DataColumnBase column, RowColumnIndex rowColumnIndex, TextBox uiElement) { base.OnInitializeEditElement(column, rowColumnIndex, uiElement); uiElement.BackColor = ColorConvert.ColorFromString(uiElement.Text); ; } public virtual void DrawButton(Graphics paint, Rectangle cellRect, Rectangle buttonRect, string cellValue, ButtonCellStyleInfo style, DataColumnBase column, Syncfusion.WinForms.GridCommon.ScrollAxis.RowColumnIndex rowColumnIndex, int buttonIndex = 0) { // No need to draw the button when its not visible on the cell bounds. if (cellRect.Width < 5) return; var clipBound = paint.ClipBounds; var cellButton = (column.GridColumn as GridColorPickeColumn).CellButton; bool drawHovered = false; DrawBackground(paint, buttonRect, style, drawHovered,cellButton); if (cellRect.Contains(buttonRect)) paint.SetClip(buttonRect); else if (cellRect.IntersectsWith(buttonRect)) { Rectangle intersectRect = Rectangle.Intersect(cellRect, buttonRect); paint.SetClip(intersectRect); } if (cellButton.Image != null) { var imageSize = cellButton.Image.Size.IsEmpty ? cellButton.Image.Size : Size.Empty; Rectangle imageRectangle = buttonRect; DrawImage(paint, imageRectangle, cellButton.Image); } paint.SetClip(cellRect); DrawBorder(paint, buttonRect, style, drawHovered); paint.SetClip(clipBound); } private void DrawBorder(Graphics paint, Rectangle buttonRect, ButtonCellStyleInfo style, bool drawHovered) { if (style.Enabled) { if (style.BorderColor != null) paint.DrawRectangle(style.BorderColor, Rectangle.Round(buttonRect)); } else { if (style.DisabledBorderColor != null) paint.DrawRectangle(style.DisabledBorderColor, Rectangle.Round(buttonRect)); } } private void DrawBackground(Graphics paint, Rectangle buttonRect, ButtonCellStyleInfo style, bool drawHovered,CellButton cellButton) { Color color = style.BackColor; if (style.Enabled) { color = style.BackColor; } else { color = style.DisabledBackColor; } paint.FillRectangle(new SolidBrush(color), buttonRect); } protected internal virtual void DrawImage(Graphics graphics, Rectangle bounds, Image image) { graphics.DrawImage(image, Rectangle.Ceiling(bounds), 0, 0, image.Width, image.Height, GraphicsUnit.Pixel); } protected override void OnMouseDown(DataColumnBase dataColumn, RowColumnIndex rowColumnIndex, MouseEventArgs e) { base.OnMouseDown(dataColumn, rowColumnIndex, e); var cellButton = (dataColumn.GridColumn as GridColorPickeColumn).CellButton; PropertyInfo highlightedItemProperty = (dataColumn.GridColumn as GridColorPickeColumn).CellButton.GetType().GetProperty("Bounds",BindingFlags.NonPublic|BindingFlags.Instance);//.GetProperties(BindingFlags.NonPublic | BindingFlags.Instance).Single(pi => pi.Name == "Bounds"); Rectangle rect =(Rectangle)highlightedItemProperty.GetValue((dataColumn.GridColumn as GridColorPickeColumn).CellButton); var cellLocation = new Point(450, (300 + (this.DataGrid.RowHeight * (this.DataGrid.TableControl.ResolveToRecordIndex(rowColumnIndex.RowIndex))))); if (e.Location.X > rect.X && e.Location.X < (rect.X + rect.Width)) { this.dropdownContainer.ParentControl = DataGrid.TableControl; DropDownContainer.Location = cellLocation; InitializeDropdownContainer(); colorUI.Location = cellLocation; DropDownContainer.Size = new Size(208, 230); DropDownContainer.FocusParent(); DropDownContainer.ShowPopup(cellLocation); var cellRect = DataGrid.TableControl.GetCellRectangle(rowColumnIndex.RowIndex, rowColumnIndex.ColumnIndex, true); DataGrid.Invalidate(cellRect); } } private void UpdateSummaryValues(int rowIndex, int columnIndex) { columnIndex = this.TableControl.ResolveToGridVisibleColumnIndex(columnIndex); if (columnIndex < 0) return; var mappingName = DataGrid.Columns[columnIndex].MappingName; var recordIndex = this.TableControl.ResolveToRecordIndex(rowIndex); if (recordIndex < 0) return; if (DataGrid.View.TopLevelGroup != null) { var record = DataGrid.View.TopLevelGroup.DisplayElements[recordIndex]; if (!record.IsRecords) return; var data = (record as RecordEntry).Data; //below case using for DataTable Collection when dataGrid Grouped to set value //(data as DataRowView).Row[mappingName] = ColorConvert.ColorToString(colorUI.SelectedColor, true); //below case using for ObservableCollection when dataGrid Grouped to set value data.GetType().GetProperty(mappingName).SetValue(data, ColorConvert.ColorToString(colorUI.SelectedColor, true)); } else { var record1 = DataGrid.View.Records.GetItemAt(recordIndex); //below case using for DataTable Collection to update based on selected value //(record1 as DataRowView).Row[mappingName] = ColorConvert.ColorToString(SelectedColor, true); //below case using for ObservableCollection to set value record1.GetType().GetProperty(mappingName).SetValue(record1, ColorConvert.ColorToString(SelectedColor, true)); } } ColorUIControl colorUI; private PopupControlContainer dropdownContainer = null; public PopupControlContainer DropDownContainer { get { return dropdownContainer; } set { dropdownContainer = value; } } void InitializeDropdownContainer() { if (this.dropdownContainer != null) { colorUI = new ColorUIControl(); colorUI.Name = "ColorUIControl"; colorUI.ColorSelected += new EventHandler(this.OnCUIColorSelected); colorUI.Dock = DockStyle.Fill; colorUI.Visible = true; this.dropdownContainer.Controls.Add(colorUI); } } Color color; Color SelectedColor { get { return color; } set { color = value; } } void OnCUIColorSelected(object sender, EventArgs e) { if (!string.IsNullOrEmpty(this.colorUI.SelectedColor.Name)) this.SelectedColor = this.colorUI.SelectedColor; colorUI.Visible = false; dropdownContainer.HidePopup(PopupCloseType.Done); UpdateSummaryValues(this.CurrentCellIndex.RowIndex, this.CurrentCellIndex.ColumnIndex); } } The following screenshot shows the ColorPicker column in WinForms DataGrid (SfDataGrid), Take a moment to peruse the WinForms DataGrid – Custom Column Support documentation, where you can find about custom column support with code examples. You can download the example from GitHub.
WinForms DataGrid (SfDataGrid) does not provide the direct support to apply column header style based on StackedHeaderColumn style. You can apply column header based on StackedHeaderColumn style by customization the DrawCell event in WinForms DataGrid (SfDataGrid). //trigger the Draw cell event for DetailsView DataGrid childGrid.DrawCell += SfDataGrid1_DrawCell; private void SfDataGrid1_DrawCell(object sender, Syncfusion.WinForms.DataGrid.Events.DrawCellEventArgs e) { //Get the Stakced Header Row in Details View DataGrid if ((e.DataRow as DataRowBase).RowType == Syncfusion.WinForms.DataGrid.Enums.RowType.StackedHeaderRow) { int columnIndex = e.ColumnIndex; //get the Stakced Header Column if (e.CellValue == "Sales Details") { //Apply style to Stacked Header e.Style.BackColor = Color.Yellow; //check the index for avoid the Index Out range exception if (childGrid.StackedHeaderRows[e.RowIndex].StackedColumns.Count == e.ColumnIndex) columnIndex = e.ColumnIndex - 1; //get the Child Column of specific Stacked header column var childColumnName = childGrid.StackedHeaderRows[e.RowIndex].StackedColumns[columnIndex].ChildColumns.Split(',').ToList<string>(); foreach (var stackedColumnName in childColumnName.ToList()) { //apply the Column Header Style based on Stacked Header child Columns childGrid.Columns[stackedColumnName].HeaderStyle.BackColor = Color.Yellow; } } if (e.CellValue.ToString() == "Order Details") { //Apply style to Stacked Header e.Style.BackColor = Color.DarkCyan; e.Style.TextColor = Color.White; if (childGrid.StackedHeaderRows[e.RowIndex].StackedColumns.Count == e.ColumnIndex) columnIndex = e.ColumnIndex - 1; var childColumnName = childGrid.StackedHeaderRows[e.RowIndex].StackedColumns[columnIndex].ChildColumns.Split(',').ToList<string>(); foreach (var stackedColumnName in childColumnName.ToList()) { //apply the Column Header Style based on Stacked Header child Columns childGrid.Columns[stackedColumnName].HeaderStyle.BackColor = Color.DarkCyan; childGrid.Columns[stackedColumnName].HeaderStyle.TextColor = Color.White; } } if (e.CellValue == "Customer Details") { e.Style.BackColor = Color.LightCyan; if (childGrid.StackedHeaderRows[e.RowIndex].StackedColumns.Count == e.ColumnIndex) columnIndex = e.ColumnIndex - 1; var childColumnName = childGrid.StackedHeaderRows[e.RowIndex].StackedColumns[columnIndex].ChildColumns.Split(',').ToList<string>(); foreach (var stackedColumnName in childColumnName.ToList()) { //apply the Column Header Style based on Stacked Header child Columns childGrid.Columns[stackedColumnName].HeaderStyle.BackColor = Color.LightCyan; } } if (e.CellValue == "Product Details") { e.Style.BackColor = Color.DarkGray; e.Style.TextColor = Color.White; if (childGrid.StackedHeaderRows[e.RowIndex].StackedColumns.Count == e.ColumnIndex) columnIndex = e.ColumnIndex - 1; var childColumnName = childGrid.StackedHeaderRows[e.RowIndex].StackedColumns[columnIndex].ChildColumns.Split(',').ToList<string>(); foreach (var stackedColumnName in childColumnName.ToList()) { //apply the Column Header Style based on Stacked Header child Columns childGrid.Columns[stackedColumnName].HeaderStyle.BackColor = Color.DarkGray; childGrid.Columns[stackedColumnName].HeaderStyle.TextColor = Color.White; } } } } The following screenshot shows the column header style based on StackedHeaderColumn style,Take a moment to peruse the WinForms DataGrid – Stacked Headers documentation, where you can find about stacked headers with code examples. You can download the example from GitHubConclusionI hope you enjoyed learning about how to apply column header style based on stackedHeadercolumn style in WinForms Datagrid.You can refer to our WinForms DataGrid feature tour page to know about its other groundbreaking feature representations documentationand how to quickly get started for configuration specifications. You can also explore our WinForms DataGrid exampleto understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
WinForms DataGrid (SfDataGrid) doesn’t have any direct support to set default value for the GridDateTimeColumn. However, it is possible to assign a default value to the DateTime column of the underlying data when the date value is null or empty by creating a custom renderer for DateTime column. public Form1() { InitializeComponent(); this.sfDataGrid1.CellRenderers["DateTime"] = new CustomDateTimeRenderer(this.sfDataGrid1); } public class CustomDateTimeRenderer : GridDateTimeCellRenderer { SfDataGrid DataGrid { get; set; } public CustomDateTimeRenderer(SfDataGrid dataGrid) { this.DataGrid = dataGrid; } protected override void OnRender(Graphics paint, Rectangle cellRect, string cellValue, CellStyleInfo style, DataColumnBase column, RowColumnIndex rowColumnIndex) { if(string.IsNullOrEmpty(cellValue)) { var recordIndex = this.TableControl.ResolveToRecordIndex(rowColumnIndex.RowIndex); object data = null; if (recordIndex < 0) return; if (this.DataGrid.View.TopLevelGroup != null) { var record = this.DataGrid.View.TopLevelGroup.DisplayElements[recordIndex]; if (!record.IsRecords) return; data = (record as RecordEntry).Data; } else { data = this.DataGrid.View.Records.GetItemAt(recordIndex); } if (data != null) { this.DataGrid.View.GetPropertyAccessProvider().SetValue(data, column.GridColumn.MappingName, DateTime.Now); } } base.OnRender(paint, cellRect, cellValue, style, column, rowColumnIndex); } } Take a moment to peruse the documentation, where you can find about GridDateTimeColumn in SfDataGrid, with code examples. You can download the example from GitHub
By default, SfDataGrid groups a column in the sorted order. However, you can group a specific column in the actual order without sorting the groups in SfDataGrid by removing the grouped column from the SfDataGrid.View.SortDescriptions. this.dataGrid.Loaded += OnDataGrid_Loaded; private void OnDataGrid_Loaded(object sender, RoutedEventArgs e) { this.dataGrid.View.CurrentChanged += OnView_CurrentChanged; } private void OnView_CurrentChanged(object sender, object e) { var groupColumn = dataGrid.View.SortDescriptions.FirstOrDefault(x => x.PropertyName == "ProductName"); if (dataGrid.SortColumnDescriptions.FirstOrDefault(x => x.ColumnName == "ProductName") != null) dataGrid.View.SortDescriptions.Remove(groupColumn); } View Sample in GitHub
By default, SfDataGrid having gird lines for each row and column. But we can remove the grid lines for the default row by write style for BorderThickness property of GridCell and remove the grid lines for Header row by write style for BorderThickness property of GridHeaderCellControl and GridHeaderIndentCell. <Page.Resources> <Style TargetType="syncfusion:GridCell"> <Setter Property="BorderThickness" Value="0,0,0,0" /> </Style> <Style TargetType="syncfusion:GridHeaderCellControl"> <Setter Property="BorderThickness" Value="0,0,0,0" /> </Style> <Style TargetType="syncfusion:GridHeaderIndentCell"> <Setter Property="BorderThickness" Value="0,0,0,0" /> </Style> </Page.Resources> The following screenshot shows columns border removed in SfDataGrid, View Sample in GitHub
You can prevent editing of some columns in WPF DataGrid (SfDataGrid). You can get the same behavior in exported excel file by protecting the worksheet and set the Locked property to false if you want to edit the columns. private static void OnExecuteExportToExcel(object sender, ExecutedRoutedEventArgs args) { var dataGrid = args.Source as SfDataGrid; if (dataGrid == null) return; try { GetDataGridStyles(dataGrid); // Creating an instance for ExcelExportingOptions which is passed as a parameter to the ExportToExcel method. ExcelExportingOptions options = new ExcelExportingOptions(); options.AllowOutlining = true; options.ExportingEventHandler = ExportingHandler; // Exports Datagrid to Excel and returns ExcelEngine. var excelEngine = dataGrid.ExportToExcel(dataGrid.View, options); // Gets the exported workbook from the ExcelEngine var workBook = excelEngine.Excel.Workbooks[0]; var workSheet = workBook.Worksheets[0]; var gridColumns = dataGrid.Columns.Where(col => col.AllowEditing).ToList(); foreach(var column in workSheet.Columns) { if(gridColumns.Any(gridCol => gridCol.HeaderText == column.DisplayText)) workSheet.Range[column.AddressLocal].CellStyle.Locked = false; } workSheet.Protect("syncfusion"); // Saving the workbook. SaveFileDialog sfd = new SaveFileDialog { FilterIndex = 2, Filter = "Excel 97 to 2003 Files(*.xls)|*.xls|Excel 2007 to 2010 Files(*.xlsx)|*.xlsx" }; if (sfd.ShowDialog() == true) { using (Stream stream = sfd.OpenFile()) { if (sfd.FilterIndex == 1) workBook.Version = ExcelVersion.Excel97to2003; else workBook.Version = ExcelVersion.Excel2010; workBook.SaveAs(stream); } //Message box confirmation to view the created spreadsheet. if (MessageBox.Show("Do you want to view the workbook?", "Workbook has been created", MessageBoxButton.YesNo, MessageBoxImage.Information) == MessageBoxResult.Yes) { //Launching the Excel file using the default Application.[MS Excel Or Free ExcelViewer] System.Diagnostics.Process.Start(sfd.FileName); } } } catch (Exception ex) { MessageBox.Show(ex.Message); } } View WPF DataGrid Export Demo in GitHub.
WPF DataGrid (SfDataGrid) does not support navigation to controls within GridTemplateColumn. You can achieve this by overriding ShouldGridTryToHandleKeyDown method in GridCellTemplateRenderer. public class SfDataGridBehavior : Behavior<SfDataGrid> { protected override void OnAttached() { base.OnAttached(); this.AssociatedObject.CellRenderers.Remove("Template"); this.AssociatedObject.CellRenderers.Add("Template", new CustomGridCellTemplateRenderer()); } }public class CustomGridCellTemplateRenderer : GridCellTemplateRenderer { private FrameworkElement PreviousCurrentCellElement = null; public CustomGridCellTemplateRenderer() { } protected override bool ShouldGridTryToHandleKeyDown(KeyEventArgs e) { if (e.Key != Key.Tab) return base.ShouldGridTryToHandleKeyDown(e); bool isShiftPressed = SelectionHelper.CheckShiftKeyPressed(); UIElement currentFocusedElement = Keyboard.FocusedElement as UIElement; var currentCell = this.DataGrid.SelectionController.CurrentCellManager.CurrentCell; var columnElement = currentCell.ColumnElement; //Column with Multiple controls inside DataTemplate. if (currentCell.GridColumn.MappingName != "SalesID") return base.ShouldGridTryToHandleKeyDown(e); if (PreviousCurrentCellElement != columnElement && currentFocusedElement is SfDataGrid) { FocusNavigationDirection focusNavigationDirection = isShiftPressed ? FocusNavigationDirection.Last : FocusNavigationDirection.First; TraversalRequest tRequest = new TraversalRequest(focusNavigationDirection); //To navigate from other column to template column if (columnElement.MoveFocus(tRequest)) { e.Handled = true; PreviousCurrentCellElement = columnElement; return false; } } else { FocusNavigationDirection focusNavigationDirection = isShiftPressed ? FocusNavigationDirection.First : FocusNavigationDirection.Last; TraversalRequest traversalRequest = new TraversalRequest(focusNavigationDirection); if (columnElement.MoveFocus(traversalRequest)) { if (Keyboard.FocusedElement != currentFocusedElement) { Keyboard.Focus(currentFocusedElement); PreviousCurrentCellElement = columnElement; return false; } //To navigate to other columns from template column else { Keyboard.Focus(currentFocusedElement); PreviousCurrentCellElement = null; return base.ShouldGridTryToHandleKeyDown(e); } } } PreviousCurrentCellElement = columnElement; return base.ShouldGridTryToHandleKeyDown(e); } } View Sample in GitHub.
WPF DataGrid (SfDataGrid) does not provide the support copy paste (clipboard) operations in GridTemplateColumn. You can achieve this by overriding the CopyCell method in GridCutCopyPaste class. this.SampleDataGrid.GridCopyPaste = new CustomCopyPaste(this.SampleDataGrid); public class CustomCopyPaste : GridCutCopyPaste { public CustomCopyPaste(SfDataGrid DataGrid) : base(DataGrid) { } protected override void CopyCell(object record, GridColumn column, ref System.Text.StringBuilder text) { if (this.dataGrid.View == null) return; object copyText = null; if (column is GridUnBoundColumn) { var unboundValue = this.dataGrid.GetUnBoundCellValue(column, record); copyText = unboundValue != null ? unboundValue.ToString() : string.Empty; } else { if (this.dataGrid.GridCopyOption.HasFlag(GridCopyOption.IncludeFormat)) copyText = this.dataGrid.View.GetPropertyAccessProvider().GetFormattedValue(record, column.MappingName); else if (column is GridTemplateColumn && column.MappingName == "Value") { var dataItem = record as DataItem; if (dataItem.ItemType == 1) { if (dataItem.ItemShortName <= 200) { var nameValuePair = (dataGrid.DataContext as SampleViewModel).NameValuePair; copyText = nameValuePair[dataItem.StringValue].Name; } else if (dataItem.ItemShortName <= 400) { var nameValuePair = (dataGrid.DataContext as SampleViewModel).NameValuePair1; copyText = nameValuePair[dataItem.StringValue].Name; } else { copyText = dataItem.ItemShortName.ToString() + "" + "th" + " Mango"; } } else if (dataItem.ItemType == 2) { copyText = dataItem.DateTimeValue; } else { copyText = dataItem.ItemShortName; } } else copyText = this.dataGrid.View.GetPropertyAccessProvider().GetValue(record, column.MappingName); } var copyargs = this.RaiseCopyGridCellContentEvent(column, record, copyText); if (!copyargs.Handled) { if (this.dataGrid.Columns[leftMostColumnIndex] != column || text.Length != 0) text.Append('\t'); text.Append(copyargs.ClipBoardValue); } } } View WPF DataGrid Clipboard Operation Demo in GitHub.
WPF DataGrid (SfDataGrid) sorts the column while grouping. You can group the column without allowing it to sort by removing the grouped columns from SortDescriptions. this.dataGrid.Loaded += OnDataGrid_Loaded; private void OnDataGrid_Loaded(object sender, RoutedEventArgs e) { this.dataGrid.View.CurrentChanged += OnView_CurrentChanged; } private void OnView_CurrentChanged(object sender, EventArgs e) { var groupColumn = dataGrid.View.SortDescriptions.FirstOrDefault(x => x.PropertyName == "ProductName"); if (dataGrid.SortColumnDescriptions.FirstOrDefault(x => x.ColumnName == "ProductName") != null) dataGrid.View.SortDescriptions.Remove(groupColumn); } View WPF DataGrid Sorting Demo in GitHub
You can print a displayed data except GridTemplateColumn CellTemplate and changed it format by overriding the GetColumnElement in GridPrintManager class in WPF DataGrid (SfDataGrid). protected override object GetColumnElement(object record, string mappingName) { var column = dataGrid.Columns[mappingName]; if (column.CellTemplate == null) return base.GetColumnElement(record, mappingName); else { var tb = new TextBlock { VerticalAlignment = VerticalAlignment.Center, TextAlignment = GetColumnTextAlignment(mappingName), TextWrapping = GetColumnTextWrapping(mappingName), FlowDirection = PrintFlowDirection, DataContext = record }; tb.SetBinding(TextBlock.TextProperty, column.DisplayBinding); decimal value; decimal.TryParse(tb.Text, out value); tb.Text = value.ToString("F3"); var padding = column.ReadLocalValue(GridColumn.PaddingProperty); tb.Padding = padding != DependencyProperty.UnsetValue ? column.Padding : new Thickness(4, 3, 3, 1); return tb; } } View sample in GitHub.
The GridComboBoxColumn does not have direct support to display default text on it when there is no selected Item in WPF DataGrid (SfDataGrid). You can change the default text using ComboBoxValueConverter and DisplayBinding property of the column. <Window.Resources> <local:ComboBoxValueConverter x:Key="comboBoxValueConverter"/> </Window.Resources><syncfusion:SfDataGrid Name="dataGrid" AutoGenerateColumns="False" AllowEditing="True" ColumnSizer="Auto" ItemsSource="{Binding Employees}"> <syncfusion:SfDataGrid.Columns> <syncfusion:GridTextColumn MappingName="FirstName" HeaderText="First Name" ColumnFilter="DisplayText" /> <syncfusion:GridTextColumn MappingName="LastName" HeaderText="Last Name" /> <syncfusion:GridTextColumn MappingName="ID"/> <syncfusion:GridTextColumn MappingName="Title" /> <syncfusion:GridTextColumn MappingName="Salary" /> <syncfusion:GridComboBoxColumn MappingName="ReportsTo" HeaderText="Reports To" ItemsSource="{Binding Reporters}" DisplayBinding="{Binding Path=ReportsTo, Converter={StaticResource comboBoxValueConverter}}"/> </syncfusion:SfDataGrid.Columns> </syncfusion:SfDataGrid> public class ComboBoxValueConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { if (string.IsNullOrEmpty(value.ToString())) value = "Select a Value"; return value; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } View Sample in GitHub.
You can’t add the StackedHeaderRows in WPF DataGrid (SfDataGrid) while generating the column automatically. But you can achieve this by using AutoGeneratingColumn event. private void Sfgrid_AutoGeneratingColumn(object sender, Syncfusion.UI.Xaml.Grid.AutoGeneratingColumnArgs e) { if (sfgrid.StackedHeaderRows.Count == 0) { var gridSHRow = new Syncfusion.UI.Xaml.Grid.StackedHeaderRow(); gridSHRow.StackedColumns.Add(new Syncfusion.UI.Xaml.Grid.StackedColumn { ChildColumns = "OrderID,CustomerID", HeaderText = "ID" }); gridSHRow.StackedColumns.Add(new Syncfusion.UI.Xaml.Grid.StackedColumn { ChildColumns = "ProductName,OrderDate,Quantity,UnitPrice", HeaderText = "Order Details" }); gridSHRow.StackedColumns.Add(new Syncfusion.UI.Xaml.Grid.StackedColumn { ChildColumns = "DeliveryDelay,ShipAddress,ContactNumber", HeaderText = "Delivery Details" }); sfgrid.StackedHeaderRows.Add(gridSHRow); } } View Sample in GitHub
In WinForms DataGrid, drop down of GridComboBoxColumn will open when double clicking the cell. But, you can open the drop down by press the Tab key using a custom renderer can be derived from GridComboBoxCellRenderer. In the custom renderer, the OnKeyUp method can be overridden to show the dropdown. public class GridComboBoxCellRendererExt : GridComboBoxCellRenderer { SfDataGrid dataGrid; SfComboBox SfCombo; public GridComboBoxCellRendererExt(SfDataGrid sfDataGrid) { dataGrid = sfDataGrid; } protected override void OnKeyUp(DataColumnBase dataColumn, RowColumnIndex rowColumnIndex, KeyEventArgs e) { if (e.KeyData == Keys.Tab) { dataGrid.CurrentCell.BeginEdit(); //To open the dropdown SfCombo.ShowDropDown(); } } } //To add custom ComboBox renderer to DataGrid this.sfDataGrid.CellRenderers.Remove("ComboBox"); this.sfDataGrid.CellRenderers.Add("ComboBox", new GridComboBoxCellRendererExt(sfDataGrid)); //To add a combo box column in grid. sfDataGrid.Columns.Add(new GridComboBoxColumn() { MappingName = "ShipCityID", HeaderText = "Ship City", ValueMember = "ShipCityID", DisplayMember = "ShipCityName", IDataSourceSelector = new CustomSelector() }); View sample in GitHub ConclusionI hope you enjoyed learning about how to modify the GridHyperLinkColumn text in WinForms DataGrid.You can refer to our WinForms DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WinForms DataGrid example to understand how to create and manipulate data.For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
WPF DataGrid (SfDataGrid) does not provide the support to show the different currency symbol based on the data in GridCurrencyColumn. You can achieve this by adding converter for currency symbol and assigned it for edit element in OnInitializeEditElement method of GridCellCurrencyRenderer. public class CurrencyConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var val = value as Employee; if (val == null) return "C"; var cultureInfo = new CultureInfo("fr-FR"); if (val.EmployeeID > 1005) return "F"; return cultureInfo.NumberFormat.CurrencySymbol; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } } public class GridCellCurrencyRendererExt : GridCellCurrencyRenderer { public override void OnInitializeDisplayElement(DataColumnBase dataColumn, TextBlock uiElement, object dataContext) { base.OnInitializeDisplayElement(dataColumn, uiElement, dataContext); } public override void OnInitializeEditElement(DataColumnBase dataColumn, CurrencyTextBox uiElement, object dataContext) { base.OnInitializeEditElement(dataColumn, uiElement, dataContext); var binding = new Binding {Converter=new CurrencyConverter() }; uiElement.SetBinding(CurrencyTextBox.CurrencySymbolProperty, binding); } } public class SfDataGridBehavior : Behavior<SfDataGrid> { protected override void OnAttached() { base.OnAttached(); this.AssociatedObject.CellRenderers.Remove("Currency"); this.AssociatedObject.CellRenderers.Add("Currency", new GridCellCurrencyRendererExt()); } } View Sample in GitHub
By default, you can add either text or button in a GridColumn but, you can add both button and text in a column by customizing GridTextBoxCellRenderer. In the custom renderer, the OnRender method can be overridden to draw buttons in the cells. public class GridTextButtonCellRenderer : GridTextBoxCellRenderer { public GridTextButtonCellRenderer(SfDataGrid dataGrid) { IsEditable = true; DataGrid = dataGrid; } protected override void OnRender(Graphics paint, Rectangle cellRect, string cellValue, CellStyleInfo style, DataColumnBase column, RowColumnIndex rowColumnIndex) { base.OnRender(paint, cellRect, cellValue, style, column, rowColumnIndex); //To set the rectangle for button in the cell. var rect = new Rectangle(cellRect.Location.X + cellRect.Width - 22, cellRect.Location.Y, 20, cellRect.Height); (column.GridColumn as GridTextButtonColumn).CellButton = new CellButton(); (column.GridColumn as GridTextButtonColumn).CellButton.Image = Image.FromFile(@"..\..\Images\icons.png"); (column.GridColumn as GridTextButtonColumn).CellButton.TextImageRelation = TextImageRelation.ImageBeforeText; PropertyInfo highlightedItemProperty = (column.GridColumn as GridTextButtonColumn).CellButton.GetType().GetProperties(BindingFlags.NonPublic | BindingFlags.Instance).Single(pi => pi.Name == "Bounds"); highlightedItemProperty.SetValue((column.GridColumn as GridTextButtonColumn).CellButton, rect); //To draw the button in cell DrawButton(paint, cellRect, rect, "...", new ButtonCellStyleInfo(), column, rowColumnIndex); } } //To add custom renderer into SfDataGrid. this.sfDataGrid.CellRenderers.Add("TextButton", new GridTextButtonCellRenderer(this.sfDataGrid)); //To add TextButtonColumn in grid this.sfDataGrid.Columns.Add(new GridTextButtonColumn() { MappingName = "CustomerID", Width = 140 }); View sample in GitHub
By default, SfDataGrid doesn’t have a build in RadioButtonColumn, but we can create the GridRadioButtonColumn by customizing the GridColumn, RadioButtonAdv and GridCellRendererBase in SfDataGrid. [ToolboxItem(false)] public partial class GridCellRadioButton : RadioButtonAdv { public GridCellRadioButton() { } /// <summary> /// Draws check mark of the radio button. /// </summary> /// <param name="g">Graphics object</param> public void DrawSelectedCheckMark(Graphics g, Rectangle mrectBox, RadioButtonAdv radio, Color circleBackColor, Color iconColor) { Rectangle rect = mrectBox; rect.Inflate((int)DpiAware.LogicalToDeviceUnits(-5), (int)DpiAware.LogicalToDeviceUnits(-5)); using (Pen pen = new Pen(circleBackColor)) { g.DrawEllipse(pen, rect); } rect.Inflate(-1, -1); using (GraphicsPath path = this.GetCheckMarkPath(rect)) { using (PathGradientBrush brush = new PathGradientBrush(path)) { brush.CenterColor = iconColor; brush.CenterPoint = new PointF((float)rect.X + 1, (float)rect.Y + 1); brush.SurroundColors = new Color[] { iconColor }; SmoothingMode mode = SmoothingMode.AntiAlias; g.SmoothingMode = mode; g.FillPath(brush, path); } } using (GraphicsPath path = this.GetCheckMarkBorderPath(rect)) { using (Pen pen = new Pen(iconColor)) { g.DrawPath(pen, path); } } } internal GraphicsPath GetCheckMarkBorderPath(Rectangle rect) { GraphicsPath path = new GraphicsPath(); #region Fortouch path.AddEllipse(rect); path.CloseFigure(); #endregion return path; } internal GraphicsPath GetCheckMarkPath(Rectangle rect) { GraphicsPath path = new GraphicsPath(); path.AddEllipse(rect); path.CloseFigure(); return path; } public void DrawBorder(Graphics g, Color borderColor, Rectangle mrectBox, RadioButtonAdv radioButtonAdv) { Rectangle rect = mrectBox; rect.Inflate(-1, -1); g.SmoothingMode = SmoothingMode.AntiAlias; g.CompositingQuality = CompositingQuality.AssumeLinear; using (Pen pen = new Pen(borderColor)) { pen.Width = 1; g.DrawEllipse(pen, rect); } } } public class GridRadioButtonCellRender : GridCellRendererBase { public GridRadioButtonCellRender(SfDataGrid dataGrid, Options options) { IsEditable = true; DataGrid = dataGrid; RadioOptions = options; } protected Options RadioOptions { get; set; } protected List<GridCellRadioButton> RadioButtonCollection { get; set; } /// <summary> /// Gets or Sets to specifies the datagrid. /// </summary> protected SfDataGrid DataGrid { get; set; } protected override void OnRender(Graphics paint, Rectangle cellRect, string cellValue, CellStyleInfo style, DataColumnBase column, RowColumnIndex rowColumnIndex) { int starHeight, starWidth; Rectangle drawArea; var padding = 5; starWidth = 16; starHeight = 16; var RadioButtonColumn = column.GridColumn as GridRadioButtonColumn; drawArea = new Rectangle(cellRect.X + padding, cellRect.Y + ((cellRect.Height / 2) - (starHeight / 2)), starWidth, starHeight); RadioButtonCollection = new List<GridCellRadioButton>(); for (int i = 0; i < RadioButtonColumn.ItemCount; i++) { var radioButton = new GridCellRadioButton(); radioButton.Location = new Point(drawArea.X, drawArea.Y); radioButton.Width = starWidth; radioButton.Height = starHeight; //Draw outer border of RadioButton radioButton.DrawBorder(paint, Color.Black, drawArea, radioButton); Point point = new Point(drawArea.X + drawArea.Width + 2, drawArea.Y); Font font = style.GetFont() != Control.DefaultFont ? style.GetFont() : Control.DefaultFont; int value = i; var buttonValue = ((Options)value).ToString(); //Draw string for RadioButton paint.DrawString(buttonValue, font, new SolidBrush(Color.Gray), point); if (buttonValue.Equals(cellValue)) { radioButton.DrawSelectedCheckMark(paint, drawArea, radioButton, Color.Black, Color.Black); } //Add RadioButton to Cell RadioButtonCollection.Add(radioButton); //Set the start point for next RadioButton Size stringlenth = TextRenderer.MeasureText((RadioOptions = 0).ToString(), font); drawArea.X += drawArea.Width + 10 + stringlenth.Width; } } protected override void OnMouseDown(DataColumnBase dataColumn, RowColumnIndex rowColumnIndex, MouseEventArgs e) { var radiobuttoncollection = (dataColumn.Renderer as GridRadioButtonCellRender).RadioButtonCollection; PropertyInfo dataRow = (dataColumn as DataColumnBase).GetType().GetProperty("DataRow", System.Reflection.BindingFlags.NonPublic | System.Reflection.BindingFlags.Instance); DataRow rowdata = (DataRow)dataRow.GetValue(dataColumn as DataColumnBase); for (int i = 0; i < radiobuttoncollection.Count; i++) { var rect = radiobuttoncollection[i].Bounds; if (e.Location.X > rect.X && e.Location.X < (rect.X + rect.Width)) { radiobuttoncollection[i].Checked = true; (rowdata.RowData as OrderInfo).RadioOptions = (Options)i; DataGrid.TableControl.Invalidate(rect, true); } } } } public class GridRadioButtonColumn : GridColumn { public GridRadioButtonColumn() { SetCellType("RadioButton"); } private int itemCount; public int ItemCount { get { return itemCount; } set { itemCount = value; } } } this.sfDataGrid1.Columns.Add(new GridRadioButtonColumn() { MappingName = "RadioOptions", ItemCount = 3, Width = 140 }); View samples in GitHub
