diff --git a/MAUI/DataGrid/Images/columns/maui-datagrid-formatting.png b/MAUI/DataGrid/Images/columns/maui-datagrid-formatting.png new file mode 100644 index 000000000..bbf221793 Binary files /dev/null and b/MAUI/DataGrid/Images/columns/maui-datagrid-formatting.png differ diff --git a/MAUI/DataGrid/Images/columns/maui-datagrid-groupName.png b/MAUI/DataGrid/Images/columns/maui-datagrid-groupName.png new file mode 100644 index 000000000..cc0e66c52 Binary files /dev/null and b/MAUI/DataGrid/Images/columns/maui-datagrid-groupName.png differ diff --git a/MAUI/DataGrid/Images/columns/maui-datagrid-order.png b/MAUI/DataGrid/Images/columns/maui-datagrid-order.png new file mode 100644 index 000000000..b6d9a03a8 Binary files /dev/null and b/MAUI/DataGrid/Images/columns/maui-datagrid-order.png differ diff --git a/MAUI/DataGrid/columns.md b/MAUI/DataGrid/columns.md index 0a9a98d0b..c3108f0bb 100644 --- a/MAUI/DataGrid/columns.md +++ b/MAUI/DataGrid/columns.md @@ -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. + +Changing Columns Order in Maui DataGrid + +#### 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 %} + +Maui DataGrid with Columns Formatting + +#### 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 %} + +Maui DataGrid group columns with stacked header + ## 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`.