Learn how to take advantage of our new component in your .NET Core development, as we create a sample application with RadEntityFrameworkDataSource using Sqlite.
If you are familiar with our Telerik UI for WPF components, you might have already used the RadEntityFrameworkDataSource (if you haven't, go ahead and check it out). It allows for easy integration between the UI and data coming from Entity Framework. With the R3 2020 version of UI for WPF we introduced a brand new component that brings all of the same features to Entity Framework Core—RadEntityFrameworkCoreDataSource (REFCDS). In this blog post, we will go through the steps of creating a sample application to showcase the control.
Creating the Project and Installing Dependencies
Before we get to the fun part, we need to take care of a few things. Start off by creating a new .NET Core 3.1 application. After that install the NuGet packages that we will work with.
Defining our Models and DbContext
We will implement two models that will describe a blog and a blog post (being kind of "self-aware").
public class Blog
{
public int BlogId { get; set; }
public string Technology { get; set; }
public string Url { get; set; }
public List<Post> Posts { get; } = new List<Post>();
}
public class Post
{
public int PostId { get; set; }
public string Title { get; set; }
public string Url { get; set; }
public int BlogId { get; set; }
public Blog Blog { get; set; }
}
public class BloggingContext : DbContext
{
public BloggingContext()
{
Database.EnsureCreated();
}
public DbSet<Blog> Blogs { get; set; }
public DbSet<Post> Posts { get; set; }
// In a real-world application you should not keep your connection string in such a manner: https://docs.microsoft.com/en-us/ef/core/miscellaneous/connection-strings
protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
=> optionsBuilder.UseSqlite("Data Source=blogging.db");
}
By now you have probably figured out the we are working with Sqlite. However Entity Framework Core supports other Database Providers and you can feel free to experiment with them.
Creating the Database
For this tutorial we are going to use the code first approach for generating a database. In order to generate it, you can follow these steps:
- Open the Package Manager Console in Visual Studio.
- Execute the "Add-Migration Initial" command followed by the "Update-Database" command. After that you should have a "blogging.db" database created in your project directory.
Creating the BloggingContext
Next up, we will create the DbContext and we will populate it with some hardcoded data. I will leave the part of extracting some data from a blog(s) for homework ;)
public partial class MainWindow : Window
{
public MainWindow()
{
StyleManager.ApplicationTheme = new FluentTheme();
InitializeComponent();
var bloggingContext = new BloggingContext();
this.AddData(bloggingContext);
this.EFCDS.DbContext = bloggingContext;
}
private void AddData(BloggingContext context)
{
var dotNetBlog = new Blog() { Url = "https://www.telerik.com/blogs/.net", Technology = ".NET" };
var post = new Post() { Blog = dotNetBlog, Title = "Telerik UI for WPF R3 2020 SP: 80+ Improvements and New Features", Url = "https://www.telerik.com/blogs/telerik-ui-for-wpf-r3-2020-sp-80-improvements-new-features" };
context.Posts.Add(post);
post = new Post() { Blog = dotNetBlog, Title = "Telerik UI for WPF R3 2020: New AutoSuggestBox, Office2019 Theme, Multithumb Slider & More", Url = "https://www.telerik.com/blogs/whats-new-telerik-ui-for-wpf-r3-2020-autosuggestbox-office2019-theme-more" };
context.Posts.Add(post);
post = new Post() { Blog = dotNetBlog, Title = "Suggested for You—The Brand-New RadAutoSuggestBox for WPF", Url = "https://www.telerik.com/blogs/suggested-for-you-brand-new-radautosuggestbox-for-wpf" };
context.Posts.Add(post);
context.Blogs.Add(dotNetBlog);
var blazorBlog = new Blog() { Url = "https://www.telerik.com/blogs/tag/blazor", Technology = "Blazor" };
post = new Post() { Blog = blazorBlog, Title = "Should Your Enterprise Pick Angular, React or Blazor?", Url = "https://www.telerik.com/blogs/should-enterprise-pick-angular-react-blazor" };
context.Posts.Add(post);
post = new Post() { Blog = blazorBlog, Title = "Is Blazor Safe for Your Enterprise to Bet On?", Url = "https://www.telerik.com/blogs/is-blazor-safe-enterprise-bet" };
context.Posts.Add(post);
post = new Post() { Blog = blazorBlog, Title = "Telerik UI for Blazor 2.18.0—Masked Textbox, Text Area, Progress Bar, RadioGroup & More!", Url = "https://www.telerik.com/blogs/telerik-ui-for-blazor-2-18-0-masked-textbox-text-area-progress-bar-radiogroup-more" };
context.Posts.Add(post);
context.Blogs.Add(dotNetBlog);
context.SaveChanges();
}
}
Wiring Up the View
All that is left is to setup the XAML in order to display our data. We will use the RadGridView and set its ItemsSource to the DataView property of the RadEntityFrameworkCoreDataSource.
<Grid xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:sys="clr-namespace:System;assembly=System.Runtime">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<telerik:RadEntityFrameworkCoreDataSource x:Name="EFCDS" QueryName="Blogs">
<telerik:RadEntityFrameworkCoreDataSource.RelatedObjects>
<sys:String>Posts</sys:String>
</telerik:RadEntityFrameworkCoreDataSource.RelatedObjects>
</telerik:RadEntityFrameworkCoreDataSource>
<telerik:RadGridView GroupRenderMode="Flat" ItemsSource="{Binding DataView, ElementName=EFCDS}" AutoGenerateColumns="False">
<telerik:RadGridView.Columns>
<telerik:GridViewToggleRowDetailsColumn />
<telerik:GridViewDataColumn DataMemberBinding="{Binding BlogId}" />
<telerik:GridViewHyperlinkColumn Header="Technology" DataMemberBinding="{Binding Url}" ContentBinding="{Binding Technology}" />
</telerik:RadGridView.Columns>
<telerik:RadGridView.RowDetailsTemplate>
<DataTemplate>
<telerik:RadGridView GroupRenderMode="Flat" ItemsSource="{Binding Posts}" AutoGenerateColumns="False">
<telerik:RadGridView.Columns>
<telerik:GridViewDataColumn DataMemberBinding="{Binding PostId}" />
<telerik:GridViewHyperlinkColumn Header="Link" DataMemberBinding="{Binding Url}" ContentBinding="{Binding Title}" />
</telerik:RadGridView.Columns>
</telerik:RadGridView>
</DataTemplate>
</telerik:RadGridView.RowDetailsTemplate>
</telerik:RadGridView>
</Grid>
Here you go! The resulting view in the Fluent theme.
Share Your Feedback
We would love to hear from you. Visit our WPF feedback portal and feel free to drop us a new feature request.
Don't wait and try out the latest Telerik UI for WPF.
In case you missed it, here are some of the updates from the R3 2020 SP release.