How to identify the Tag property of a control on clicked when inside a RAD Grid

[Rajesh]

Hi,

I have a Telerik Grid with data templates containing various controls. The layout of the grid is defined as below

<telerikGrid:RadDataGrid
            x:Name="QuestionAnswersGrid" AutoGenerateColumns="False" AlternateRowBackground="Lavender" ScrollViewer.HorizontalScrollMode="Auto"
            ScrollViewer.VerticalScrollMode="Auto"
            GroupHeaderDisplayMode="Frozen" Margin="51,44,45,36" Grid.Row="1" Width="1200" UserGroupMode="Disabled" ItemsSource="{Binding QuestionList}">
            <telerikGrid:RadDataGrid.GroupDescriptors>
                <telerikGrid:PropertyGroupDescriptor PropertyName="Room"/>
            </telerikGrid:RadDataGrid.GroupDescriptors>
            <telerikGrid:RadDataGrid.Columns>
                <telerikGrid:DataGridTemplateColumn Header="Question" SizeMode="Fixed" Width="700">
                    <telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Question}" TextWrapping="Wrap"/>
                        </DataTemplate>
                    </telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                </telerikGrid:DataGridTemplateColumn>

                <telerikGrid:DataGridTemplateColumn Header="Answer" SizeMode="Fixed" Width="200">
                    <telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                        <DataTemplate>
                            <ComboBox ItemsSource="{Binding Answers}" DisplayMemberPath="AD_Ans" SelectedItem="{Binding SelectedAnswer, Mode=TwoWay}"/>
                        </DataTemplate>
                    </telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                </telerikGrid:DataGridTemplateColumn>

                <telerikGrid:DataGridTemplateColumn Header="Notes" SizeMode="Fixed" Width="150">
                    <telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <Image Source="Assets/Mail.png" Stretch="Uniform" Width="40" Height="40" Tapped="IMG_Tapped" Tag="{Binding QID}"/>
                            </StackPanel>
                        </DataTemplate>
                    </telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                </telerikGrid:DataGridTemplateColumn>

                <telerikGrid:DataGridTemplateColumn Header="Photo" SizeMode="Fixed" Width="150">
                    <telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <Image Source="Assets/Camera-01.png" Stretch="Uniform" Width="40" Height="40" Tapped="Image_Tapped" Tag="{Binding QID}"/>
                            </StackPanel>
                        </DataTemplate>
                    </telerikGrid:DataGridTemplateColumn.CellContentTemplate>
                </telerikGrid:DataGridTemplateColumn>
            </telerikGrid:RadDataGrid.Columns>
        </telerikGrid:RadDataGrid>

Now my question is How to identify the tag property of the control that I click on. I have 3 controls that will be interacted with (Combo Box, Image Control)

When I click on the control  <Image Source="Assets/Mail.png" Stretch="Uniform" Width="40" Height="40"Tapped="IMG_Tapped" Tag="{Binding QID}"/> and <Image Source="Assets/Camera-01.png" Stretch="Uniform" Width="40"Height="40" Tapped="Image_Tapped" Tag="{Binding QID}"/> I want to identify the Tag value so that I can do some processing (to change the colour of this Image to RED) after completing the operation.

And finally I want to be able to enumerate through all the combo boxes that do not have the SelectedIndex = -1 (means a value was selected) and save them to a List<>.

Please advice what is the best way to achieve this functionality. I saw this link (http://stackoverflow.com/questions/23645331/how-to-accessing-elements-in-xaml-datatemplate-listview-without-interacting-with) that explains but this code does not work for a Telerik RADGrid.

Thanks,

Rajesh.

[Rosy Topchiyska]

Hi Rajesh,

Thank you for the questions.

Here is how you can get the QID of the item that corresponds to the tapped image:

private void IMG_Tapped(object sender, TappedRoutedEventArgs e)
{
    var image = sender as Image;
    var id = image.Tag;
    ...
}

Since the selected item of the ComboBox is bound to the SelectedAnswer property of the items, you can enumerate through all items in the grid ItemsSource (or the ViewModel.QuestionList collection) and check whether their SelectedAnswer property is not null. 

I hope this helps. Please, let us know if you have further questions.

Regards,
Rosy Topchiyska
Telerik

 

 

[Rajesh]

Hi,

Thanks a lot for this tip and it worked well to identify the row that was clicked. Unfortunately I ran into some issues when processing these two image rows.

<Image Source="Assets/Camera-01.png" Stretch="Uniform"Width="40" Height="40" Tapped="Image_Tapped" Tag="{Binding QID}"/> and
<Image Source="Assets/Mail.png" Stretch="Uniform"Width="40" Height="40" Tapped="IMG_Tapped" Tag="{Binding QID}"/>

Actually I want to change the color of the icon themselves per row after clicking. When it loads for the first time they are black and after clicking them, the color has to change to blue. Attaching a sample screen shot. 

My code  is 

//first find out the Tag Name
          var image = sender as Image;
          var id = image.Tag;
//Take the photo or take the notes

//finally change the icon of that row
         var image1 = sender as Image;
         var uri = new Uri("ms-appx:///Assets/Camera_Taken.png");
         BitmapImage bmpImg = new BitmapImage(uri);
         image1.Source = bmpImg;

        QuestionAnswersGrid.UpdateLayout();

It works fine but after scrolling the grid to work on other rows, the icon reverts back to the original one.

What is the reason and can it be set permanently in code behind.

Thanks,

Rajesh.

[Rosy Topchiyska]

Hi Rajesh,

The reason why the icons are reset is the UI virtualization of the grid. The containers of the cells are reused when you scroll. The CellContentTemplate is used when updating the content of the cells and any changes made are lost. You can expose a property of the data items that will be used to keep whether the user has clicked on the notes cell and and use this property in the template of the cells to get the right image.

I hope this helps. Please, let us know if you have any other problems.

Regards,
Rosy Topchiyska
Telerik