Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
146 changes: 146 additions & 0 deletions MAUI/DataGrid/columns.md
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,152 @@ private void SfDataGrid_AutoGeneratingColumn(object sender, DataGridAutoGenerati
{% endhighlight %}
{% endtabs %}

### Data Annotations with AutoGenerateColumns

SfDataGrid support to generate the columns based on built-in [Data Annotation Attributes](https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc490428(v=vs.95)).

N> Data annotations are only applied when the DataGrid.AutoGenerateColumns property is set to True.

#### Exclude column

You can skip the column generation using AutoGenerateField property.

{% tabs %}
{% highlight c# %}
[Display(AutoGenerateField = false, Description = "OrderID field is not generated in UI")]
public int OrderID
{
get { return orderID; }
set { orderID = value; }
}
{% endhighlight %}
{% endtabs %}

#### Editing

When the `Editable` attribute is set to true, it enables editing of the cell values.

{% tabs %}
{% highlight c# %}
[Editable(true)]
public string Country
{
get { return country; }
set { country = value; }
}
{% endhighlight %}
{% endtabs %}

#### Change the HeaderText of column

You can customize header text of column using `Display.Name` property or `Display.ShortName` property.

{% tabs %}
{% highlight c# %}
[Display(Name="Name of the Customer",Description="CustomerName is necessary for identification ")]
public string CustomerName
{
get { return customerName; }
set { customerName = value; }
}
{% endhighlight %}
{% endtabs %}

#### Change the order of the columns

You can change the order of columns using the `Display.Order` property. Columns are arranged based on the specified order value, with lower values appearing first.

{% tabs %}
{% highlight c# %}
[Display(Order=1)]
public string CustomerID
{
get { return customerId; }
set { customerId = value; }
}

[Display(Order=0)]
public int OrderID
{
get { return orderID; }
set { orderID = value; }
}
{% endhighlight %}
{% endtabs %}

The OrderID and CustomerID column rearranged based on specified order.

<img alt="Changing Columns Order in Maui DataGrid" src="Images\columns\maui-datagrid-order.png" width="404"/>

#### DataGrid read-only column

You can disable the editing for a column using `ReadOnly` attribute.

{% tabs %}
{% highlight c# %}
[ReadOnly(true)]
public string Country
{
get { return country; }
set { country = value; }
}
{% endhighlight %}
{% endtabs %}

#### Format datagrid columns using DisplayFormat attribute

When the [DisplayFormat](https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc679253%28v%3dvs.95%29) attribute is defined for properties in the model, the auto-generated columns in the DataGrid created via DataAnnotations will be formatted using the [DataFormatString](https://learn.microsoft.com/en-us/previous-versions/windows/silverlight/dotnet-windows-silverlight/cc679306%28v%3dvs.95%29) specified in that attribute.

{% tabs %}
{% highlight c# %}
[DisplayFormat(DataFormatString = "yyyy")]
public DateTime OrderDate
{
get { return _orderDate; }
set { orderDate = value; }
}

[DisplayFormat(DataFormatString = "Country is {0}")]
public string Country
{
get { return country; }
set { country = value; }
}
{% endhighlight %}
{% endtabs %}

<img alt="Maui DataGrid with Columns Formatting" src="Images\columns\maui-datagrid-formatting.png" width="404"/>

#### Group columns under stacked header
Enables grouping multiple columns under a shared stacked header in the user interface. It also supports hierarchical (nested) grouping by using the / separator in the ChildColumns property.

{% tabs %}
{% highlight c# %}
[Display(GroupName = "Order Details")]
public string? OrderID
{
get { return orderID; }
set { this.orderID = value; }
}

[Display(GroupName = "Order Details")]
public DateTime OrderDate
{
get { return _orderDate; }
set { _orderDate = value; }
}

[Display(GroupName = "Order Details")]
public string? ShipCountry
{
get { return shipCountry; }
set { this.shipCountry = value; }
}
{% endhighlight %}
{% endtabs %}

<img alt="Maui DataGrid group columns with stacked header" src="Images\columns\maui-datagrid-groupName.png" width="404"/>

## Manually generate columns

The `SfDataGrid` allows to define the columns manually by adding the [DataGridColumn](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridColumn.html) objects to the [SfDataGrid.Columns](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.SfDataGrid.html#Syncfusion_Maui_DataGrid_SfDataGrid_Columns) collection. If you want to show only the manually defined columns in the view, you can achieve that by setting the `SfDataGrid.AutoGenerateColumnsMode` property to `None`.
Expand Down