Bind combobox to collection in viewmodel - silverlight

I have a combo box inside the datagrid. Datagrid is bound to an item source. I want to fill the combo box to a collection apart from its parent collection but its not working.
<data:DataGrid x:Name="dgTransferStockroomGLDetails" AutoGenerateColumns="False" ColumnHeaderStyle="{StaticResource DataGridColumnHeaderStyle}"
VerticalScrollBarVisibility="Visible" ItemsSource="{Binding StockroomTransferDetails, Mode=TwoWay}"
CanUserResizeColumns="False" VerticalAlignment="Top" RowBackground="White" AlternatingRowBackground="White" GridLinesVisibility="All" Height="400">
<data:DataGrid.Columns>
<data:DataGridTemplateColumn Header="From Stockroom" Width="200" CanUserReorder="True" CanUserSort="True" IsReadOnly="False">
<data:DataGridTemplateColumn.HeaderStyle>
<Style TargetType="prim:DataGridColumnHeader">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="Bold"/>
</Style>
</data:DataGridTemplateColumn.HeaderStyle>
<data:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<!--<TextBox Text="{Binding From_Stkrm_Id}" Width="200" Height="30" />-->
<ComboBox Width="200" Height="30" ItemsSource="{Binding WiingsStkrmList, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" DisplayMemberPath="Name" />
</DataTemplate>
</data:DataGridTemplateColumn.CellTemplate>
</data:DataGridTemplateColumn>
</data:DataGrid.Columns>
</data:DataGrid>
Here is my view model
private ObservableCollection<BuyerWebService.Stockroom> wiingsStkrmList;
public ObservableCollection<BuyerWebService.Stockroom> WiingsStkrmList
{
get
{
return wiingsStkrmList;
}
set
{
wiingsStkrmList = value;
SendChangedNotification("WiingsStkrmList");
}
}
private ObservableCollection<BuyerWebService.StockroomTransfer> stockroomTransferdetails;
public ObservableCollection<BuyerWebService.StockroomTransfer> StockroomTransferDetails
{
get
{
return stockroomTransferdetails;
}
set
{
stockroomTransferdetails = value;
SendChangedNotification("StockroomTransferDetails");
}
}
I checked the output window, it says
'WiingsStkrmList' property not found on 'BuyerPortal.BuyerWebService.StockroomTransfer'
StockroomTransfer is used to bind the datagrid. The combo is trying to find the WiingsStkrmList in parent item source.
How to bind it to a different collection?

You need to specify a relative source for where the bound property can be found, usually by pointing at a parent element that is bound to the view model. Something like this:
ItemsSource="{Binding StockroomTransferDetails, RelativeSource={RelativeSource AncestorType=Grid}}"
Change AncestorType=Grid to something that has a datacontext of your viewmodel ... something outside of your datagrid basically.

Related

WPF Hide an Item of a Combobox ItemSource

