[Solved] GirdView Row Details

[Prakash]

Environment                   :  SilverLight 3.0

Control Name                 :  Telerik GridView
Description                     : Currently I am having four columns in gridview In that While clicking the “+” sign in grid row, its displaying details of row (using RadGridView.HierarchyChildTemplate)

Issue                             : When Clicking the “+” sign row details displays in twice(i.e double or duplicate details display) but this happens some time not all the times   

 

Please help

[Vlad]

Hello Prakash,

Can you send us an example where this can be reproduced?

Sincerely yours,
Vlad
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Prakash]

Following source code I am using in screen

 

 

<grid:RadGridView

 

 

x:Name="rgvHistory" IsReadOnly="True"

 

 

RowIndicatorVisibility="Collapsed"

 

 

ItemsSource="{Binding CompensationHistory}"

 

 

AutoGenerateColumns="False"

 

 

ColumnsWidthMode="Auto"

 

 

CanUserFreezeColumns="False"

 

 

Height="400"

 

 

IsFilteringAllowed="False"

 

 

ScrollViewer.VerticalScrollBarVisibility="Visible"

 

 

ShowGroupPanel="False"

 

 

Style="{StaticResource RadGrid}" Margin="0,10,0,0"

 

 

ScrollMode="RealTime">

 

 

 

<grid:RadGridView.Columns >

 

 

 

<grid:GridViewDataColumn HeaderText="Effective Date" DataMemberPath="StartDate" DataFormatString="{}{0:d}" Width="134" />

 

 

 

<grid:GridViewDataColumn HeaderText="Reason" DataMemberPath="Reason" Width="138" />

 

 

 

<grid:GridViewDataColumn HeaderText="Job Title" DataMemberPath="Title" Width="134" />

 

 

 

<grid:GridViewDataColumn HeaderText="Adjusted Amount" DataMemberPath="IncrementAmt" DataFormatString="{}{0:c}" Width="134" />

 

 

 

<grid:GridViewDataColumn HeaderText="Hourly Rate" DataMemberPath="HourlyRate" DataFormatString="{}{0:c}" Width="134" />

 

 

 

<grid:GridViewDataColumn HeaderText="Annual Salary" DataMemberPath="Annual" DataFormatString="{}{0:c}" Width="134" />

 

 

 

<grid:GridViewDataColumn Width="134">

 

 

 

<grid:GridViewDataColumn.CellTemplate>

 

 

 

<DataTemplate>

 

 

 

<HyperlinkButton Content="Comments" x:Name="hlbComments" Tag="{Binding CompensationID}" HorizontalAlignment="Left" VerticalAlignment="Top" Click="hlbComments_Click" MouseEnter="hlbComments_MouseEnter" />

 

 

 

</DataTemplate>

 

 

 

</grid:GridViewDataColumn.CellTemplate>

 

 

 

</grid:GridViewDataColumn>

 

 

 

</grid:RadGridView.Columns>

 

 

 

<grid:RadGridView.HierarchyChildTemplate>

 

 

 

<DataTemplate>

 

 

 

<Grid x:Name="rgvHistroyDetails" Background="#FFA5C2DD" Loaded="rgvHistroyDetail_Loaded" >

 

 

 

<Grid>

 

 

 

<Grid.ColumnDefinitions>

 

 

 

<ColumnDefinition/>

 

 

 

<ColumnDefinition/>

 

 

 

</Grid.ColumnDefinitions>

 

 

 

<Grid.RowDefinitions>

 

 

 

<RowDefinition />

 

 

 

<RowDefinition />

 

 

 

<RowDefinition />

 

 

 

<RowDefinition />

 

 

 

<RowDefinition />

 

 

 

<RowDefinition />

 

 

 

<RowDefinition />

 

 

 

</Grid.RowDefinitions>

 

 

 

<Image Grid.Column="0" Grid.Row="0" Grid.RowSpan="3" Source="../images/Graph.PNG" Width="240" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,5,0,5" />

 

 

 

<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="0" >

 

 

 

<!-- CURRENT ANNUAL PAY -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Style="{StaticResource ColWidth1}" Margin="0,8,0,8">

 

 

 

<TextBlock x:Name="lblCurrentAnnualPay" Style="{StaticResource FieldLabel}" Text="Current Annual Pay" />

 

 

 

<TextBlock x:Name="CurrentAnnualPay" Style="{StaticResource FieldData}" Text="{Binding Annual,Mode=TwoWay,Converter={StaticResource CurrencyConverter}}" />

 

 

 

</StackPanel>

 

 

 

<!-- CURRENT HOURLY PAY -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Column="2" Grid.Row="0" Style="{StaticResource ColWidth2}" Margin="0,8,0,8">

 

 

 

