Mashup – Adding a ContextMenu to the ListView

This week I will show you how you can add a ContextMenu to your ListView.
This is one of these small things that sometimes takes quite some time to figure out.
My major problem with getting the ContextMenu to work in the ListView was to get the actually ‘Click’ working.

Today I will provide you with a working .xaml sample containing some of the basic options from MMS001 using bookmark URI’s.
Related Options , Change, Copy, Delete, Display and Links.
You probably have to set your own values to ITGR and CONO to get it to run.
I also added a little bit of styling, in case this is unknown to some of you.

Here is a snapshot of the result:

ContextMenu

And the code:

<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="MMS200MIList">
       <m3:MIListPanel.Events>
          <mashup:Events>
             <mashup:Event SourceEventName="Startup">
                <mashup:Parameter TargetKey="ITGR" Value="03.01" />
             </mashup:Event>
          </mashup:Events>
       </m3:MIListPanel.Events>
       <m3:MIListPanel.DataSource>
          <m3:MIDataSource Program="MMS200MI" Transaction="LstItmByItmGr" Type="List" InputFields="ITGR" OutputFields="ITNO,ITTY,INDI" MaxReturnedRecords="20" />
       </m3:MIListPanel.DataSource>

       <ListView Name="MMS200MIListView" ItemsSource="{Binding Items}" Style="{DynamicResource styleListView}" ItemContainerStyle="{DynamicResource styleListViewItem}">

          <ListView.ContextMenu>
             <ContextMenu>

                <MenuItem Header="Related options">
                   <MenuItem.Style>
                      <Style x:Key="Triggers" TargetType="{x:Type MenuItem}">
                         <Style.Triggers>
                            <Trigger Property="MenuItem.IsMouseOver" Value="true">
                               <Setter Property="Foreground" Value="Red" />
                            </Trigger>
                         </Style.Triggers>
                      </Style>
                   </MenuItem.Style>

                   <MenuItem Header="Material plan" Command="mashup:MashupInstance.MashupCommand">
                      <MenuItem.CommandParameter>
                         <mashup:Events>
                            <mashup:Event SourceEventName="Click" LinkUri="mforms://bookmark?program=MMS001&amp;tablename=MITMAS&amp;keys=MMCONO%2c{CONO}%2cMMITNO%2c{ITNO}%2b%2b%2b%2b%2b%2b%2b%2b%2b&amp;option=34&amp;panel=E&amp;name=MMS001%2fE+Bookmark&amp;source=MForms">
                               <mashup:Parameter TargetKey="ITNO" Value="{Binding [ITNO]}" />
                               <mashup:Parameter TargetKey="CONO" Value="001" />
                            </mashup:Event>
                         </mashup:Events>
                      </MenuItem.CommandParameter>
                   </MenuItem>

                </MenuItem>

                <MenuItem Header="Change" Command="mashup:MashupInstance.MashupCommand">
                   <MenuItem.Style>
                      <Style x:Key="Triggers" TargetType="{x:Type MenuItem}">
                         <Setter Property="FontWeight" Value="Bold" />
                      </Style>
                   </MenuItem.Style>
                   <MenuItem.CommandParameter>
                      <mashup:Events>
                         <mashup:Event SourceEventName="Click" LinkUri="mforms://bookmark?program=MMS001&amp;tablename=MITMAS&amp;keys=MMCONO%2c{CONO}%2cMMITNO%2c{ITNO}%2b%2b%2b%2b%2b%2b%2b%2b%2b&amp;option=2&amp;panel=E&amp;name=MMS001%2fE+Bookmark&amp;source=MForms">
                            <mashup:Parameter TargetKey="ITNO" Value="{Binding [ITNO]}" />
                            <mashup:Parameter TargetKey="CONO" Value="001" />
                         </mashup:Event>
                      </mashup:Events>
                   </MenuItem.CommandParameter>
                </MenuItem>

                <MenuItem Header="Copy" Command="mashup:MashupInstance.MashupCommand">
                   <MenuItem.CommandParameter>
                      <mashup:Events>
                         <mashup:Event SourceEventName="Click" LinkUri="mforms://bookmark?program=MMS001&amp;tablename=MITMAS&amp;keys=MMCONO%2c{CONO}%2cMMITNO%2c{ITNO}%2b%2b%2b%2b%2b%2b%2b%2b%2b&amp;option=3&amp;panel=E&amp;name=MMS001%2fE+Bookmark&amp;source=MForms">
                            <mashup:Parameter TargetKey="ITNO" Value="{Binding [ITNO]}" />
                            <mashup:Parameter TargetKey="CONO" Value="001" />
                         </mashup:Event>
                      </mashup:Events>
                   </MenuItem.CommandParameter>
                </MenuItem>

                <MenuItem Header="Delete" Command="mashup:MashupInstance.MashupCommand">
                   <MenuItem.CommandParameter>
                      <mashup:Events>
                         <mashup:Event SourceEventName="Click" LinkUri="mforms://bookmark?program=MMS001&amp;tablename=MITMAS&amp;keys=MMCONO%2c{CONO}%2cMMITNO%2c{ITNO}%2b%2b%2b%2b%2b%2b%2b%2b%2b&amp;option=4&amp;panel=E&amp;name=MMS001%2fE+Bookmark&amp;source=MForms">
                            <mashup:Parameter TargetKey="ITNO" Value="{Binding [ITNO]}" />
                            <mashup:Parameter TargetKey="CONO" Value="001" />
                         </mashup:Event>
                      </mashup:Events>
                   </MenuItem.CommandParameter>
                </MenuItem>

                <MenuItem Header="Display" Command="mashup:MashupInstance.MashupCommand">
                   <MenuItem.CommandParameter>
                      <mashup:Events>
                         <mashup:Event SourceEventName="Click" LinkUri="mforms://bookmark?program=MMS001&amp;tablename=MITMAS&amp;keys=MMCONO%2c{CONO}%2cMMITNO%2c{ITNO}%2b%2b%2b%2b%2b%2b%2b%2b%2b&amp;option=5&amp;panel=E&amp;name=MMS001%2fE+Bookmark&amp;source=MForms">
                            <mashup:Parameter TargetKey="ITNO" Value="{Binding [ITNO]}" />
                            <mashup:Parameter TargetKey="CONO" Value="001" />
                         </mashup:Event>
                      </mashup:Events>
                   </MenuItem.CommandParameter>
                </MenuItem>

                <MenuItem Header="Links">
                   <MenuItem Header="https://thibaudatwork.wordpress.com" Command="mashup:MashupInstance.MashupCommand">
                      <MenuItem.CommandParameter>
                         <mashup:Events>
                            <mashup:Event SourceEventName="Click" LinkUri="https://thibaudatwork.wordpress.com" LinkIsExternal="True">
                                     </mashup:Event>
                         </mashup:Events>
                      </MenuItem.CommandParameter>
                   </MenuItem>

                </MenuItem>
             </ContextMenu>
          </ListView.ContextMenu>

          <ListView.View>
             <GridView ColumnHeaderContainerStyle="{DynamicResource styleGridViewColumnHeader}">
                <GridView.Columns>
                   <GridViewColumn Header="Item:" DisplayMemberBinding="{Binding [ITNO]}" />
                   <GridViewColumn Header="Item type:" DisplayMemberBinding="{Binding [ITTY]}" />
                   <GridViewColumn Header="Lot ctrl:" DisplayMemberBinding="{Binding [INDI]}" />
                </GridView.Columns>
             </GridView>
          </ListView.View>
       </ListView>
    </m3:MIListPanel>

    <ui:StatusBar Name="StatusBar" Grid.Row="1" Grid.Column="0" />
 </Grid>

Regards
Ken Eric

2 thoughts on “Mashup – Adding a ContextMenu to the ListView”

  1. Hello Thibaud,

    I am trying to work Related option and get the screen in mashup itself, like in different grid of same Mashup.

    I am able to do this using writing Jscript for that related option and achieve the desired, but for knowledge sake can I do same thing using Mashup itself.

    For Ex: MMS001 –>related option 11–> opens MMS002 but totally on different window I want that window itself in one of the Mashup Grid.

    Regards,
    Kiran Choudhari

    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