Hyperlink on selected value of combobox which is in DataGridTemplateColumn

Question

I am using datagrid in WPF. In one of the column i need to display dropdown values. When the value is selected from combobox i want it to become hyperlink so that users will click the like to open new page. Here the picture. In the column "FAULT CLA" combobox is shown. I want the selected number "2" in first row and number "3" in 2nd row to be shown as hyperlinks as shown in other cells.

Code which i am using

<DataGridTemplateColumn x:Name="FaultClass2" Header="Fault Class" >
                            <DataGridTemplateColumn.CellTemplate>
                                <DataTemplate>
                                    <ComboBox x:Name="FaultClass1">
                                        <ComboBoxItem Content="1"></ComboBoxItem>
                                        <ComboBoxItem Content="2"></ComboBoxItem>
                                        <ComboBoxItem Content="3"></ComboBoxItem>
                                    </ComboBox>
                                </DataTemplate>
                            </DataGridTemplateColumn.CellTemplate>
                        </DataGridTemplateColumn>

If anybody have idea on how to do please help me.

Thank you!

EDIT:

I tried your answer. Please check the code below.

<DataGridTemplateColumn CellEditingTemplate="{StaticResource EditTemplate1}" 
                             CellTemplate="{StaticResource NormalTemplate}">
                        </DataGridTemplateColumn>


    <UserControl.Resources>
    <DataTemplate x:Key="EditTemplate1">
        <ComboBox x:Name="FaultClass1">
            <ComboBoxItem Content="1"></ComboBoxItem>
            <ComboBoxItem Content="2"></ComboBoxItem>
            <ComboBoxItem Content="3"></ComboBoxItem>
        </ComboBox>
    </DataTemplate>

    <DataTemplate x:Key="NormalTemplate">
        <TextBlock Margin="2,6" >
              <Hyperlink  Click="Hyperlink_Click" ToolTip="RQ1 Access Rights Required">                               
                        <Run Text="{Binding Path=SelectedItem, ElementName=FaultClass1}"/>
                    </Hyperlink>
        </TextBlock>
    </DataTemplate>
</UserControl.Resources>

And the output i got is

So again hyperlink is missing. Could you please suggest me whats need to improved in hyperlink code?

Also if i click on combo box in second row, first row combobox selection is getting cleared.

Could you please guide me.

Thank you!

EDIT 2

Hi Again,

I did the following code changes.

    <UserControl.Resources>
    <DataTemplate x:Key="EditTemplate1">
        <ComboBox x:Name="FaultClass1"  
                  ItemsSource="{Binding ElementName=DSMCal_UserContrl, Path=DataContext.FaultClasses}"  SelectedItem="{Binding ElementName=DSMCal_UserContrl,Path=DataContext.SelectedFaultClass}">
        </ComboBox>
    </DataTemplate>

    <DataTemplate x:Key="NormalTemplate">
        <TextBlock Margin="2,6" >
            <Hyperlink  Click="Hyperlink_Click" ToolTip="RQ1 Access Rights Required">                               
                        <Run Text="{Binding ElementName=DSMCal_UserContrl,Path=DataContext.SelectedFaultClass}"/>
                    </Hyperlink>
        </TextBlock>
    </DataTemplate>
</UserControl.Resources>

Selection and hyperlink works now. Please see the screen shot below.

But now the problem is its setting the selected value of first row combo to remaining rows also.

And in the editing cell hyperlink is shown once the focus is changed.

Could you please give me idea how to solve this.

Thank you very much!

Hi Abin, My complete question was to get hyperlink for selected combo item in each row.. In each row selection will be different. If i select first 1 in first row, i may select 2 in second row. so i want 1 to appear with hyperlink in first row and two to appear with hyperlink in second row. I will vote your answer. Please suggest me for this problem.. Thank you! — Pan, Oct 21 '16 at 04:42
Hi the problem is you are binding the same selected item of your combobox to the hyperlink. what you have to do:- Create a class A which has a collection of Class B(List) for ComboBox ItemSource and SelectedItem(property B). now you can create a collection of class A(List) to bind to your DataGrids ItemSource. Hope you are clear now let me know if you have further questions we can do chat. I believe my timing and your timing are very deficient. — Abin, Oct 21 '16 at 12:55

score 1 · Accepted Answer · edited May 23 '17 at 12:00

1

Use CellEditingTemplate for DataGrid like below,

<DataGridTemplateColumn 
     CellEditingTemplate="{StaticResource EditTemplate1}" 
     CellTemplate="{StaticResource NormalTemplate}"/>

In resources

<DataTemplate x:Key="EditTemplate1">
  ...
</DataTemplate>

<DataTemplate x:Key="NormalTemplate">
  ...
</DataTemplate>

CellEditingTemplate will have your Combobox and CellTemplate will have a HyperLink which binds the SelectedItem of ComboBox.

EDIT

For HyperLink i used below solution.

 <Button Grid.Row="1"
                    Grid.Column="2"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Command="{Binding }"
                    Content="Bind your Selected Item from VM">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <TextBlock TextDecorations="Underline">
                                        <ContentPresenter />
                                </TextBlock>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="Foreground" Value="Red" />
                    <Style.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Foreground" Value="Blue" />
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>

Or you can find a better one Here

edited May 23 '17 at 12:00

Community

1
1

answered Oct 18 '16 at 15:14

Abin

2,868
1
23
59

Thank you for the reply Abin. I have tried adding the code and unfortunately hyperlink is missing. Could you please help me with code on how do you add hyperlink in NormalTemplate. I am editing my question to add what i have tried on your answer. thank you! – Pan Oct 19 '16 at 13:28
[This](http://stackoverflow.com/a/10238715/2470362) will help you create hyperlink. – Abin Oct 19 '16 at 13:31
Sorry,, I edited the question again. Please suggest me. – Pan Oct 19 '16 at 13:46
Can you please check in my code selected item binding for hyperlink is proper? – Pan Oct 19 '16 at 13:58
You should bind your Hyperlink from ViewModel as your ViewModel should contain the binding collection of combobox and selected item of combobox. – Abin Oct 19 '16 at 13:58
The selected item binding in you code does not work. you need to use collection from ViewModel to bind the itemSource and you should bind the SelectedItem. – Abin Oct 19 '16 at 14:00
Hi,, Thanks again.. I have edited my question again. Could you please have look on EDIT2 section. Thank you! – Pan Oct 20 '16 at 06:33

Hyperlink on selected value of combobox which is in DataGridTemplateColumn

1 Answers1