<TextBlock Style="{StaticResource FieldLabel}" x:Name="lblCurrentHourlyPay" Text="Current Hourly Pay" />

 

 

 

<TextBlock Style="{StaticResource FieldData}" x:Name="CurrentHourlyPay" Text="{Binding HourlyRate,Mode=TwoWay, Converter={StaticResource CurrencyConverter}}" />

 

 

 

</StackPanel>

 

 

 

<!-- AMOUNT PER PAYCHECK -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Column="3" Grid.Row="0" Style="{StaticResource ColWidth3}" Margin="0,8,0,8">

 

 

 

<TextBlock x:Name="lblAmountPerPaycheck" Style="{StaticResource FieldLabel}" Text="Amount Per Paycheck" />

 

 

 

<TextBlock x:Name="AmmountPerPaycheck" Style="{StaticResource FieldData}" Text="{Binding PerPay,Mode=TwoWay, Converter={StaticResource CurrencyConverter}}" />

 

 

 

</StackPanel>

 

 

 

</StackPanel>

 

 

 

<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Stretch">

 

 

 

<!-- PAY TYPE -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Column="1" Grid.Row="1" Style="{StaticResource ColWidth1}" Margin="0,8,0,8">

 

 

 

<TextBlock Style="{StaticResource FieldLabel}" x:Name="lblPayType" Text="Pay Type" />

 

 

 

<TextBlock Style="{StaticResource FieldData}" x:Name="PayType" Text="{Binding PayType,Mode=TwoWay}" />

 

 

 

</StackPanel>

 

 

 

<!-- PAYROLL FREQUENCY -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Column="2" Grid.Row="1" Style="{StaticResource ColWidth2}" Margin="0,8,0,8">

 

 

 

<TextBlock Style="{StaticResource FieldLabel}" x:Name="lblPayrollFrequency" Text="Pay Frequency" />

 

 

 

<TextBlock Style="{StaticResource FieldData}" x:Name="PayrollFrequency" Text="{Binding PayCycle,Mode=TwoWay}" />

 

 

 

</StackPanel>

 

 

 

<!-- SCHEDULED HOURS -->

 

 

 

<StackPanel x:Name="stkpnlScheduledHours" Orientation="Vertical" VerticalAlignment="Top" Grid.Column="3" Grid.Row="1" Style="{StaticResource ColWidth3}" Margin="0,8,0,8">

 

 

 

<StackPanel Orientation="Horizontal">

 

 

 

<TextBlock Style="{StaticResource FieldLabel}" x:Name="lblScheduledHours" Text="Scheduled Hours" />

 

 

 

<Image Source="../images/icon-field-help.png" x:Name="imgFieldHelpScheduledHours" MouseLeftButtonUp="imgFieldHelpScheduledHours_MouseLeftButtonUp" Style="{StaticResource Image_HelpIcon}" />

 

 

 

</StackPanel>

 

 

 

<TextBlock Style="{StaticResource FieldData}" x:Name="ScheduleHours" Text="{Binding HoursPerPay,Mode=TwoWay, Converter={StaticResource DoubleConverter}}" />

 

 

 

</StackPanel>

 

 

 

</StackPanel>

 

 

 

<StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Stretch">

 

 

 

<!-- CURRENCY CODE -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Column="1" Grid.Row="2" Style="{StaticResource ColWidth1}" Margin="0,8,0,8">

 

 

 

<StackPanel Orientation="Horizontal">

 

 

 

<TextBlock Style="{StaticResource FieldLabel}" x:Name="txtblkCurrencyCode" Text="Currency Code" />

 

 

 

<Image Source="../images/icon-field-help.png" x:Name="imgFieldHelpCurrentCode" MouseLeftButtonUp="imgFieldHelpCurrentCode_MouseLeftButtonUp" Style="{StaticResource Image_HelpIcon}" />

 

 

 

</StackPanel>

 

 

 

<TextBlock Style="{StaticResource FieldData}" x:Name="CurrencyCode" Text="{Binding LocalCurrency,Mode=TwoWay}" />

 

 

 

</StackPanel>

 

 

 

<!-- PAY GROUP -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Column="1" Grid.Row="2" Style="{StaticResource ColWidth2}" Margin="0,8,0,8">

 

 

 

<StackPanel Orientation="Horizontal">

 

 

 

<TextBlock Style="{StaticResource FieldLabel}" x:Name="txtblkPayGroup" Text="Pay Group" />

 

 

 

<Image Source="../images/icon-field-help.png" x:Name="imgFieldHelpPayGroup" MouseLeftButtonUp="imgFieldHelpPayGroup_MouseLeftButtonUp" Style="{StaticResource Image_HelpIcon}" />

 

 

 

</StackPanel>

 

 

 

<TextBlock Style="{StaticResource FieldData}" x:Name="PayGroup" Text="{Binding PayGroup,Mode=TwoWay}" />

 

 

 