In my WPF View, I have a DataGrid which Display Data from a Database.
One column is a combobox that is bound to a string in Database.
This is the list of available string :
public List<string> AvailableTypeImpression { get; } = new List<string>() {"S","D","T","X","M","p","P","R"}
All these string could be displayed in the datagrid, but if the user want to edit it, I can only set S, D, T, or X. The user is not allowed to set M, p, P or R.
So I would like to hide these four letter from the combobox available Items. But I don't really know how to do that in a simple way (I found some solution on Stack Overflow but it doesn't work in my case).
Here's the code of my datagrid :
<DataGrid Grid.Row="1" x:Name="LotsListDataGrid" IsReadOnly="False" SelectionMode="Single" SelectionUnit="FullRow" SelectedItem="{Binding SelectedLot}" ItemsSource="{Binding FilteredList}" VirtualizingPanel.IsVirtualizing="True" EnableRowVirtualization="True" HorizontalScrollBarVisibility="Auto">
<DataGrid.Columns>
<DataGridTextColumn Header="Lot" Width="200" Binding="{Binding Value.Lot.Intitule}" IsReadOnly="True"/>
<DataGridTemplateColumn Header=".i." HeaderStyle="{StaticResource CenteredColumnHeaderStyle}" Width="545" IsReadOnly="False">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox Height="23" Style="{StaticResource AnfComboBoxStyle}" ItemsSource="{Binding DataContext.AvailableTypeImpression, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}" SelectedItem="{Binding Value.Lot.TypeImpression, UpdateSourceTrigger=PropertyChanged}">
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
FilteredList.Value.Lot.TypeImpression is a string.
If I've well understood, all the possible string must be in the ItemSource otherwise they could'nt be displayed. But I need to find a way to prevent user to select some of them.
Thanks for your help.
I don't know of a way to make individual items non-selectable in a combo box.
But you could always show a combo box without your not-allowed letters (i.e. remove them from AvailableTypeImpression), and instead show just a simple TextBlock in your cell in case one of these letters is read from the DB.
Change your cell template to something like this:
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<ComboBox Visbility="{Binding IsValueEditable}" Height="23" Style="{StaticResource AnfComboBoxStyle}" ItemsSource="{Binding DataContext.AvailableTypeImpression, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}" SelectedItem="{Binding Value.Lot.TypeImpression, UpdateSourceTrigger=PropertyChanged}" />
<TextBlock Visbility="{Binding NotIsValueEditable}" Height="23" Text="{Binding Value.Lot.TypeImpression}" />
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
Then implement IsValueEditable, NotIsValueEditable properties in your ViewModel such that only one of the controls is shown.
Alternatively, if you also want to be able to modify existing entries of M, p, P, R, you could use a DataGridTemplateColumn.CellEditingTemplate:
Make the CellEditingTemplate show the ComboBox (without M, p, P, R options) while the regular CellTemplate only contains a TextBlock.
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<TextBlock Height="23" Text="{Binding Value.Lot.TypeImpression}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
<DataGridTemplateColumn.CellEditingTemplate>
<DataTemplate>
<ComboBox Height="23" Style="{StaticResource AnfComboBoxStyle}" ItemsSource="{Binding DataContext.AvailableTypeImpression, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}" SelectedItem="{Binding Value.Lot.TypeImpression, UpdateSourceTrigger=PropertyChanged}" />
</DataTemplate>
</DataGridTemplateColumn.CellEditingTemplate>
The solution from #dheller was good but not working in my case because the user is not able to give to "Value.Lot.TypeImpression" a new Value M ,p, P or R, but he's able to edit "Value.Lot.TypeImpression" even if it equals to M ,p, P or R and set S, D, T, or X.
So I've found another way :
In my ViewModel I've defined a new class :
public class TypeImpressionAvailable
{
public string Name { get; set; }
public bool IsAvailable { get; set; }
}
And my list to give to my combobox as ItemSource :
public List<TypeImpressionAvailable> AvailableTypeImpression { get; } = new List<TypeImpressionAvailable>() {
new TypeImpressionAvailable(){ Name="N", IsAvailable=true },
new TypeImpressionAvailable(){ Name="S", IsAvailable=true },
new TypeImpressionAvailable(){ Name="D", IsAvailable=true },
new TypeImpressionAvailable(){ Name="T", IsAvailable=true },
new TypeImpressionAvailable(){ Name="X", IsAvailable=true },
new TypeImpressionAvailable(){ Name="M", IsAvailable=false },
new TypeImpressionAvailable(){ Name="p", IsAvailable=false },
new TypeImpressionAvailable(){ Name="P", IsAvailable=false },
new TypeImpressionAvailable(){ Name="R", IsAvailable=false }
};
And in my View :
<DataGridTemplateColumn Header=".i." HeaderStyle="{StaticResource CenteredColumnHeaderStyle}" Width="45" IsReadOnly="False">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox Height="23" SelectedValuePath="Name" DisplayMemberPath="Name"
SelectedValue="{Binding Value.Lot.TypeImpression, UpdateSourceTrigger=PropertyChanged}"
>
<ComboBox.Style>
<Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource AnfComboBoxStyle}">
<Setter Property="ItemsSource" Value="{Binding DataContext.AvailableTypeImpression, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}"/>
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType="ComboBoxItem" BasedOn="{StaticResource {x:Type ComboBoxItem}}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsAvailable}" Value="False">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</Setter.Value>
</Setter>
</Style>
</ComboBox.Style>
</ComboBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
And it works fine :)

Accessing a combo box property inside a datagrid in wpf

