How to bind data from the DataTable to .NET MAUI ListView(SfListView)?
The .NET MAUI ListView allows you to bind data directly from the DataTable by adding its rows to the collection and binding them to the ItemsSource property.
Populate items into the DataTable and add each DataRow to the collection.
public class ContactsViewModel
{
public ObservableCollection<object> ContactsInfo { get; set; }
public ContactsViewModel()
{
GenerateInfo();
}
private void GenerateInfo()
{
Random random = new Random();
ContactsInfo = new ObservableCollection<object>();
DataTable dt = new DataTable("Contacts");
dt.Columns.Add("ContactID", typeof(Int32));
dt.Columns.Add("ContactName", typeof(string));
dt.Columns.Add("ContactType", typeof(string));
dt.Columns.Add("ContactNumber", typeof(string));
for (int i = 0; i < CustomerNames.Count(); i++)
{
dt.Rows.Add(i + 1, CustomerNames[i], contactType[random.Next(0, 5)], random.Next(100, 400).ToString() + "-" + random.Next(500, 800).ToString() + "-" + random.Next(1000, 2000).ToString());
}
for (int i = 0; i < dt.Rows.Count; i++)
{
ContactsInfo.Add(dt.Rows[i]);
}
}
}Bind the ViewModel collection to the ItemsSource property. Since DataRow is of array type, you can directly bind to the row data using ItemsArray.
<ListView:SfListView x:Name="listView" ItemsSource="{Binding ContactsInfo}" ItemSize="70">
<ListView:SfListView.ItemTemplate>
<DataTemplate>
<Grid x:Name="grid" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="1" />
</Grid.RowDefinitions>
<Grid RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Label Text="{Binding ItemArray[0]}" LineBreakMode="NoWrap" FontSize="16" TextColor="#474747" VerticalOptions="CenterAndExpand" Padding="10,0,0,0"/>
<Grid Grid.Column="1" RowSpacing="1" VerticalOptions="Center">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ItemArray[1]}" VerticalOptions="CenterAndExpand"/>
<Label Grid.Row="1" Grid.Column="0" TextColor="#474747" LineBreakMode="NoWrap" Text="{Binding ItemArray[3]}" FontSize="12" VerticalOptions="StartAndExpand"/>
</Grid>
<Label LineBreakMode="NoWrap" TextColor="#474747" Text="{Binding ItemArray[2]}" FontSize="10" Grid.Row="0" Grid.Column="2" Padding="0,10,10,0" HorizontalOptions="End" VerticalOptions="Start"/>
</Grid>
<StackLayout Grid.Row="1" BackgroundColor="#E4E4E4" HeightRequest="1"/>
</Grid>
</DataTemplate>
</ListView:SfListView.ItemTemplate>
</ListView:SfListView> Download the complete sample on GitHub.
Conclusion
I hope you enjoyed learning how to bind data from the DataTable to .NET MAUI ListView.
You can refer to our .NET MAUI ListView feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI ListView documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI ListView and other .NET MAUI components.
Please let us know in the comments if you have any queries or require clarification. Contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