</StackPanel>

 

 

 

</StackPanel>

 

 

 

 

<!-- JOB SUMMARY -->

 

 

 

<Grid Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2" HorizontalAlignment="Stretch" Margin="0,10,0,0">

 

 

 

<Grid.ColumnDefinitions>

 

 

 

<ColumnDefinition />

 

 

 

<ColumnDefinition />

 

 

 

</Grid.ColumnDefinitions>

 

 

 

<Grid.RowDefinitions>

 

 

 

<RowDefinition />

 

 

 

<RowDefinition />

 

 

 

</Grid.RowDefinitions>

 

 

 

<TextBlock Grid.Column="0" Grid.Row="0" Text="CURRENT JOB SUMMARY" Style="{StaticResource SubHeader}" />

 

 

 

<Line Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Margin="0" Stroke="#FF999999" X1="0" Y1="0" Y2="0" StrokeDashArray="2,6" X2="918" />

 

 

 

</Grid>

 

 

 

<StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="2">

 

 

 

<!-- CURRENT JOB TITLE -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Column="0" Grid.Row="4" Style="{StaticResource ColWidth0}" Margin="0,8,0,8">

 

 

 

<TextBlock Style="{StaticResource FieldLabel}" x:Name="lblCurrentJobTitle" Text="Current Job Title" />

 

 

 

<TextBlock Style="{StaticResource FieldData}" x:Name="CurrentJobTitle" Text="{Binding Title}" />

 

 

 

</StackPanel>

 

 

 

<!-- PAY GRADE -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Column="1" Grid.Row="4" Style="{StaticResource ColWidth1}" Margin="0,8,0,8">

 

 

 

<StackPanel Orientation="Horizontal">

 

 

 

<TextBlock Style="{StaticResource FieldLabel}" x:Name="txtblkPayGrade" Text="Pay Grade" />

 

 

 

<Image Source="../images/icon-field-help.png" x:Name="imgFieldHelpPayGrade" MouseLeftButtonUp="imgFieldHelpPayGrade_MouseLeftButtonUp" Style="{StaticResource Image_HelpIcon}" />

 

 

 

</StackPanel>

 

 

 

<TextBlock Style="{StaticResource FieldData}" x:Name="PayGrade" Text="{Binding PayGrade}" />

 

 

 

</StackPanel>

 

 

 

<!-- LOCATION -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Column="2" Grid.Row="4" Style="{StaticResource ColWidth2}" Margin="0,8,0,8">

 

 

 

<TextBlock Style="{StaticResource FieldLabel}" x:Name="lblLocation" Text="Location" />

 

 

 

<TextBlock Style="{StaticResource FieldData}" x:Name="Location" Text="{Binding Location}" />

 

 

 

</StackPanel>

 

 

 

<!-- SUPERVISOR -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Column="3" Grid.Row="4" Style="{StaticResource ColWidth3}" Margin="0,8,0,8">

 

 

 

<TextBlock Style="{StaticResource FieldLabel}" x:Name="lblSupervisor" Text="Supervisor" />

 

 

 

<TextBlock Style="{StaticResource FieldData}" x:Name="Supervisor" Text="{Binding SupervisorName}" />

 

 

 

</StackPanel>

 

 

 

</StackPanel>

 

 

 

<StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="2">

 

 

 

<!-- DEPARTMENT -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Column="0" Grid.Row="5" Style="{StaticResource ColWidth0}" Margin="0,8,0,8">

 

 

 

<TextBlock Style="{StaticResource FieldLabel}" x:Name="lblDepartment" Text="Department" />

 

 

 

<TextBlock Style="{StaticResource FieldData}" x:Name="Department" Text="{Binding Department}" />

 

 

 

</StackPanel>

 

 

 

<!-- BUSINESS UNIT -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Column="1" Grid.Row="5" Style="{StaticResource ColWidth1}" Margin="0,8,0,8">

 

 

 

<TextBlock Style="{StaticResource FieldLabel}" x:Name="lblBusinessUnit" Text="Business Unit" />

 

 

 

<TextBlock Style="{StaticResource FieldData}" x:Name="BusinessUnit" Text="{Binding BusinessUnit }" />

 

 

 

</StackPanel>

 

 

 

<!-- REGION -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Column="2" Grid.Row="5" Style="{StaticResource ColWidth2}" Margin="0,8,0,8">

 

 

 

<TextBlock Style="{StaticResource FieldLabel}" x:Name="lblRegion" Text="Region" />

 

 

 

<TextBlock Style="{StaticResource FieldData}" x:Name="Region" Text="{Binding Region}" />

 

 

 

</StackPanel>

 

 

 

<!-- OFFICE ID -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Column="3" Grid.Row="5" Style="{StaticResource ColWidth3}" Margin="0,8,0,8">

 

 

 

