This guide explains how the sample integrates AI-powered anomaly detection into a Syncfusion .NET MAUI DataGrid (SfDataGrid). It walks through the XAML layout, the C# logic that gathers grid data, sends it to an AI service, and augments the grid with a new Anomaly Description column.
It defines the SfDataGrid bound to MachineDataCollection in the view model, customizes grid cell/header styles, and includes an ActivityIndicator to show progress while AI analysis runs. A tappable Frame triggers the anomaly detection workflow.
<ContentPage.BindingContext>
<ViewModel:MachineDataRepository x:Name="viewModel"/>
</ContentPage.BindingContext>
<ContentPage.Resources>
<local:ColorConverter x:Key="converter"/>
<Style TargetType="syncfusion:DataGridCell">
<Setter Property="Background" Value="{Binding Source={RelativeSource Mode=Self}, Converter={StaticResource Key=converter}}"/>
<Setter Property="FontSize"
Value="14" />
</Style>
<Style TargetType="syncfusion:DataGridHeaderCell">
<Setter Property="FontFamily"
Value="Roboto-Medium" />
<Setter Property="FontSize"
Value="14" />
</Style>
</ContentPage.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="56" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<HorizontalStackLayout HeightRequest="65"
Margin="10">
<Frame HeightRequest="40"
WidthRequest="137"
HasShadow="False"
Padding="0"
Margin="5"
Background="Transparent"
HorizontalOptions="Center"
VerticalOptions="Center"
BorderColor="Gray"
CornerRadius="20">
<Frame.GestureRecognizers>
<TapGestureRecognizer NumberOfTapsRequired="1"
Tapped="Button_Clicked" />
</Frame.GestureRecognizers>
<Grid x:Name="myGrid"
ColumnDefinitions="150"
RowDefinitions="40">
<Label Grid.Column="0"
Text="Detect anomoly data"
FontSize="13"
HeightRequest="20"
WidthRequest="800"
Padding="3"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Center" />
</Grid>
</Frame>
</HorizontalStackLayout>
<!--<Button Clicked="Button_Clicked" Margin="5" Text="Detect Anomoly Data" Height="25" Width="100" HorizontalOptions="Start"/>-->
<syncfusion:SfDataGrid x:Name="dataGrid"
Grid.Row="1"
HeaderRowHeight="52"
HorizontalScrollBarVisibility="Always"
VerticalScrollBarVisibility="Always"
Margin="5"
ColumnWidthMode="Fill"
AutoGenerateColumnsMode="None"
ItemsSource="{Binding MachineDataCollection}">
<syncfusion:SfDataGrid.Columns>
<syncfusion:DataGridTextColumn HeaderText="Machine ID" MinimumWidth="120" MappingName="MachineID" />
<syncfusion:DataGridTextColumn HeaderText="Temperature" MinimumWidth="120" MappingName="Temperature" />
<syncfusion:DataGridTextColumn HeaderText="Pressure" MinimumWidth="120" MappingName="Pressure" />
<syncfusion:DataGridTextColumn HeaderText="Voltage" MinimumWidth="120" MappingName="Voltage" />
<syncfusion:DataGridTextColumn HeaderText="Motor Speed" MinimumWidth="120" MappingName="MotorSpeed" />
<syncfusion:DataGridTextColumn HeaderText="Production Rate" MinimumWidth="140" MappingName="ProductionRate" />
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>
<ActivityIndicator IsRunning="False"
x:Name="Indicator"
Grid.Row="1"
VerticalOptions="Center"
HorizontalOptions="Center"
Color="Black" />
</Grid>
The code-behind assembles a GridReport from the grid’s ItemsSource, serializes it, and builds a natural-language prompt. It then calls an Azure OpenAI deployment to get anomaly results. When results arrive, the code dynamically adds a new column (Anomaly Description) and updates the bound data rows to show the AI-generated explanation. If AI is unavailable, a fallback path computes the max values for several metrics and flags the corresponding row with a sensible default message.
Key parts from MainPage.xaml.cs:
async private void Button_Clicked(object sender, EventArgs e)
{
Indicator.IsRunning = true;
gridReport = new GridReport()
{
DataSource = (this.dataGrid.BindingContext as MachineDataRepository)!.MachineDataCollection,
};
var gridReportJson = JsonConvert.SerializeObject(gridReport);
string userInput = ValidateAndGeneratePrompt(gridReportJson);
var result = await openAi.GetResponseFromOpenAI(userInput);
if (result != null)
{
result = result.Replace("```json", "").Replace("```", "").Trim();
var deserializeResult = JsonConvert.DeserializeObject<GridReport>(result)!;
// Add the anomaly column dynamically
var anomalyColumn = new DataGridTextColumn
{
HeaderText = "Anomaly Description",
MappingName = "AnomalyDescription",
ColumnWidthMode = ColumnWidthMode.Auto
};
this.dataGrid.Columns.Add(anomalyColumn);
// Update the source with AI-provided text
var ids = deserializeResult.DataSource.Select(x => x.MachineID).ToArray();
int index = -1;
foreach (var row in gridReport.DataSource)
{
if (ids.Contains(row.MachineID))
{
index++;
row.AnomalyDescription = deserializeResult.DataSource[index].AnomalyDescription;
}
}
}
else
{
// Fallback: flag max Temperature/Voltage/MotorSpeed/Pressure
// and add an AnomalyDescription column if missing
var des = new DataGridTextColumn
{
HeaderText = "AnomalyDescription",
MappingName = "AnomalyDescription",
MinimumWidth = 250
};
this.dataGrid.Columns.Add(des);
// ... set AnomalyDescription based on max values
}
Indicator.IsRunning = false;
}
The page also introduces a ColorConverter that inspects the current cell context and the AnomalyDescription text to color suspicious values. Cells in columns such as Temperature, Voltage, Pressure, or MotorSpeed are highlighted when the description mentions that metric; the AnomalyDescription column itself is marked red for flagged rows.
public class ColorConverter : IValueConverter
{
static string[] data;
public void GetString(string[] Data) => data = Data;
object IValueConverter.Convert(object value, Type targetType, object parameter, CultureInfo info)
{
var gridCell = value as DataGridCell;
if (gridCell != null && data != null)
{
var rowData = (gridCell.DataColumn!.RowData as MachineData)!.AnomalyDescription;
var mappingName = gridCell.DataColumn!.DataGridColumn!.MappingName;
if (mappingName == "AnomalyDescription")
{
return rowData != null && data.Contains(rowData)
? Colors.IndianRed
: Colors.LightGreen;
}
var keywords = new Dictionary<string, string>
{
{ "Temperature", "temperature" },
{ "Voltage", "voltage" },
{ "Pressure", "pressure" },
{ "MotorSpeed", "motor speed" }
};
if (keywords.TryGetValue(mappingName, out var k) && rowData.Contains(k))
return Colors.IndianRed;
}
return Colors.White;
}
public object ConvertBack(object value, Type t, object p, CultureInfo c) => throw new NotImplementedException();
}
- Serialize the grid’s data (GridReport) to JSON and craft a descriptive prompt that instructs the model to return only JSON.
- Call Azure OpenAI using the provided deployment name. The response is normalized by removing markdown code fences and then deserialized back into the same GridReport shape.
- Dynamically add a DataGridTextColumn to display AnomalyDescription and hydrate the bound items with the AI results.
- Use ColorConverter to visually flag anomalous cells and the description column for quick scanning.
- If the AI call fails, the fallback path finds extreme values and sets a reasonable default AnomalyDescription for one or more rows.
Note on secrets: do not hard-code keys in source. Replace any placeholder/API key with a secure configuration (environment variables, user secrets, or secure storage). Example in OpenAi.cs should be adapted before publishing.
I hope you enjoyed learning about how to leveraging AI with .NET MAUI DataGrid (SfDataGrid).
You can refer to our .NET MAUI DataGrid’s feature tour page to learn 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 on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to explore our .NET MAUI DataGrid and other .NET MAUI components.
If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac or feedback portal, or the feedback portal. We are always happy to assist you!