Skip to content

Commit 04f50a1

Browse files
NirmalKumarYuvarajNirmalKumarYuvaraj
committed
updated sample and content
1 parent b2f2a5c commit 04f50a1

43 files changed

Lines changed: 1327 additions & 2 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 107 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,107 @@
1-
# How-to-display-data-from-Azure-SQL-Database-in-.NET-MAUI-DataGrid
2-
How to display data from Azure SQL Database in .NET MAUI DataGrid?
1+
# How to display data from Azure SQL Database in .NET MAUI DataGrid ?
2+
3+
Displaying data from an Azure SQL Database in a [.NET MAUI DataGrid](https://www.syncfusion.com/maui-controls/maui-datagrid) involves several steps: setting up your Azure SQL Database, connecting to it from your .NET MAUI application, and displaying the retrieved data in a DataGrid. Below is a step-by-step guide to help you achieve this.
4+
5+
6+
### Step 1: Set Up Azure SQL Database
7+
8+
#### 1. Create an Azure SQL Database:
9+
10+
* Log into the [Azure Portal](https://portal.azure.com/).
11+
* Navigate to "SQL Databases" and click "Add".
12+
* Fill in the required details (Database name, server, resource group, etc.) and create the database.
13+
* After creation, go to the database's "Connection strings" and copy the ADO.NET connection string for later use.
14+
15+
#### 2 .Configure Firewall:
16+
17+
* Go to your database settings in the Azure Portal.
18+
* Under "Firewalls and virtual networks", add your IP address to allow access to the database.
19+
20+
### Step 2: Connect to Azure SQL Database
21+
* Install the [Microsoft.Data.SqlClient](https://www.nuget.org/packages/Microsoft.Data.SqlClient) package to interact with SQL Server
22+
23+
* Create a Data Access Layer.
24+
25+
26+
##### C#
27+
28+
Create a class for accessing the database and retrieving data.
29+
Use the ADO.NET connection string copied earlier.
30+
31+
```C#
32+
public class DatabaseService
33+
{
34+
public const string ConnectionString = "Your connection string here";
35+
36+
public IEnumerable<Stocks> PopulateData()
37+
{
38+
var items = new ObservableCollection<Stocks>();
39+
40+
using (SqlConnection conn = new SqlConnection(ConnectionString))
41+
{
42+
conn.Open();
43+
using (SqlCommand cmd = new SqlCommand("SELECT Ticker, CompanyName, LastPrice, Change, ChangePercent, OpenColumn,HighColumn,LowColumn,Volume,MarketCap FROM Stocks", conn))
44+
{
45+
using (SqlDataReader reader = cmd.ExecuteReader())
46+
{
47+
while (reader.Read())
48+
{
49+
items.Add(new Stocks
50+
{
51+
Ticker = reader["Ticker"].ToString(),
52+
CompanyName = reader["CompanyName"].ToString(),
53+
LastPrice = Convert.ToDecimal(reader["LastPrice"]),
54+
Change = Convert.ToDecimal(reader["Change"]),
55+
ChangePercent = Convert.ToDecimal(reader["ChangePercent"]),
56+
OpenColumn = Convert.ToDecimal(reader["OpenColumn"]),
57+
HighColumn = Convert.ToDecimal(reader["HighColumn"]),
58+
LowColumn = Convert.ToDecimal(reader["LowColumn"]),
59+
Volume = Convert.ToInt64(reader["Volume"]),
60+
MarketCap = Convert.ToDecimal(reader["MarketCap"])
61+
});
62+
63+
}
64+
}
65+
}
66+
67+
return items;
68+
}
69+
}
70+
}
71+
72+
```
73+
##### ViewModel
74+
75+
Populate the data in the OnAppearing() method.
76+
77+
```C#
78+
public void InitialyzeAsync()
79+
{
80+
foreach (var item in _service.PopulateData())
81+
{
82+
StockData.Add(item);
83+
}
84+
}
85+
```
86+
87+
#### XAML
88+
```XML
89+
<syncfusion:SfDataGrid x:Name="sfGrid" ColumnWidthMode="Auto"
90+
ItemsSource="{Binding StockData}"/>
91+
```
92+
93+
The following screenshot shows how to to display data from Azure SQL Database in .NET MAUI DataGrid.
94+
95+
![Column formatted using binding](SfDataGridSample_Azure_SQL_DB.png)
96+
97+
[View sample in GitHub](https://github.com/SyncfusionExamples/How-to-display-data-from-Azure-SQL-Database-in-.NET-MAUI-DataGrid)
98+
99+
Take a moment to pursue this [documentation](https://help.syncfusion.com/maui/datagrid/overview), where you can find more about Syncfusion .NET MAUI DataGrid (SfDataGrid) with code examples.
100+
Please refer to this [link](https://www.syncfusion.com/maui-controls/maui-datagrid) to learn about the essential features of Syncfusion .NET MAUI DataGrid(SfDataGrid).
101+
102+
### Conclusion
103+
I hope you enjoyed learning about how to to display data from Azure SQL Database in .NET MAUI DataGrid.
104+
105+
You can refer to our [.NET MAUI DataGrid's feature tour](https://www.syncfusion.com/maui-controls/maui-datagrid) 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.
106+
For current customers, you can check out our .NET MAUI components from the [License and Downloads](https://www.syncfusion.com/account/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.
107+
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our [support forums](https://www.syncfusion.com/forums), [Direct-Trac](https://support.syncfusion.com/account/login?ReturnUrl=%2Faccount%2Fconnect%2Fauthorize%2Fcallback%3Fclient_id%3Dc54e52f3eb3cde0c3f20474f1bc179ed%26redirect_uri%3Dhttps%253A%252F%252Fsupport.syncfusion.com%252Fagent%252Flogincallback%26response_type%3Dcode%26scope%3Dopenid%2520profile%2520agent.api%2520integration.api%2520offline_access%2520kb.api%26state%3D8db41f98953a4d9ba40407b150ad4cf2%26code_challenge%3DvwHoT64z2h21eP_A9g7JWtr3vp3iPrvSjfh5hN5C7IE%26code_challenge_method%3DS256%26response_mode%3Dquery) or [feedback portal](https://www.syncfusion.com/feedback/maui?control=sfdatagrid). We are always happy to assist you!

‎SfDataGridSample/App.xaml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version = "1.0" encoding = "UTF-8" ?>
2+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:SfDataGridSample"
5+
x:Class="SfDataGridSample.App">
6+
<Application.Resources>
7+
<ResourceDictionary>
8+
<ResourceDictionary.MergedDictionaries>
9+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
10+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
11+
</ResourceDictionary.MergedDictionaries>
12+
</ResourceDictionary>
13+
</Application.Resources>
14+
</Application>

‎SfDataGridSample/App.xaml.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
namespace SfDataGridSample
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
9+
MainPage = new AppShell();
10+
}
11+
}
12+
}

‎SfDataGridSample/AppShell.xaml‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="SfDataGridSample.AppShell"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:local="clr-namespace:SfDataGridSample"
7+
Shell.FlyoutBehavior="Disabled"
8+
Title="SfDataGridSample">
9+
10+
<ShellContent
11+
Title="Home"
12+
ContentTemplate="{DataTemplate local:MainPage}"
13+
Route="MainPage" />
14+
15+
</Shell>

‎SfDataGridSample/AppShell.xaml.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace SfDataGridSample
2+
{
3+
public partial class AppShell : Shell
4+
{
5+
public AppShell()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎SfDataGridSample/Converter/TextColorConverter.cs‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
using System.Globalization;
2+
3+
namespace SfDataGridSample.Converter
4+
{
5+
public class TextColorConverter : IValueConverter
6+
{
7+
public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
8+
{
9+
if ((decimal)value! < 0)
10+
return Colors.Red;
11+
else
12+
return Colors.Green;
13+
14+
15+
}
16+
17+
public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
18+
{
19+
throw new NotImplementedException();
20+
}
21+
}
22+
}

‎SfDataGridSample/MainPage.xaml‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:syncfusion="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"
5+
xmlns:viewModel="clr-namespace:SfDataGridSample.ViewModel"
6+
xmlns:converter="clr-namespace:SfDataGridSample.Converter"
7+
x:Class="SfDataGridSample.MainPage">
8+
9+
<ContentPage.BindingContext>
10+
<viewModel:StockViewModel x:Name="_stockViewModel"/>
11+
</ContentPage.BindingContext>
12+
13+
<ContentPage.Resources>
14+
<converter:TextColorConverter x:Key="textColorConverter"/>
15+
<Style TargetType="syncfusion:DataGridCell" x:Key="changeStyle">
16+
<Setter Property="TextColor" Value="{Binding Change,Converter={StaticResource textColorConverter}}"/>
17+
</Style>
18+
<Style TargetType="syncfusion:DataGridCell" x:Key="changePercentStyle">
19+
<Setter Property="TextColor" Value="{Binding ChangePercent,Converter={StaticResource textColorConverter}}"/>
20+
</Style>
21+
22+
</ContentPage.Resources>
23+
24+
25+
<syncfusion:SfDataGrid x:Name="sfGrid" ColumnWidthMode="Auto"
26+
GridLinesVisibility="Both"
27+
HeaderGridLinesVisibility="Both"
28+
ItemsSource="{Binding StockData}">
29+
<syncfusion:SfDataGrid.Columns>
30+
<syncfusion:DataGridTextColumn MappingName="Ticker" />
31+
<syncfusion:DataGridTextColumn MappingName="CompanyName" HeaderText="Name" />
32+
<syncfusion:DataGridNumericColumn MappingName="LastPrice" HeaderText="Last Price" Format="C"/>
33+
<syncfusion:DataGridNumericColumn MappingName="Change" Format="C" CellStyle="{StaticResource changeStyle}"/>
34+
<syncfusion:DataGridNumericColumn MappingName="ChangePercent" HeaderText="Change Percent" CellStyle="{StaticResource changePercentStyle}" Format="C"/>
35+
<syncfusion:DataGridNumericColumn MappingName="OpenColumn" HeaderText="Open" />
36+
<syncfusion:DataGridNumericColumn MappingName="HighColumn" HeaderText="High" />
37+
<syncfusion:DataGridNumericColumn MappingName="LowColumn" HeaderText="Low" />
38+
<syncfusion:DataGridNumericColumn MappingName="Volume" />
39+
<syncfusion:DataGridNumericColumn MappingName="MarketCap" HeaderText="Market Cap" />
40+
</syncfusion:SfDataGrid.Columns>
41+
</syncfusion:SfDataGrid>
42+
43+
44+
45+
</ContentPage>

‎SfDataGridSample/MainPage.xaml.cs‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
using SfDataGridSample.ViewModel;
2+
3+
namespace SfDataGridSample
4+
{
5+
public partial class MainPage : ContentPage
6+
{
7+
public MainPage()
8+
{
9+
InitializeComponent();
10+
11+
}
12+
13+
protected override void OnAppearing()
14+
{
15+
base.OnAppearing();
16+
_stockViewModel.InitialyzeAsync();
17+
}
18+
19+
}
20+
21+
}

‎SfDataGridSample/MauiProgram.cs‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
using Microsoft.Extensions.Logging;
2+
using Syncfusion.Maui.Core.Hosting;
3+
namespace SfDataGridSample
4+
{
5+
public static class MauiProgram
6+
{
7+
public static MauiApp CreateMauiApp()
8+
{
9+
var builder = MauiApp.CreateBuilder();
10+
builder
11+
.UseMauiApp<App>()
12+
.ConfigureSyncfusionCore()
13+
.ConfigureFonts(fonts =>
14+
{
15+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
16+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
17+
});
18+
19+
#if DEBUG
20+
builder.Logging.AddDebug();
21+
#endif
22+
23+
return builder.Build();
24+
}
25+
}
26+
}

‎SfDataGridSample/Model/Stocks.cs‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
7+
namespace SfDataGridSample.Model
8+
{
9+
public class Stocks
10+
{
11+
public int Id { get; set; }
12+
13+
public string? Ticker { get; set; }
14+
15+
public string? CompanyName { get; set; }
16+
17+
public decimal LastPrice { get; set; }
18+
19+
public decimal Change { get; set; }
20+
21+
public decimal ChangePercent { get; set; }
22+
23+
public decimal OpenColumn { get; set; }
24+
25+
public decimal HighColumn { get; set; }
26+
27+
public decimal LowColumn { get; set; }
28+
29+
public long Volume { get; set; }
30+
31+
public decimal MarketCap { get; set; }
32+
}
33+
}

0 commit comments

Comments
 (0)