Changing focus between cells when CellTemplate specified

[tindy]

We want to leverage Cell Templates instead of using the "edit mode" of the GridView however when tabbing between TextBoxes in the CellTemplate the Cell takes focus NOT the next cell's TextBox (that lives inside the CellTemplate). How do we fix this? We are using Q1 2009.

[Nedyalko Nikolov]

Hi tindy,

Unfortunately with the 2009.Q1 you cannot solve this problem, because RadGridView handles TAB key down event. We are doing our best in order to improve this behavior for the new official release (within 2-3 weeks).
Sorry for the inconvenience caused.

Best wishes,
Nedyalko Nikolov
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.

[Marcus Eddy]

Did this ever get solved we have the same problem?

[Vlad]

Hi,

Please check this demo to know more how to accomplish this.

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.

[Marcus Eddy]

Hi Vlad

Unfortunately this demo does not seem to help.

I am using Q3 2009 and for my scenario creating a list of outstanding payments, which i would like to either :
a) have non read only items in edit mode straight away so the user can instantly change values without having to click the items into edit mode or press f2
b) have the non read only items use the celltemplate(not celledittemplate) so that there is no need to click on the items to edit them or press f2

I set up b) with only one issue which is related to this post. 
Lets say the row is | readonly text 1 | read only text 2 | read only text 3 | combox box with options | datepicker | textbox |

if i am tabbing along this row when i keyup the tab on "read only text 3" i wish the combo box in the next column to become focused so that i can change the value (without the need for the mouse).  Currently the cell itself is focused not the internal combobox control. 

Is there any way of doing this in the grid?

Regards Marcus

[Vlad]

Hello Marcus,

You can use Loaded event of the combo to focus the combo itself when needed. You can check the same in our demo.

Best wishes,
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.

[Marcus Eddy]

Hi Vlad

I investigated using the Loaded event similar to the demo, but ran into some difficulties due to all controls being loaded one after the other.  I will continue to investigate this and the use of CurrentCellChanged event, do you have a event lifecycle for the grid i could get a hold of in particular the what occurs after currentcellchanged to focus the gridcell as my attempts to focus the control in the cell seem to be overridden by something occuring later in the cycle. Once i find a workable solution i will post for others.

Cheers Marcus

[Marcus Eddy]

For others this worked for me although there is probably another cleaner way to do it.

XAML

<telerik:RadGridView CurrentCellChanged="CellChanged" x:Name="gridReconcile" Margin="0" d:LayoutOverrides="Width, Height" ItemsSource="{Binding UnpaidBookings, Mode=Default}" telerik:StyleManager.Theme="Vista" ActionOnLostFocus="None" ValidationMode="Row" CanUserSelect="False" AutoGenerateColumns="False">
            <telerik:RadGridView.Columns>
                <telerik:GridViewDataColumn x:Name="PropertyName" Language="en-au" IsReadOnly="True" UniqueName="PropertyName" DataMemberBinding="{Binding PropertyName, Mode=OneWay}" Header="Property"/>
                <telerik:GridViewDataColumn x:Name="Guest" IsReadOnly="True" UniqueName="Guest" DataMemberBinding="{Binding NameAndInitials, Mode=OneWay}" Language="en-au" Header="Guest"/>
                <telerik:GridViewDataColumn x:Name="Room" IsReadOnly="True" UniqueName="Room" DataMemberBinding="{Binding Room, Mode=OneWay}" Language="en-au" Header="Room"/>
                <telerik:GridViewDataColumn x:Name="Name" UniqueName="Name" Header="Name" Language="en-au" DataMemberBinding="{Binding NameAndInitials, Mode=Default}"/>
                <telerik:GridViewDataColumn x:Name="DatesOfStay" Language="en-au" IsReadOnly="True" UniqueName="DatesOfStay" DataMemberBinding="{Binding BookingDates, Mode=OneWay}" Header="Dates of Stay"/>
                <telerik:GridViewDataColumn  x:Name="PaymentMethod" Language="en-au"  UniqueName="PaymentMethods" Header="Payment Method" Focusable="True">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                        <telerik:RadComboBox FocusVisualStyle="{DynamicResource FocusStyle}"  HorizontalAlignment="Stretch"  VerticalAlignment="Top" ItemsSource="{Binding PaymentMethods, Mode=Default}" SelectedValue="{Binding PaymentMethod, Mode=Default}"/>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn x:Name="PaymentDate" Language="en-au"  UniqueName="PaymentDate" Header="Payment Date">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <telerik:RadDatePicker FocusVisualStyle="{DynamicResource FocusStyle}" HorizontalAlignment="Stretch" VerticalAlignment="Top"  SelectedDate="{Binding PaymentDate, Mode=Default}"/>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
                <telerik:GridViewDataColumn x:Name="AmountDue" Language="en-au" IsReadOnly="True" UniqueName="AmountDue" DataMemberBinding="{Binding AmountDue, Mode=Default}" Header="Amount Due"/>
                    <telerik:GridViewDataColumn x:Name="AmountPaid" Language="en-au" UniqueName="AmountPaid"  Header="Payment Received">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <telerik:RadMaskedTextBox FocusVisualStyle="{DynamicResource FocusStyle}" HorizontalAlignment="Stretch" VerticalAlignment="Top" MaskType="Numeric" Mask="c" Value="{Binding AmountReceived, Mode=Default}"/>
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>