I have a datagrid which has four columns of combobox in wpf. At the starting, the first combobox is enabled. After making a selection on the first combobox, the second combobox gets enabled. I am unable to access the combobox name property in my xaml.cs file so that I can enable the next combobox column after successful selection of the first one. Can you suggest how to access the combobox property which is present inside a datagrid in my xaml.cs file ?
This is my xaml code
<DataGridTemplateColumn
Header ="Example 9">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding PartIds, RelativeSource={RelativeSource AncestorType=Window}}" SelectedItem ="{Binding PartId,UpdateSourceTrigger=PropertyChanged}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
Assuming you have two columns in your DataGrid, the first column contains a combobox, and its selecteditem is bound to a property named PartId, the second column contains also a combobox with a selecteditem bound to a property named PartId2, your model should look something like that:
public class Model
{
public string PartId { get; set; }
public string PartId2 { get; set; }
}
Now, assuming your DataGrid's itemsource is bound to an ObservableCollection named DgCollection:
private ObservableCollection<Model> _dgCollection;
public ObservableCollection<Model> DgCollection
{
get { return _dgCollection; }
set
{
if (Equals(value, _dgCollection)) return;
_dgCollection = value;
OnPropertyChanged();
}
}
The second column could use a DataTrigger to activate its combobox once the selecteditem of the first column is set, like so:
<DataGrid ItemsSource="{Binding DgCollection}" AutoGenerateColumns="False">
<DataGrid.Columns>
<DataGridTemplateColumn
Header ="Example 9">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox ItemsSource="{Binding PartIds, RelativeSource={RelativeSource AncestorType=Window}}" SelectedItem ="{Binding PartId,UpdateSourceTrigger=PropertyChanged}" />
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTemplateColumn
Header ="Example 10">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<ComboBox x:Name="FirstCbx" ItemsSource="{Binding PartIds, RelativeSource={RelativeSource AncestorType=Window}}" SelectedItem ="{Binding PartId2,UpdateSourceTrigger=PropertyChanged}" >
<ComboBox.Style>
<Style TargetType="ComboBox">
<Setter Property="IsEnabled" Value="True"/>
<Style.Triggers>
<DataTrigger Binding="{Binding PartId}" Value="{x:Null}">
<Setter Property="IsEnabled" Value="False"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ComboBox.Style>
</ComboBox>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
You could generalize this to four columns easily.

Pass values to ValueConverter from two different binding sources in single DataGrid

What I want to do is to color DataGridRow red if validation fails. I attempted to do so with ValueConverter but I have no idea how to pass value from more than one binding source.
I've got datagrid with binding to collection of objects. Then there's a
DataGridTemplateColumn with ComboBox and Textbox inside (only one is visible at time), and the ComboBox has non related to bound collection binding source.
See code:
<DataGrid Grid.Row="4" Grid.Column="0" x:Name="DGR_Slots" Grid.ColumnSpan="5" Grid.RowSpan="3" ItemsSource="{Binding ElementName=WND_ItemCraftingWindow, Path=SelectedSchematic.Slots}" AutoGenerateColumns="False" ColumnWidth="*">
<DataGrid.Resources>
<classes:ValidationConverter x:Key="ValidationConverter" />
</DataGrid.Resources>
<DataGrid.RowStyle>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="Background" Value="{Binding Converter={StaticResource ValidationConverter}}" />
</Style>
</DataGrid.RowStyle>
<DataGrid.Columns>
<DataGridTextColumn Header="Id" Binding="{Binding Id}" Visibility="Collapsed"/>
<DataGridTextColumn Header="Slot Type" Binding="{Binding SlotType}" />
<DataGridTextColumn Header="Mat Type" Binding="{Binding MaterialType}" />
<DataGridTextColumn Header="Count" Binding="{Binding MaterialCount}" />
<!--<DataGridComboBoxColumn Header="Material" />-->
<DataGridTemplateColumn Header="Material">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<ComboBox Visibility="Visible" MouseDoubleClick="MaterialCell_MouseDoubleClick" ItemsSource="{Binding ElementName=WND_ItemCraftingWindow, Path=Materials}" DisplayMemberPath="Name" SelectedValuePath="Name" SelectionChanged="MaterialComboBox_SelectionChanged"/>
<TextBox Visibility="Collapsed" MouseDoubleClick="MaterialCell_MouseDoubleClick" PreviewKeyUp="MaterialCell_TextBox_PreviewKeyUp" KeyUp="MaterialCell_TextBox_KeyUp" />
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
WND_ItemCraftingWindow is the Window that owns the datagrid and the Materials is ObservableCollection property inside that window.
I need to pass the object from DataGrid.ItemsSource collection (that works now) and SelectedItem from Combobox in same row (i dont know how to do that) into ValidationConverter.
Validation of the row can be performed only with the object from DataGridRow and SelectedItem from combobox.
Also I'm open to different solutions to color the row after such validation.
Alright I managed to do it hackish way.
Datagrid code (removed meaningless parts):
<DataGrid x:Name="DGR_Slots" ItemsSource="{Binding ElementName=WND_ItemCraftingWindow, Path=SelectedSchematic.Slots}" AutoGenerateColumns="False" ColumnWidth="*" IsReadOnly="True">
<DataGrid.Columns>
<DataGridTemplateColumn Header="Material">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<ComboBox Visibility="Visible" ItemsSource="{Binding ElementName=WND_ItemCraftingWindow, Path=Materials}" SelectionChanged="MaterialComboBox_SelectionChanged" />
<TextBox Visibility="Collapsed" />
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
SelectionChanged event
private void MaterialComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
// ...
var slot = (DGR_Slots.SelectedItem as SchematicSlot);
var mat = ((sender as ComboBox).SelectedItem as Material);
var row = WPFHelper.GetRow(DGR_Slots, DGR_Slots.SelectedIndex);
row.Background = new SolidColorBrush(slot.MaterialType != mat.MaterialType ? Colors.Red : Colors.White);
}
WPFHelper GetRow method (found somewhere on the internet)
static public DataGridRow GetRow(DataGrid dg, int index)
{
DataGridRow row = (DataGridRow)dg.ItemContainerGenerator.ContainerFromIndex(index);
if (row == null)
{
// may be virtualized, bring into view and try again
dg.ScrollIntoView(dg.Items[index]);
row = (DataGridRow)dg.ItemContainerGenerator.ContainerFromIndex(index);
}
return row;
}
Although I'm still open to other solutions.