<StackPanel Orientation="Horizontal">

 

 

 

<TextBlock Style="{StaticResource FieldLabel}" x:Name="lblOfficeId" Text="Office ID" />

 

 

 

<Image Source="../images/icon-field-help.png" x:Name="imgFieldHelpOfficeID" MouseLeftButtonUp="imgFieldHelpOfficeID_MouseLeftButtonUp" Style="{StaticResource Image_HelpIcon}" />

 

 

 

</StackPanel>

 

 

 

<TextBlock Style="{StaticResource FieldData}" x:Name="OfficeId" Text="{Binding Room}" />

 

 

 

</StackPanel>

 

 

 

</StackPanel>

 

 

 

<StackPanel Orientation="Horizontal" Grid.Column="0" Grid.Row="6" Grid.ColumnSpan="2">

 

 

 

<!-- DIVISION -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Column="0" Grid.Row="6" Style="{StaticResource ColWidth0}" Margin="0,8,0,8">

 

 

 

<TextBlock Style="{StaticResource FieldLabel}" x:Name="lblDivision" Text="Division" />

 

 

 

<TextBlock Style="{StaticResource FieldData}" x:Name="Division" Text="{Binding Division}" />

 

 

 

</StackPanel>

 

 

 

<!-- COMPANY -->

 

 

 

<StackPanel Orientation="Vertical" VerticalAlignment="Top" Grid.Column="1" Grid.Row="6" Style="{StaticResource ColWidth1}" Margin="0,8,0,8">

 

 

 

<TextBlock Style="{StaticResource FieldLabel}" x:Name="lblCompany" Text="Company" />

 

 

 

<TextBlock Style="{StaticResource FieldData}" x:Name="Company" Text="{Binding Company}" />

 

 

 

</StackPanel>

 

 

 

</StackPanel>

 

 

 

</Grid>

 

 

 

</Grid>

 

 

 

</DataTemplate>

 

 

 

</grid:RadGridView.HierarchyChildTemplate>

 

 

 

</grid:RadGridView>

 

[Prakash]

I need to have three controls in a single column of telerik grid.

1. Textbox

2. Combo Box

3. Label

 

When I change the combo box value, label visibility and label value needs to be changed accordingly.

Is it possible?

[Rossen Hristov]

Hi Prakash,

Yes, this is possible. You can place any user control as a CellEditTemplate. Here is a small example:

<UserControl x:Class="TicketID_239236_CustomCellTemplate.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
    xmlns:local="clr-namespace:TicketID_239236_CustomCellTemplate"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid>
        <telerik:RadGridView Name="playersGrid" AutoGenerateColumns="False"
                ColumnsWidthMode="Auto">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="Name"
                                            DataMemberBinding="{Binding Name}">
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn Header="Number"
                                            DataMemberBinding="{Binding Number}">
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn Header="Position"
                                            DataMemberBinding="{Binding Position}"
                                            Width="180">
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn Header="Country"
                                            DataMemberBinding="{Binding CountryID}">
                    <telerik:GridViewDataColumn.CellEditTemplate>
                        <DataTemplate>
                            <local:CustomEditor/>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellEditTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</UserControl>

And here is an UserControl:

<UserControl x:Class="TicketID_239236_CustomCellTemplate.CustomEditor"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition Width="60"/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBox Text="TextBox" Grid.Column="0"/>
        <Controls:RadComboBox Grid.Column="1"
                              SelectedValue="{Binding CountryID, Mode=TwoWay}"
                              SelectedValuePath="ID"
                              DisplayMemberPath="Name"
                              Loaded="RadComboBox_Loaded"
                              SelectionChanged="RadComboBox_SelectionChanged">
        </Controls:RadComboBox>
        <TextBlock Grid.Column="2"
                   Name="textBlock"
                   Visibility="Collapsed">
        </TextBlock>
    </Grid>
</UserControl>

And the code-behind of the UserControl:

using System.Windows;
using System.Windows.Controls;
using Telerik.Windows.Controls;
using SelectionChangedEventArgs=Telerik.Windows.Controls.SelectionChangedEventArgs;

namespace TicketID_239236_CustomCellTemplate
{
    public partial class CustomEditor : UserControl
    {
        public CustomEditor()
        {
            this.InitializeComponent();
        }

        private void RadComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            this.textBlock.Text = ((RadComboBox) sender).SelectedValue.ToString();
            this.textBlock.Visibility = Visibility.Visible;
        }

        private void RadComboBox_Loaded(object sender, RoutedEventArgs e)
        {
            ((RadComboBox) sender).ItemsSource = Country.Countries;
        }
    }
}

I have attached a sample project. You can use it as a base and build upon it.

Best wishes,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Prakash]

Hi Ross,

Thanks  for your kind support
its implemented working fine