![]() ![]() In this tutorial, we'll add a simple collapsible panel, but if you had more information to add you could create a separate page for this purpose. That's not a problem, but here we'll make it easier to set a customer's initial values. This allows you to avoid unnecessary calls, and to only push changes from updated customers to the database.Īdding a new customer presents a challenge, as the customer will appear as a blank row if you add it to the UI before providing values for its properties. This code utilizes the IsModified property of ViewModels\CustomerViewModel.cs, which is automatically updated whenever the customer is changed. Where(x => x.IsModified).Select(x => x.Model))Īwait (modifiedCustomer) Update it with this code, to push changes to the database and to retrieve any new information: public async Task UpdateCustomersAsync()įoreach (var modifiedCustomer in Customers Return to ViewModels\CustomerListPageViewModel.cs, and navigate to the UpdateCustomersAsync method. Now that you can see and edit your customers, you'll need to be able to push your changes to the database, and to pull any updates that have been made by others. You can now see the customers displayed in the grid, and make changes to the underlying data through your UI. The TwoWay binding mode allows the changes made in the UI to be reflected on that object. This associates the user's selection in the data grid with the corresponding Customer object in the code-behind. Add the following lines of code to it: ItemsSource="" You've added the data grid, but it needs data to display. xmlns:telerikGrid="using:Telerik.UI."īelow the CommandBar within the main RelativePanel of the View, add a RadDataGrid control, with some basic configuration options: Add the following line of code within the Page tag to declare a mapping to the Telerik namespace containing the data grid. Open Views\CustomerListPage.xaml from the Solution Explorer. ![]() NuGet package has already been included in this project. The Telerik.UI.for.UniversalWindowsPlatform To do this, we'll be using a pre-made third-party RadDataGrid control. Part 2: Add the DataGridīefore you begin to operate on customer data, you'll need to add a UI control to display those customers. You won't need to add anything to this class, but some of the code you'll add elsewhere will reference it.įor more information on how the sample is constructed, check out the app structure overview. UpdateCustomersAsync, which refreshes the UI to reflect any customers added or deleted.ĬustomerViewModel is a wrapper for a customer's information, which tracks whether or not it's been recently modified.SaveInitialChangesAsync, which adds a new customer's information to the database.GetCustomerListAsync, which retrieves a list of customers from the database.DeleteAndUpdateAsync, which handles the delete button's logic.DeleteNewCustomerAsync, which removes a new customer before it's displayed in the UI.CreateNewCustomerAsync, which initializes a new CustomerViewModel object.In this tutorial, you'll add some new code, and implement the following methods: Every user action taken in the view will be passed into this file for processing. ![]() ViewModels\CustomerListPageViewModel.cs is where the fundamental logic of the app is located. A StackPanel to set the initial values for a new customer.A RadDataGrid for displaying and editing your customers.This tutorial will walk you through adding these elements: Any time you need to add or change a visual element in the UI, you'll do it in this file. ViewsĬustomerListPage.xaml is the app's View, which defines the UI for the single page in this tutorial. Before you begin, here's where you'll be working. From here, you'll start by implementing a UI control to display those customers, and then move on to adding in operations against the database. Though it's not visible to you, the app already includes a local SQLite database provisioned with a few test customers. If you run your app immediately after opening it, you'll see a few buttons at the top of a blank screen. Until this tutorial and code are updated, there will be differences between the two samples. This tutorial is based on the Customer Orders Database sample which has recently been updated to make use of WinUI and the Windows App SDK.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |