Mashup – GridView and CellTemplate

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:
GridView-Example1

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.

GridView-Example2

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>

 

GridView-Example4

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

12 thoughts on “Mashup – GridView and CellTemplate”

  1. Hi,

    is there a way to have a dynamic picture in the grid view.
    I try like this but it does not recognize the binding somehow.

    It works great with a static picture…

    Can you help?

    Br
    Daniel

    Like

  2. Here the code:

    GridViewColumn Header=”Material sequence number” DisplayMemberBinding=”{Binding [MSEQ]}”
    GridViewColumn Header=”Component number” DisplayMemberBinding=”{Binding [MTNO]}”
    GridViewColumn Header=”Component description” DisplayMemberBinding=”{Binding [ITDS]}”

    GridViewColumn Header=”Picture”
    GridViewColumn.CellTemplate
    DataTemplate
    Image Source=”http://picserver/photo/{Binding [MTNO]}.aspx”
    /DataTemplate>
    /GridViewColumn.CellTemplate
    /GridViewColumn

    Like

    1. Hi Daniel,

      There might be some “easier” solution, but try this one inside the CellTemplate.

      
      <GridViewColumn.CellTemplate>
      <DataTemplate>						
      	<StackPanel Orientation="Horizontal" Height="62" Width="80">								 
      		<StackPanel Visibility="Hidden" Height="1" Width="1">
      			<TextBox Name="Text1" Text="http://picserver/photo/" />
      			<TextBox Name="Text2" Text="{Binding [MTNO]}" />
      			<TextBox Name="Text3" Text=".aspx" />
      			<TextBox Name="PicString">
      				<TextBox.Text>
      					<MultiBinding StringFormat="{}{0}{1}{2}">
      						<Binding ElementName="Text1" Path="Text" />
      						<Binding ElementName="Text2" Path="Text" />
      						<Binding ElementName="Text3" Path="Text" />
      					</MultiBinding>
      				</TextBox.Text>
      			</TextBox>
      		</StackPanel>
      	<Image Source="{Binding ElementName=PicString,Path=Text}" />
      	</StackPanel>								
      </DataTemplate>
      </GridViewColumn.CellTemplate>
      
      

      Regards
      Ken Eric

      Like

      1. Hi thibaud,
        i try to update all in same way as Jeremy with a script but it seems that the listview (wich contains Mirecord) returns only the values of the api (not the modified ones in editable cells). It’s strange.

        Like

        1. Hi Mohamed, sorry I just saw your comment now, as comments go to the author of the post, not to me. Regarding your question, I don’t know. I think it depends on the M3 API and the respective M3 program. That’s a question for an M3 developer that can read the M3 Java code of that editable list. Sorry I can’t help more on this one. –Thibaud

          Like

      1. That is quite possible, but what is really desired is to update a specific Value, using an Update API, for all SELECTED rows in a List. If you have any idea to handle this in a Mashup it would be much appreciated.

        Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s