Code Behind

        private void CellChanged(object sender, GridViewCurrentCellChangedEventArgs e)
        {
            GridViewCell cell = (GridViewCell)e.NewCell;

            cell.IsKeyboardFocusedChanged += new DependencyPropertyChangedEventHandler(cell_IsKeyboardFocusedChanged);
        }

        void cell_IsKeyboardFocusedChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            GridViewCell cell = (GridViewCell)sender;

            Control ctrl = cell.Content as Control;
            if (ctrl != null)
            {

                ctrl.Focus();

            }
        }

Just create a blank focus style and assign it to the controls in xaml if you want to hide the dotted border around your cell template controls.

Cheers Marcus

[Anton]

I have the same problem. Work-around by Marcus has memory leak, because he never unsubscribes from cell event. I would like to find a better solution.

<Window x:Class="Test013100.MainWindow"
        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="http://schemas.telerik.com/2008/xaml/presentation"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <telerik:RadGridView ItemsSource="{Binding}" AutoGenerateColumns="False" CurrentCellChanged="RadGridView_CurrentCellChanged">
        <telerik:RadGridView.Columns>
            <telerik:GridViewDataColumn DataMemberBinding="{Binding Product}" IsReadOnly="True" />
            <telerik:GridViewDataColumn DataMemberBinding="{Binding Description}" IsReadOnly="True" />
            <telerik:GridViewColumn>
                <telerik:GridViewColumn.CellTemplate>
                    <DataTemplate>
                        <telerik:RadNumericUpDown Value="{Binding Price}" />
                    </DataTemplate>
                </telerik:GridViewColumn.CellTemplate>
            </telerik:GridViewColumn>
        </telerik:RadGridView.Columns>
    </telerik:RadGridView>
</Window>

 

using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace Test013100
{
    internal class Data
    {
        public string Product { get; set; }

        public string Description { get; set; }

        public decimal Price { get; set; }
    }

    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            var data = new List<Data>
            {
                new Data { Product = "A", Description = "A a a", Price = 123m },
                new Data { Product = "B", Description = "B b b", Price = 345m }
            };

            DataContext = data;
        }

        private void RadGridView_CurrentCellChanged(object sender, Telerik.Windows.Controls.GridViewCurrentCellChangedEventArgs e)
        {
            if (e.NewCell?.Content is UIElement cellContent)
            {
                if (cellContent is TextBlock)
                {
                    e.NewCell.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));
                }
                else
                {
                    cellContent.Focus();
                }
            }
        }
    }
}

 

My code does not work.

- Need to focus text-box when cell receives focus.
- Need to ignore read-only cells.

[Anton]

I tried to change cell style, it does not work too.

<telerik:GridViewColumn.CellStyle>
    <Style TargetType="{x:Type telerik:GridViewCell}">
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Focusable" Value="False" />
    </Style>
</telerik:GridViewColumn.CellStyle>

[Anton]

I replaced RadGridView with ListBox to implement the feature.