DataGridColumn dynamic(parametric) binding to a column of a collection

I'm trying to bind a datagrid to a collection, but I do not know which are the columns of the collection.
So I try to to bind the column to a property that is passed to the view.
my code is:
<FrameworkElement x:Key="ProxyElement" DataContext="{Binding ElementName=_VMItemSelector}"/>
<WPFCtrlDg:SelfBindingDataGrid x:Name="_sbdgAvailableItems" ScrollViewer.VerticalScrollBarVisibility="Auto"
ItemsSource="{Binding Path=Availables}"
SelectedItem="{Binding Path=CurrentAvailableItem, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
IsReadOnly="{Binding DataContext.IsReadOnly,
Source={StaticResource ProxyElement},
Mode=OneWay}">
<WPFCtrlDg:SelfBindingDataGrid.Columns>
<WPFCtrlDg:ExtDataGridTextColumn Header="{Binding DataContext.DetailBinding,
Source={StaticResource ProxyElement},
Mode=OneWay}"
Tag="CD_FUNCTION"
Visibility="Hidden"/>
<WPFCtrlDg:ExtDataGridTextColumn Header="{Binding DataContext.RightColumnHeader,
Source={StaticResource ProxyElement},
Mode=OneWay}"
Binding="{Binding DataContext.RightColumnHeader,
Source={StaticResource ProxyElement},
Mode=OneWay}"
Width="*"/>
and in the view I have
private string _rightColumnHeader;
public string RightColumnHeader
{
get { return _rightColumnHeader; }
set { _rightColumnHeader = value; }
}
the value is set to "DS_FUNCTION" which is a filed of the collection I bind, but what I see in the dataGrid is alwats "DS_FUNTION" for each element of the collection.

Bind DataGrid Column to ViewModel Property

If I have the following DataGrid, how would I go about binding the Visibility of the TemplateColumn to a property on my ViewModel? The code I have here is based on a recommendation from this SO Question but no luck.
<sdk:DataGrid Visibility="{Binding GridVisible}" DataContext="{Binding}" Grid.Row="1" ItemsSource="{Binding Path=BookSource}" x:Name="bookGrid" AutoGenerateColumns="False" IsReadOnly="True">
<sdk:DataGrid.Columns>
<sdk:DataGridTemplateColumn Visibility="{Binding Path=DataContext.GridImgColumnVisible, ElementName=bookGrid}">
<sdk:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Image Stretch="Fill" Source="{Binding Path=SmallImgURI}"></Image>
</DataTemplate>
</sdk:DataGridTemplateColumn.CellTemplate>
</sdk:DataGridTemplateColumn>
<sdk:DataGridTextColumn Header="Title" Width="*" Binding="{Binding CurrentBook.Title}" />
<sdk:DataGridTextColumn Header="Published" Width="150" Binding="{Binding CurrentBook.Published, StringFormat=d}" />
</sdk:DataGrid.Columns>
</sdk:DataGrid>
EDIT - I've also tried:
<sdk:DataGridTemplateColumn Visibility="{Binding Path=DataContext.GridImgColumnVisible, ElementName=root}">
and I've also added a button to my actual control, and bound its visibility to this property without difficulty.
It can be achieved in WPF, but Silverlight DataGrid is different. Visibility property isn't dependency property (you can't perform binding), Columns aren't belong to VisualTree and don't inherit DataContext.
Use code-behind, something like this:
var model = (MyViewModel)this.DataContext;
model.PropertyChanged += (s,e) =>
{
if(e.PropertyName == "GridImgColumnVisible")
this.UpdateGridColumnVisibility(model.GridImgColumnVisible);
};
public void UpdateGridColumnVisibility(Visibility imageVisibility)
{
var imgColumn = bookGrid.Columns.Cast<DataGridColumn>().FirstOrDefault(c => ((string)c.GetValue(Panel.NameProperty)) == "imgColumn");
if(imgColumn != null)
imgColumn.Visibility = imageVisibility;
}
And add the name to the column:
<sdk:DataGridTemplateColumn x:Name="imgColumn">

Resources