How to load certain tables of a DataGrid - MVVM - UWP?

Question

How to load certain tables of a DataGrid - MVVM - UWP?

Navigation

#1 by (0 votes)

0

I just want to create a Datagrid to load a query from the database, using this example link but I do not understand exactly how I charge the list.

But I found this code

<controls: DataGrid x:Name = "DataGrid" ItemsSource = "{Binding Plactas}" SelectedItem = "{Binding PlactaSelected, Mode = TwoWay}" DefaultOrderIndex = "0" SelectionMode = "Extended">

In the ViewModel I already have the list called Plactas and it shows the information, but I need that only certain columns appear.

The other thing is that I do not know what other option I have to create DataGrids

c# datagrid consulta

asked by Wilmilcard 01.11.2018 в 15:30

source

1 answer

I have the following list of images of a dynamic php array, how do I click on any image to show it on a div? Post from Google Chrome Extension to API in Laravel

score 0 · Accepted Answer

VERY IMPORTANTLY, DO NOT CREATE EMPTY COLUMNS, WITHOUT LINKING, IF YOU CRANK WILL GENERATE AN ERROR AND THE LIST WILL NOT BE LOADED, IF YOU CREATE 3 COLUMNS, YOU MUST LINK TO THE LIST IN THE THREE COLUMNS

First things first: we'll see what documentation we have about this, there are two OpenSource libraries that allow us to generate DataGrids in UWP, I understand that the DataGrid can not be native within the UWP development environment, so when we review we see that has 2 forms this first link:

1- Documentation page: link

This is very easy to load easily:

Download the NuGet: link

or look in the NuGet window: "MyToolkit.Extended" and install

import the use in XAML: xmlns:controls="using:MyToolkit.Controls" The name Plactas is the list in the VIEWMODEL and it is declared like this

public List<Placta> Plactas { get => plactas; set => Set(ref plactas, value); }
private List<Placta> plactas;

This is the Code in XAML of the List:

<Grid>
  <controls: DataGrid x: Name = "DataGrid" ItemsSource = "{Binding Plactas}" SelectedItem = "{Binding PlactaSelected, Mode = TwoWay}" DefaultOrderIndex = "0" SelectionMode = "Extended">
     <controls: DataGrid.Columns> <!--This is important here are Columns. Code and Name are fields in the Model-->
         <controls: DataGridTextColumn Width = "150" Header = "Code" Binding = "{Binding Code}" />
         <controls: DataGridTextColumn Width = "300" Header = "Name" Binding = "{Binding Name}" />
      </controls:DataGrid.Columns>
      <controls: DataGrid.ItemDetailsTemplate>
            <DataTemplate> <!--Here create comments when you selected item-->
                 <StackPanel Margin = "10,10,10,5">
                       <TextBlock Text = "Date of creation:" FontWeight = "Bold" />
                       <TextBlock Text = "{Binding FCreated}" />
                  </StackPanel>
             </DataTemplate>
       </controls:DataGrid.ItemDetailsTemplate>
   </controls: DataGrid>
</Grid>

EASY !!! but this design may not attract attention, do not worry, that's why I'm here, there's another OpenSource library ... so we'll see a second option.

2- Documentation page: link

Download the NuGet: link

or look in the NuGet window: "Microsoft.Toolkit.Uwp.UI.Controls.DataGrid" and install

import the use in XAML: xmlns:control="using:Microsoft.Toolkit.Uwp.UI.Controls"

Create code in XAML:

<Grid Grid.Row="4">
     <control:DataGrid Grid.Row="1" ItemsSource="{Binding Plactas}" Margin="12" GridLinesVisibility="All" AlternatingRowBackground="LightGray" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" AutoGenerateColumns="False">
           <control:DataGrid.Columns>
                  <control:DataGridTextColumn Header="Mountain" Tag="Mountain" Binding="{Binding Codigo}"/>

already this would load the list in the DataGrid

The good thing about this type of DataGrid is that it allows editing much better, here is the documentation so you can visualize the fields and lines: link / datagrid_guidance / styling_formatting_options

This is the result:

On top of the first DataGrid design:

And this is the second design: