How to have row auto selected when control is selected within a column?

[Mark]

I have a GridTemplateColumn with a listview with a datatemplate and a couple of buttons, one inside the listview, and one outside. I would like for the current Row to be selected and highlighted when one of the buttons is selected, so that I can use the SfDataGrid's CurrentItem or SelectedItem for my MVVM button's command binding. Is there any way to do this?

Thank you,

Mark

<syncfusiongrid:GridTemplateColumn HeaderText="Status"
                                    MappingName="SelectedIndexAssignedUser"
                                    AllowEditing="True">
    <syncfusiongrid:GridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="1*" />
                    <RowDefinition Height="1.5*" />
                </Grid.RowDefinitions>

                <Grid Grid.Row="2"
                        Padding="5"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid Grid.Row="0"
                            HorizontalAlignment="Stretch"
                            Margin="0,0,5,0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <TextBlock x:Uid="Attachments"
                                    Grid.Column="0"
                                    HorizontalAlignment="Center" />
                        <Button Grid.Column="1"
                                Margin="5,0"
                                Command="{Binding ElementName=ActivitiesDetailsUC, Path=ViewModel.AttachNewActivityButtonCommand, Mode=OneWay}"
                                CommandParameter="{Binding}"
                                syncfusiongrid:FocusManagerHelper.FocusedElement="True">
                            <StackPanel>
                                <SymbolIcon Symbol="Add" />
                            </StackPanel>
                        </Button>
                    </Grid>
                   
                    <ListView x:Name="AttachmentList"
                                Grid.Row="1"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"
                                Style="{StaticResource HorizontalListViewStyle}"
                                ItemsSource="{Binding AttachmentList, Mode=OneWay}"
                                ItemTemplate="{StaticResource AttachmentTemplate}"
                                ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}"
                                syncfusiongrid:FocusManagerHelper.FocusedElement="True">
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="HorizontalContentAlignment"
                                        Value="Stretch" />
                            </Style>
                        </ListView.ItemContainerStyle>
                    </ListView>
                </Grid>
            </Grid>
        </DataTemplate>
    </syncfusiongrid:GridTemplateColumn.CellTemplate>

</syncfusiongrid:GridTemplateColumn>

<UserControl.Resources>
        <DataTemplate x:Key="AttachmentTemplate">
            <Grid HorizontalAlignment="Stretch"
                  Background="White"
                  BorderBrush="Black"
                  BorderThickness="1">
                <Button syncfusiongrid:FocusManagerHelper.FocusedElement="True">
                    <Image MaxHeight="50"
                           MaxWidth="50"
                           Source="{Binding ImageSource}" />
                    <Button.Flyout>
                        <Flyout Placement="Top">
                            <Flyout.FlyoutPresenterStyle>
                                <Style TargetType="FlyoutPresenter">
                                    <Setter Property="Margin"
                                            Value="50,50,0,0" />
                                    <Setter Property="MinHeight"
                                            Value="360" />
                                    <Setter Property="MinWidth"
                                            Value="640" />
                                </Style>
                            </Flyout.FlyoutPresenterStyle>
                            <Grid HorizontalAlignment="Stretch">
                                <StackPanel>
                                    <Grid HorizontalAlignment="Stretch"
                                          VerticalAlignment="Bottom"
                                          Background="White"
                                          BorderBrush="Black"
                                          BorderThickness="1">
                                        <Image Grid.Row="0"
                                               Width="600"
                                               Stretch="Uniform"
                                               Source="{Binding ImageSource}" />
                                    </Grid>
                                    <Grid Grid.Row="1"
                                          Padding="5">
                                        <Button Width="40"
                                                HorizontalAlignment="Right"
                                                Command="{Binding ElementName=ActivitiesDetailsUC, Path=ViewModel.RemoveAttachNewActivityButtonCommand, Mode=OneWay}"
                                                CommandParameter="{Binding}"
                                                syncfusiongrid:FocusManagerHelper.FocusedElement="True">
                                            <StackPanel>
                                                <SymbolIcon Symbol="Remove" />
                                            </StackPanel>
                                        </Button>
                                    </Grid>
                                </StackPanel>
                            </Grid>
                        </Flyout>
                    </Button.Flyout>
                </Button>
            </Grid>
        </DataTemplate>
    </UserControl.Resources>

[Gnanasownthari Thirugnanam]

Hi Mark, 

 

