Showing Datepickers in cells

[James]

I'm trying to show the RadDatePicker in cells by default.  I know that I can use the built in editors, but I want the pickers showing by default without the user having to click into the cell.  So I made a control template based on an example I saw elsewhere in this forum doing the same thing for CheckBoxes.  The code I'm using is below:

<telerik:RadGridView Name="ActiveGrid" Grid.Row="0" Style="{DynamicResource DefaultGrid}"
                     ItemsSource="{Binding Path=CompletionList}" AutoGenerateColumns="False" ScrollMode="RealTime"
                      DataLoadMode="Synchronous" CanUserSortColumns="False" SelectionChanged="RadGridView_SelectionChanged"
                     CurrentCellChanged="ActiveGrid_CurrentCellChanged" >
    <telerik:RadGridView.Resources>
        <ControlTemplate x:Key="completionDateCellTemplate" TargetType="{x:Type telerik:GridViewCell}">
            <telerik:RadDatePicker SelectionChanged="RadDatePicker_SelectionChanged" VerticalAlignment="Center"
                                    SelectedDate="{Binding Path=dtDateCompleted}"/>
        </ControlTemplate>
        <Style x:Key="completionDateCellStyle" TargetType="{x:Type telerik:GridViewCell}">
            <Setter Property="telerik:GridViewCell.Template" Value="{StaticResource completionDateCellTemplate}" />
        </Style>
    </telerik:RadGridView.Resources>
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn Width="*" Header="Comp." Name="CompDateCompleted"
                                    CellStyle="{StaticResource completionDateCellStyle}" TextWrapping="Wrap"  />
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

(This is of course a cut down version of my full grid)

This works fine and shows the date pickers if the dates are all null.  However, if the dates are non null then the no rows display at all - this includes rows that have the dates as null.  I can scroll for some reason when this happens even though I don't see any rows, and I get the following information from the Output window:
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'RelativeSource FindAncestor, AncestorType='Telerik.Windows.Controls.RadGridView', AncestorLevel='1''. BindingExpression:Path=UseAlternateRowStyle; DataItem=null; target element is 'GridViewRow' (Name=''); target property is 'NoTarget' (type 'Object')

I assume this is more to do with the rows not being there than related to the DatePicker not working though.

I'm using the latest release of the controls - 2009 Q2.

I've tried binding to DisplayDate as well, and this might work except that it's a DateTime rather than a DateTime? so I can't bind to it, since my dates are nullable.

Any ideas on how to make this work?

[Rossen Hristov]

Hi James,

I have prepared a small sample project for testing purposes. Here is the XAML:

<Window x:Class="Ticket225561_RadDatePickerInCells.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" Title="Window1"
        Height="300" Width="300">
    <Grid>
        <telerik:RadGridView Name="clubsGrid" Grid.Row="0" AutoGenerateColumns="False"
                ColumnsWidthMode="Auto">
            <telerik:RadGridView.Resources>
                <ControlTemplate x:Key="estDateCellTemplate"
                        TargetType="{x:Type telerik:GridViewCell}">
                    <telerik:RadDatePicker SelectedDate="{Binding Established}" />
                </ControlTemplate>
                <Style x:Key="estDateCellStyle" TargetType="{x:Type telerik:GridViewCell}">
                    <Setter Property="telerik:GridViewCell.Template"
                            Value="{StaticResource estDateCellTemplate}" />
                </Style>
            </telerik:RadGridView.Resources>
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Name}">
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn Header="Est." DataMemberBinding="{Binding Established}"
                        CellStyle="{StaticResource estDateCellStyle}">
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</Window>

The sample project is working correctly on my end. Can you run it on your end and see whether you will see the DatePickers. If you do, can you try to modify my project in a way to reproduce the original problem.

I am looking forward to hearing from you.

Kind regards,
Ross
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[James]

Hi Ross

Thanks for the quick response.

Your test project does work for me, and I've reduced my grid down and determined where the problem is occurring on this event - SelectionChanged="RadDatePicker_SelectionChanged".

Basically my event handler was causing the list to reload itself at an inappropriate time, so I've changed my code and it now works fine.

Thanks again for your help and my apologies for taking up your valuable time!

[Siingh]

Hi Telerik
I tired your code and works fine on my end but problem is i cant see any data on gridview.
i can select datepicker but when i load gridview i cant see any data.
date picker only showing "Enter Date" .


help me please asap


Kind Regards:

[Pavel Pavlov]

Hello Siingh,

Having this info I may only guess what went wrong. To be able to help you , I will need to see at least your code. A runnable repro from you would be great.

Regards,
Pavel Pavlov
the Telerik team

[Siingh]

Here is my XAML Code

<telerik:RadGridView x:Name="GridDaily" AutoGenerateColumns="False" ItemsSource="{Binding}" SelectionMode="Extended">
                            <telerik:RadGridView.Resources>
                                <ControlTemplate x:Key="estDateCellTemplate"  TargetType="{x:Type telerik:GridViewCell}">
                                    <telerik:RadDatePicker SelectedValue="{Binding TimeIn}" SelectedDate="{Binding TimeIn}" TimeInterval="0:30:00" />
                                </ControlTemplate>
                                <Style x:Key="estDateCellStyle" TargetType="{x:Type telerik:GridViewCell}">
                                    <Setter Property="telerik:GridViewCell.Template"  Value="{StaticResource estDateCellTemplate}" />
                                </Style>
                            </telerik:RadGridView.Resources>

                            <telerik:RadGridView.Columns>
                                <telerik:GridViewSelectColumn />
                                <telerik:GridViewDataColumn Header="ID"  DataMemberBinding="{Binding WorkersSno}"  />
                                <telerik:GridViewDataColumn Header="Name"  DataMemberBinding="{Binding Name}"  />
                                <telerik:GridViewDataColumn Header="In"  DataMemberBinding="{Binding TimeIn}"
                                 CellStyle="{StaticResource estDateCellStyle}" />
                                <telerik:GridViewDataColumn Header="Out"  DataMemberBinding="{Binding TimeOut}"  />
                                <telerik:GridViewDataColumn Header="Raw In"  DataMemberBinding="{Binding RawTimeIn}"  />
                                <telerik:GridViewDataColumn Header="Raw Out"  DataMemberBinding="{Binding RawTimeOut}"  />
                                <telerik:GridViewDataColumn Header="Status"  DataMemberBinding="{Binding Status}"  />
                                <telerik:GridViewDataColumn Header="Position"  DataMemberBinding="{Binding Position}"  />
                                <telerik:GridViewDataColumn Header="Company"  DataMemberBinding="{Binding Company}"  />
                                <telerik:GridViewDataColumn Header="Bonus"  DataMemberBinding="{Binding BonusLoc}"  />
                                <telerik:GridViewDataColumn Header="Band"  DataMemberBinding="{Binding TimeBand}"  />
                                <telerik:GridViewDataColumn Header="Profile"  DataMemberBinding="{Binding ProfileName}"  />
                            </telerik:RadGridView.Columns>

                        </telerik:RadGridView>

This one is bind to DataTable from code behind

if i dont use datepicker inside i can see Date date in column TimeIn but with date picker i see only Datepicker with Message "Enter Date" no actualy or selected date is showing


Help me please asap


Kind Regards: