WinUI3 | DataGrid ItemsSource DataTable - c#

I want to make a WinUI3 (Win32) application with a DataGrid from Microsoft.Toolkit.
I use MVVM.
My XAML code:
`
<controls:DataGrid
Grid.Row="1" Grid.Column="0"
ItemsSource="{Binding DataTableViewModel}"
Margin="12"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
AutoGenerateColumns="True"
CanUserSortColumns="False"
CanUserReorderColumns="True"
CanUserResizeColumns="True"
ColumnHeaderHeight="32"
MaxColumnWidth="400"
HeadersVisibility="Column"
IsReadOnly="True"
SelectionMode="Extended">
</controls:DataGrid>
The problem is that binding DataTable doesn't work. Error message:
Error: Converter failed to convert value of type '' to type 'IBindableIterable'; BindingExpression: Path='DataTableViewModel' DataItem='DemoApp.ViewModel.ViewModel'; target element is 'CommunityToolkit.WinUI.UI.Controls.DataGrid' (Name='null'); target property is 'ItemsSource' (type 'IBindableIterable').
I can bind a collection and it does work, but the problem is I need a DataTable to fill the datagrid as I need it (for example headers are the first column and not the first row...).
How is it possible to bind a DataTable to a WinUI3 DataGrid?

The only way to bind a DataTable to your datagrid is converting it to collection (list, observableCollection) and bind it.

How is it possible to bind a DataTable to a WinUI3 DataGrid?
The Windows Community Toolkit DataGrid is essentially composed of many ListViews, you need to use the DataGrid.ItemsSource property to bind to a collection.
Here are the official documents for your reference

Related

Trying to add a combobox within datagrid which has an itemsource already

If I have a combo box by iteself with an item source e.g.:
<ComboBox ItemsSource="{Binding Combobox.Options}"/>
This works fine. Where Combobox.Options is a list of strings {"option1","option 2",... etc}
However, I want to have a combobox within a datagrid which has an item source:
e.g.:
<DataGrid CanUserAddRows="False" AutoGenerateColumns="False" SelectionMode="Single" ItemsSource="{Binding Users.Table.Tables[0]}">
But I keep getting an empty combo box when I add it into a datagrid template column. I have also tried the Find Ancestor Relative soure but also got an empty combo box.
Finally managed to find the problem. Needed to add a DataContext when getting the list for the item source within the datagrid:
<ComboBox ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}"/>

How to display a List of Strings as a DataGrid (table) in XAML and C#

I've been a long time lurker on SO and have only recently decided to set up an account. I've been spending quite a lot of hours trying to solve this problem I've been having without asking but I here it is.
What I'm trying to accomplish:
I have a list of strings, e.g: Mango, Banana, Melon (let's call it fruits) and I want to display it as a table in XAML (WPF), where it appears as row values on the left side, and the right side will be combo boxes that will allow users to pick a value. I'm currently stuck on the displaying part of this problem. I decided to use a DataGrid to display the list, and the code behind will do the data bindings.
Here's the XAML part of it:
<DataGrid x:Name="FruitDataGrid" Height="265" VerticalAlignment="Center" Margin="-7,8,-2,-6" HorizontalAlignment="Left" Width="1188" AutoGenerateColumns="False">
<!-- If AutoGenerateColumns was true only the length is displayed.-->
<DataGrid.Columns>
<DataGridTextColumn x:Name="fruitsDisplay" Header="Fruits" MinWidth="450" IsReadOnly="True" />
<DataGridComboBoxColumn Header="Number of Boxes" MinWidth ="200" CanUserResize="True" Width="*"></DataGridComboBoxColumn>
</DataGrid.Columns>
Code Behind so far has been really simple, and after many attempts this is the most recent one.
private void populateFruitList()
{
FruitDataGrid.DataContext = fruitDataTable;
//Binds a datatable instance to the datagrid, does not display anything.
}
What I've been attempting:
Turn the List of Strings into an Observable Collection, or Enumerable, and do FruitDataGrid.itemsource = fruitsObservable;
The above method works, except that it will only display the length of each string value (if autogeneratecolumns is true), which is not what I want. If autogeneratecolumns was false then I can see the rows being shown, but not the string values.
I also tried using DataView or DataGridView but I failed to define it in the XAML, VS2012 says that there isn't such a thing.
I've been trying to do data binding as well as the MSDN Article says, but VS2012 never manages to bind to the list properly.
I then attempted to change my list into a datatable and [use a datagridview as specified here but again the XAML tells me it is not a valid class][2]. I am also aware of the performance impact datagridview might have but at this point I just want to display a table really.
I've also seen that some tutorials use a DataGrid.datasource method but that isn't in the DataGrid I want, I think it's a different class? (the DataGrid I am attempting to use is System.Windows.Controls.DataGrid, and the other one is in Windows Forms [As shown here][3])
Thanks again for taking the time to look into this.
EDIT
Trying to bind to the list in XAML this way:
<DataGrid x:Name="FruitDataGrid" Height="265" VerticalAlignment="Center" Margin="-7,8,-2,-6" HorizontalAlignment="Left" Width="1188" AutoGenerateColumns="False" ItemsSource="fruitDataList">
I get the error in XAML "The type converter for IEnumerable does not support converting from a string" which I think is because I'm doing it wrong. The table now shows a lot of empty rows though.
Trying ItemSource="{Binding fruitDataList}" (where fruitDataList is a List) yields a blank table, and an error in VS for BindingExpression path error.
To sum up what the previous issue was, thanks to Muds, and hours of trying, the Binding in the XAML was not properly done.
In FruitDataGrid, this property should be written as ItemSource="{Binding}" this tells the XAML code to bind to whatever object the DataContext is assigned to in the code behind.
After that, within the DataGrid.Column, this property is needed.
Binding="{Binding Path=.}"
It had to be exactly that for me. lack of the dot or not enclosing it in quotes will not display the fruits.
Thus, for clarity:
In the XAML:
<DataGrid x:Name="FruitDataGrid"
Height="265" VerticalAlignment="Center" Margin="-7,8,-2,-6"
HorizontalAlignment="Left" Width="1188"
AutoGenerateColumns="False"
ItemSource="{Binding}">
<!-- If AutoGenerateColumns was true only the length is displayed.-->
<DataGrid.Columns>
<DataGridTextColumn
x:Name="fruitsDisplay"
Header="Fruits" MinWidth="450"
IsReadOnly="True"
Binding="{Binding Path=.}"/> <!--Exactly like this -->
<DataGridComboBoxColumn
Header="Number of Boxes"
MinWidth ="200"
CanUserResize="True" Width="*" />
</DataGrid.Columns>
And then in the codebehind (filename.xaml.xs)
//Anywhere you plan to bind the list in my case FruitList
List<string> fruitList = new List<string>();
fruitList.add("Melon");
fruitList.add("Mango");
fruitList.add("Banana");
FruitDataGrid.DataContext = fruitList;
And now you'll have a very nice list displayed as a table. What killed 2 days of my time was the binding path should have a . (dot) right there, and I was binding to a string instead of an object (you literally bind to a string "fruitList" when you do Binding = {"fruitList"}. This amateur mistake stems from me insufficiently self-learning XAML.
Thanks again, Muds. I'll select yours as the answer because it helped me, and it feels weird accepting my own answer.
Considering your binding is set to your viewmodel correctly.. do this
ItemsSource="{Binding fruitDataList}"
then
<DataGrid.Columns>
<DataGridTextColumn
x:Name="fruitsDisplay"
Binding="{Binding Path=FRUITS_PROPERTY_NAME_IN_COLLECTION}"
Header="Fruits"
MinWidth="450"
IsReadOnly="True" />
<DataGridComboBoxColumn
ItemsSource="{Binding TO_List_of_Numbers}"
Header="Number of Boxes"
MinWidth ="200"
CanUserResize="True" Width="*"></DataGridComboBoxColumn>

Read Text From TextBox in DataGrid MVVM (wpf databinding)

I have a datagrid of rows which contain data read from a web server and values I want to write into a webserver. I write the values in getting the user to input a number into the appropriate column and click an adjacent text box;
<DataGrid x:Name="datagridDERControl" HorizontalAlignment="Center" VerticalAlignment="Center" Background="#FF322D2D" Height="382" Margin="10,78,10,10" Width="972" ItemsSource="{Binding Path=NFDataSource, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<DataGrid.Columns>
<DataGridTemplateColumn Width="100" Header="Write Set Point">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBox Width="100" Text="{Binding Path=WriteSetPoint, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}"></TextBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn Width="100" Header="Global Trip">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Name="buttonGlobalTrip" Width="100" Click="buttonGlobalTrip_Click"></Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid
How do I extract the specific textbox string per row to use in my view model.
It's always difficult to answer a question where the relevant details have been omitted by the question author. However, I shall try!
You have data bound (presumably) a collection property named NFDataSource to your DataGrid.ItemsSource property. That is the collection that represents the data in your DataGrid, so to 'extract' a specific value, you need to look into your data items in your collection.
One handy property in the DataGrid class is the SelectedItem property. this enables you to data bind an object (of the same type as those in your NFDataSource collection) to this property, which accesses the data object behind the row that is currently selected in the UI:
<DataGrid ItemsSource="{Binding NFDataSource}" SelectedItem="{Binding SelectedItem}" />
Now you can utilise your SelectedItem property to access the values from the selected row in the DataGrid:
string someValue = SelectedItem.SomeProperty;
As you tagged this with MVVM and databinding, I'll assume you're using these and have just got muddled.
"I have a datagrid of rows which contain data read from a web server
and values I want to write into a webserver."
So your viewmodel has a property, which is a collection of a custom class, that represents data fetched from a webservers.
"I write the values in getting the user to input a number into the
appropriate column and click an adjacent text box"
So this VM property is two-way bound to a datagrid, so that each item in the collection represents 'one row', and the properties on those items represent your 'columns'. The user can make changes to the UI displayed values, and because of the two way databinding the VM property is also updated.
"How do I extract the specific textbox string per row to use in my
view model."
Why do you need the specific textbox string, if it is databound to a property (or rather to a property on a class contained in a collection) in your VM anyway? If you've set up your VM this way, and are using databinding, you rarely need to worry about UI specific things such as which row in a datagrid is clicked.
As Sheridan points out though, you can also bind to properties on the datagrid such as SelectedItem so that you can perform additional operations beyond just reading/writing data. SelectedItem for your datagrid will be of the type that populates your VM collection, so will have the appropriate properties.
For example, if your VM collection is an IQueryable<Person> and that is bound to the ItemsSource of the datagrid then the SelectedItem will be of type Person. You could then have a VM property called SelectedPerson which is bound to that SelectedItem, and access things like SelectedPerson.Name etc.

Binding datatable to combobox of datagrid in wpf

Hi I have to create a wpf grid which is having combo box in it . I have to bind grid to a data table dtGrid and combobox item source to a datatable dtcmb . I wrote template below for embedding combo box in grid .
Now I need to access the combo in code behind to specify item source and DisplayMemberPath, ,SelectedValuePath,SelectedValue,
Even though i could access data grid in code behind I could not access combo box . what is the prob ?
<my:DataGridTemplateColumn x:Name="supplierName" Header="Supplier" Width="60" >
<my:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox x:Name="cmbSubSysSupplier_SRV" IsTextSearchEnabled="True"
Height="23" ItemsSource="{Binding}" Width="80" />
</DataTemplate>
</my:DataGridTemplateColumn.CellTemplate>
</my:DataGridTemplateColumn>
You should use a DataGridComboBoxColumn for this particular case. You can access it in code behind through its x:Name property. The DataGridComboBoxColumn object will give you access to all the properties you need.

Combobox not rendering in wpf datafrid

I have my data grid "dgSubsytem" column defined like below
<my:DataGridComboBoxColumn x:Name="cmbSubSysSupplier_SRV" Header="Supplier" Width="160"
ItemsSource="{Binding RelativeSource}" SelectedValueBinding="{Binding SupplierId}" />
As you see from the code i am having a combo box inside a grid .
Item source of this combo box is a datatable which is bound to it in the code behind .
Item source of the grid also another datatable bound in code behind .
code of binding item source of combobox in code behind is as follows
cmbSubSysSupplier_SRV.ItemsSource = dsComboBox.Tables[3].DefaultView;
cmbSubSysSupplier_SRV.DisplayMemberPath="FullName" ;
cmbSubSysSupplier_SRV.SelectedValuePath = "SupplierId";
Problem is combo box itself not rendering . But I can see the value of the Supplier rendered as text . What is the problem?
There are 2 parts here:
List of values to be populated in ComboBox: ItemsSource, should be bound using a StaticResource, with a List<X> fields exposed from your ViewModel.
The actual value (here X) should be bound to SelectedItemBinding using binding to data item.
No binding in code behind required.
At what point does your code-behind stuff run?
You're setting the ItemsSource in two places - in the XAML and in the Code-Behind. Whichever one runs second will overwrite the value of the first one, so only the last value set will be used.
I suspect your XAML is getting run last, and RelativeSource is probably not a property on your DataContext, so your ComboBox ends up being bound to nothing.
To fix it, simply remove your ItemsSource binding in the XAML for the DataGridComboBoxColumn
<my:DataGridComboBoxColumn x:Name="cmbSubSysSupplier_SRV"
Header="Supplier" Width="160"
SelectedValueBinding="{Binding SupplierId}" />
In addition, the DefaultView of a DataTable will return an object of type DataView, and DataView does not have properties called FullName or SupplierId, so your SelectedValuePath and DisplayMemberPath properties won't work.
I'd recommend building a list of KeyValuePair<int,string> out of your data items, and bind your ComboBoxColumn.ItemsSource to that list, then switch the SelectedValuePath to "Key" and the DisplayMemberPath to "Value"
I personally fought with DataGridComboBoxColumn for long time and i think the way is to use DataGridTemplateColumn. Here is an exemple :
Looks a lot of code but evective.
Put the collection as resource :
<Grid.Resources>
<CollectionViewSource x:Key="StructuresCollection" Source="{Binding StructuresList, Mode=OneTime}"/>
</Grid.Resources>
<DataGridTemplateColumn Header="Structure" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Text="{Binding Structures.Name}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate >
<DataTemplate>
<ComboBox x:Name="CStructures" SelectedItem="{Binding Structures}" DisplayMemberPath="Name" SelectedValue="{Binding IDStructure, UpdateSourceTrigger=PropertyChanged}" SelectedValuePath="{Binding IDStructure}" ItemsSource="{Binding Source={StaticResource StructuresCollection}}" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
</DataGridTemplateColumn>

Categories