Today I will share some of my experience with the GridView in combination with MIListPanel and MIPanel. It’s a pretty simple solution, but I spent quite some time myself getting it to work the first time, so I hope it’s worth sharing.
My case scenario was to work with multiple lines. I wanted to be able to edit and update in a more “practical” way than having to select a line and then edit from a different panel followed by clicking a button. Sometimes it can be feel to “slow”, and sometimes it just takes too much space.
What I tried to do, was to create an all-in-one solution, by using the GridViewColumn.CellTemplate and actually open the cell in the GridView for editing and adding a button for update. It takes less space, and when processing multiple lines, it sure does feel a lot more user friendly than some of my previous solutions when I first started working with mashup.
The .xaml sample will look something like this:
The list is based on CRS620MI, LstSuppliers. The button is connected to the CRS620MI, UpdSupplier. Using the GridViewColumn.CellTemplate will allow you to create a DataTemplate inside the cell, and I think you can do pretty much anything you want when working with DataTemplate.
Here is also a few different scenarios as well using the same method.
Example one is built for speed, when you need to repeat the same task multiple times based on a list.
Example two allows you to provide more input. In this case I built a popup inside the CellTemplate. To learn how to create the popup see my previous post .
<TabItem Header="Attached items">
<StackPanel>
<m3:MIListPanel Name="MOS256List">
<m3:MIListPanel.Events>
<mashup:Events>
<mashup:Event SourceEventName="CurrentItemChanged" SourceName="MMS240List2">
<mashup:Parameter TargetKey="MTRL" SourceKey="ITNO" />
<mashup:Parameter TargetKey="SERN" SourceKey="SERN" />
<mashup:Parameter TargetKey="EXPA" Value="Y" />
</mashup:Event>
</mashup:Events>
</m3:MIListPanel.Events>
<m3:MIListPanel.DataSource>
<m3:MIDataSource Program="MOS256MI" Transaction="LstAsBuildLevel" Type="List" InputFields="MTRL,SERN" OutputFields="MTRL,SERN,CFGL,ITNO,SER2,ITDS,LVLS,TX40,MES1,MES2,MES3,MES4,MVA1,MVA2,MVA3,MVA4,STAT" MaxReturnedRecords="50" />
</m3:MIListPanel.DataSource>
<ListView ItemsSource="{Binding Items}" Style="{DynamicResource styleListView}" ItemContainerStyle="{DynamicResource styleListViewItem}">
<ListView.View>
<GridView ColumnHeaderContainerStyle="{DynamicResource styleGridViewColumnHeader}">
<GridView.Columns>
<GridViewColumn Header="Lvl:" DisplayMemberBinding="{Binding [LVLS]}" />
<GridViewColumn Header="Configuration:" DisplayMemberBinding="{Binding [CFGL]}" />
<GridViewColumn Header="Position:" DisplayMemberBinding="{Binding [TX40]}" />
<GridViewColumn Header="S/N" DisplayMemberBinding="{Binding [SER2]}" />
<GridViewColumn Header="Item" DisplayMemberBinding="{Binding [ITNO]}" />
<GridViewColumn Header="Descripton:" DisplayMemberBinding="{Binding [ITDS]}" />
<GridViewColumn Header="Days:" DisplayMemberBinding="{Binding [MVA1]}" />
<GridViewColumn Header="Runs:" DisplayMemberBinding="{Binding [MVA2]}" />
<GridViewColumn Header="Hours:" DisplayMemberBinding="{Binding [MVA3]}" />
<GridViewColumn Header="Remove">
<GridViewColumn.CellTemplate>
<DataTemplate>
<StackPanel>
<ToggleButton Name="button">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<TextBlock Text="Remove" Foreground="#FFE10101" TextDecorations="Underline" />
</ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
<Popup IsOpen="{Binding IsChecked, ElementName=button, Mode=OneWay}" Width="300" Height="200" Popup.StaysOpen="False">
<Border Background="White" BorderBrush="Black" BorderThickness="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="200" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<StackPanel>
<GroupBox Header="Remove unit" Style="{DynamicResource styleGroupLineMashup}">
<Grid Margin="0,0,0,8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="32" />
<RowDefinition Height="32" />
<RowDefinition Height="32" />
<RowDefinition Height="32" />
<RowDefinition Height="32" />
</Grid.RowDefinitions>
<TextBlock Text="Serial number:" Grid.Row="0" Grid.Column="0" Margin="8,8,0,0" />
<TextBox Text="{Binding [SER2]}" Grid.Row="0" Grid.Column="1" MinWidth="115" MaxWidth="115" HorizontalAlignment="Left" IsEnabled="False" />
<TextBlock Text="Item number:" Grid.Row="1" Grid.Column="0" Margin="8,8,0,0" />
<TextBox Text="{Binding [ITNO]}" Grid.Row="1" Grid.Column="1" MinWidth="80" MaxWidth="80" HorizontalAlignment="Left" IsEnabled="False" />
<TextBlock Text="To location:" Grid.Row="2" Grid.Column="0" Margin="8,8,0,0" />
<TextBox Name="RemoveLocation" Text="" Grid.Row="2" Grid.Column="1" MinWidth="115" MaxWidth="80" HorizontalAlignment="Left" />
<TextBlock Text="Warehouse:" Grid.Row="3" Grid.Column="0" Margin="8,8,0,0" />
<TextBox Name="RemoveWhs" Text="100" Grid.Row="3" Grid.Column="1" MinWidth="40" MaxWidth="40" HorizontalAlignment="Left" />
<Button Name="Install" Content="Remove" Grid.Row="4" Grid.Column="1" HorizontalAlignment="Left" Margin="0,0,50,0">
<Button.CommandParameter>
<mashup:Events>
<mashup:Event SourceEventName="Click" TargetName="RemoveInstall" TargetEventName="Update" Debug="True">
<mashup:Parameter TargetKey="RITP" Value="R" />
<mashup:Parameter TargetKey="RESP" Value="202231" />
<mashup:Parameter TargetKey="TRDT" Value="20130927" />
<mashup:Parameter TargetKey="TRTM" Value="090909" />
<mashup:Parameter TargetKey="WHLO" Value="{Binding Path=Text, ElementName=RemoveWhs}" />
<mashup:Parameter TargetKey="RSC4" Value="CHG" />
<mashup:Parameter TargetKey="ITNR" Value="{Binding [ITNO]}" />
<mashup:Parameter TargetKey="BANR" Value="{Binding [SER2]}" />
<mashup:Parameter TargetKey="TWSL" Value="{Binding Path=Text, ElementName=RemoveLocation}" />
<mashup:Parameter TargetKey="NHAR" Value="{Binding [MTRL]}" />
<mashup:Parameter TargetKey="NHSR" Value="{Binding [SERN]}" />
<mashup:Parameter TargetKey="CFGR" Value="{Binding [CFGL]}" />
</mashup:Event>
</mashup:Events>
</Button.CommandParameter>
</Button>
</Grid>
</GroupBox>
</StackPanel>
</Grid>
</Border>
</Popup>
</StackPanel>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
</m3:MIListPanel>
<m3:MIPanel Name="RemoveInstall">
<m3:MIPanel.Events>
<mashup:Events>
<mashup:Event SourceName="RemoveInstall" TargetName="MOS256List" SourceEventName="UpdateComplete" TargetEventName="Refresh" />
</mashup:Events>
</m3:MIPanel.Events>
<m3:MIPanel.DataSource>
<m3:MIDataSource Program="MOS125MI" Transaction="RemoveInstall" InputFields="RITP,RESP,TRDT,TRTM,WHLO,RSC4,ITNR,BANR,TWSL,NHAR,NHSR,CFGR" />
</m3:MIPanel.DataSource>
</m3:MIPanel>
</StackPanel>
</TabItem>
The source code of the sample:
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:ui="clr-namespace:Mango.UI.Controls;assembly=Mango.UI" xmlns:mashup="clr-namespace:Mango.UI.Services.Mashup;assembly=Mango.UI" xmlns:m3="clr-namespace:MForms.Mashup;assembly=MForms">
<Grid.Resources>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<m3:MIListPanel Name="CRS620MIList">
<m3:MIListPanel.Events>
<mashup:Events>
<mashup:Event SourceEventName="Startup" />
</mashup:Events>
</m3:MIListPanel.Events>
<m3:MIListPanel.DataSource>
<m3:MIDataSource Program="CRS620MI" Transaction="LstSuppliers" Type="List" OutputFields="SUNO,SUNM,PHNO,CUCD,BUYE" MaxReturnedRecords="4" />
</m3:MIListPanel.DataSource>
<ListView ItemsSource="{Binding Items}" Style="{DynamicResource styleListView}" ItemContainerStyle="{DynamicResource styleListViewItem}">
<ListView.View>
<GridView ColumnHeaderContainerStyle="{DynamicResource styleGridViewColumnHeader}">
<GridView.Columns>
<GridViewColumn Header="Supplier:" DisplayMemberBinding="{Binding [SUNO]}" />
<GridViewColumn Header="Supplier Name:">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Name="Name" Text="{Binding [SUNM]}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Phone:">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Name="Phone" Text="{Binding [PHNO]}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Currency:">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Name="Currency" Text="{Binding [CUCD]}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="Buyer:">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBox Name="Buyer" Text="{Binding [BUYE]}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button Content="Update">
<Button.CommandParameter>
<mashup:Events>
<mashup:Event SourceEventName="Click" TargetName="CRS620Update" TargetEventName="Update">
<mashup:Parameter TargetKey="SUNO" Value="{Binding [SUNO]}" />
<mashup:Parameter TargetKey="SUNM" Value="{Binding [SUNM]}" />
<mashup:Parameter TargetKey="PHNO" Value="{Binding [PHNO]}" />
<mashup:Parameter TargetKey="CUCD" Value="{Binding [CUCD]}" />
<mashup:Parameter TargetKey="BUYE" Value="{Binding [BUYE]}" />
</mashup:Event>
</mashup:Events>
</Button.CommandParameter>
</Button>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
</m3:MIListPanel>
<m3:MIPanel Name="CRS620Update">
<m3:MIPanel.DataSource>
<m3:MIDataSource Program="CRS620MI" Transaction="UpdSupplier" Type="Update" InputFields="SUNO,SUNM,PHNO,CUCD,BUYE" MandatoryInputFields="SUNO" />
</m3:MIPanel.DataSource>
</m3:MIPanel>
<ui:StatusBar Name="StatusBar" Grid.Row="1" Grid.Column="0" />
</Grid>
Regards
Ken Eric
M3 ideas 