You can select the SfDataGrid row while click the button inside that row or Button inside that row of ListView by setting the value to SelectedItem using Binding like below code example. 

 

<syncfusion:SfDataGrid Name="sfDataGrid" 

                              RowHeight="100" 

                               SelectedItem="{Binding SelectedItem,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" 

                               AutoGenerateColumns="True"  

                               ItemsSource="{Binding OrderInfoCollection}"> 

…………………………………………….. 

…………………………………. 

……………………………… 

<syncfusion:GridTemplateColumn.CellTemplate> 

                        <DataTemplate> 

                            <Grid> 

                                <Grid.RowDefinitions> 

                                    <RowDefinition Height="*" /> 

                                    <RowDefinition Height="*" /> 

                                </Grid.RowDefinitions> 

                                <Button Grid.Row="0"  Content="SeteSelectedItem"                      

                                Command="{Binding ElementName=sfDataGrid, Path=DataContext.RowDataCommand, Mode=OneWay}" 

                                CommandParameter="{Binding}" 

                                syncfusion:FocusManagerHelper.FocusedElement="True"> 

                                </Button> 

                                <ListView x:Name="listView" ItemsSource="{Binding Path=DataContext.AttachmentList, ElementName=sfDataGrid}" Grid.Row="1" ItemTemplate="{StaticResource AttachmentTemplate}"> 

                                </ListView> 

                            </Grid> 

                        </DataTemplate> 

</syncfusion:GridTemplateColumn.CellTemplate> 

 

…………………………… 

……………………………….. 

………………………….. 

<DataTemplate x:Key="AttachmentTemplate"> 

            <Grid> 

                <Button Content="{Binding}"  Command="{Binding Path=DataContext.ListViewCommand,ElementName=sfDataGrid}" 

                                                CommandParameter="{Binding ElementName=listView}"/> 

            </Grid> 

</DataTemplate> 

 

public void RowDataComandExecute(object obj) 

{ 

    var rowdataContent = (obj as OrderInfo); 

    //Here you can select the SfDataGrid row while click the Button in that row. 

    SelectedItem = rowdataContent; 

} 

public void ListViewCommandExcute(object obj) 

{ 

    var rowdataContent = (obj as ListView).DataContext as OrderInfo; 

    //Here you can select the SfDataGrid row while click the Button in that row of ListView. 

    SelectedItem = rowdataContent; 

            

} 

 

 

We have prepared the sample based on your requirement in MVVM pattern, you can download it from below mentioned location. 

 

Sample location: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDataGridDemo-329299499 

 

Please let us know if you need further assistance on this, we will happy to assist you. 

Regards, 

Gnanasownthari T. 

[Mark]

Thank you Gnanasownthari!

With your help I was able to get the row auto selected when I select a control in the SfDataGrid. Below is a slightly modified version to work with a ComboBox:

        <DataTemplate x:Key="AssignedUsersTemplate">

            <Grid>

                <TextBlock Text="{Binding FullName}" />

                <i:Interaction.Behaviors>

                    <ic:EventTriggerBehavior EventName="PointerPressed">

                        <ic:InvokeCommandAction Command="{Binding Path=DataContext.ActivitiesComboBoxCommand, ElementName=ActivitiesDataGrid}"

                                                CommandParameter="{Binding ElementName=AssignedUserCB }" />

                    </ic:EventTriggerBehavior>

                </i:Interaction.Behaviors>

            </Grid>

        </DataTemplate>

                                        <ComboBox x:Name="AssignedUserCB"

                                                  HorizontalAlignment="Stretch"

                                                  Margin="2,0"

                                                  BorderThickness="0"

                                                  ItemsSource="{Binding ElementName=ActivitiesDetailsUC, Path=ViewModel.AssignedUsersNewActivityList, Mode=TwoWay}"

                                                  SelectedItem="{Binding ElementName=ActivitiesDetailsUC, Path=ViewModel.SelectedAssignedUser, Mode=TwoWay}"

                                                  SelectedIndex="{Binding SelectedIndexAssignedUser, Mode=TwoWay}"

                                                  ItemTemplate="{StaticResource AssignedUsersTemplate}">

                                        </ComboBox>

[Gnanasownthari Thirugnanam]

Hi Mark, 

 

Thank you for your update, 

 

You can proceed with your given code to achieve your requirement. 

 

Please let us know if you need further assistance on this, we will happy to assist you. 

 

Regards, 

Gnanasownthari T.