Why do we need to click twice on a button within a RadGridView ?

[Joachim]

Hello Telerik Team !

I was wondering why we need to click twice on a button within a RadGridView in order to execute his click method ?

In my application i use a RadGridView with the last internal build : 1022
I have an edit button, within the grid, to explicitely switch to edit mode and save/cancel buttons to explicitely commit or cancel.
I have attached a screenshot to show you my grid with the buttons in edit mode or not.

My problem is when a user has finished to edit a row he need to click twice on my save or cancel button... the first time to set the focus on the button's cell the second time to click on the button... How can i change this behavior in order to allow the user to click only one time.

Please tell me if you need more informations, and sorry for my bad english.

Regards,

Joachim.

[Maya]

Hello JOACHIM,

RadGridView provides a set of built-in commands that you can easily use on a button. Following up your scenario, you may take advantage of BeginEdit, CommitEdit, CancelCellEdit or CancelRowEdit commands. For further reference for their implementation, please take a look at our demos.
Let me know if it works for you.

Kind regards,
Maya
the Telerik team

[Joachim]

Hello Maya and thank you for your response.

Unfortunately i can't use the set of built-in commands that RadGridView provides because it's not appropriate in my case.
I need buttons inside the grid and not outside and i need a more explicit edit mode (like this thread : http://www.telerik.com/community/forums/silverlight/gridview/will-commands-work-for-creating-a-more-explicit-edit-mode.aspx)

Let me show you a simple example that illustrate my problem.
I have a RadGridView with a column that contains edit buttons for each row.
When the user click on the edit button the first cell of the row switch into edit mode and a cancel button replace the edit button. The user can't enter into edit mode except by clicking on edit button and can't exit edit mode except by clicking cancel button. When a row is in edit mode, the user can't edit another row.
It's a basic and common way of editing data in a grid but unfortunately it's not include in the RadGridView.

There is my simple code (XAML and Code behind) :

<telerikGridView:RadGridView ItemsSource="{Binding Path=Collection, Source={StaticResource RadGridViewItemSource}}"
                                     AutoGenerateColumns="False" EditTriggers="None" ActionOnLostFocus="None"
                                     RowValidating="rgv_RowValidating" RowEditEnded="rgv_RowEditEnded"
                                     x:Name="rgv">
            <telerikGridView:RadGridView.Columns>
                <telerikGridView:GridViewColumn Header="Action" IsReadOnly="True">
                    <telerikGridView:GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <telerik:RadButton x:Name="editBtn" Click="editBtn_Click"
                                                   Content="Edit" />
                                <telerik:RadButton x:Name="cancelBtn" Click="cancelBtn_Click"
                                                   Content="Cancel" Visibility="Collapsed"/>
                            </StackPanel>
                        </DataTemplate>
                    </telerikGridView:GridViewColumn.CellTemplate>

                </telerikGridView:GridViewColumn>
                <telerikGridView:GridViewDataColumn DataMemberBinding="{Binding MyDecimal1}" />
                <telerikGridView:GridViewDataColumn DataMemberBinding="{Binding MyDecimal2}" />
                <telerikGridView:GridViewDataColumn DataMemberBinding="{Binding MyDecimal3}" />
                <telerikGridView:GridViewDataColumn DataMemberBinding="{Binding MyDecimal4}" />

            </telerikGridView:RadGridView.Columns>
        </telerikGridView:RadGridView>

Code behind :

public partial class MainPage : UserControl
    {
        private GridViewRow _currentRow;
        private RadButton _currentEditBtn;
        private RadButton _currentCancelBtn;
        private bool _isValid = false;

        public MainPage()
        {
            InitializeComponent();
        }

        private void editBtn_Click(object sender, RoutedEventArgs e)
        {
            if (_currentRow == null)
            {
                _currentRow = (sender as UIElement).ParentOfType<GridViewRow>();
                _currentEditBtn = (sender as RadButton);
                _currentCancelBtn = (sender as UIElement).ParentOfType<StackPanel>().FindName("cancelBtn") as RadButton;
                rgv.CurrentItem = _currentRow.Item;
                var cell = _currentRow.GetCellFromPropertyName("MyDecimal1");
                cell.IsCurrent = true;
                rgv.EditTriggers = GridViewEditTriggers.CellClick;
                rgv.BeginEdit();

                _currentCancelBtn.Visibility = System.Windows.Visibility.Visible;
                _currentEditBtn.Visibility = System.Windows.Visibility.Collapsed;
            }
        }

        private void cancelBtn_Click(object sender, RoutedEventArgs e)
        {
            if (_currentRow != null)
            {
                rgv.EditTriggers = GridViewEditTriggers.None;
                rgv.CancelEdit();
            }
        }

        private void rgv_RowValidating(object sender, GridViewRowValidatingEventArgs e)
        {
            if (!_isValid)
            {
                e.IsValid = false;
            }
        }

        private void rgv_RowEditEnded(object sender, GridViewRowEditEndedEventArgs e)
        {
            _currentCancelBtn.Visibility = System.Windows.Visibility.Collapsed;
            _currentEditBtn.Visibility = System.Windows.Visibility.Visible;
            _currentRow = null;
        }
    }

For information there is the code of the business object  :

public class RadGridViewModel
    {
        public decimal MyDecimal1 { get; set; }
        public decimal MyDecimal2 { get; set; }
        public decimal MyDecimal3 { get; set; }
        public decimal MyDecimal4 { get; set; }
    }

    public class RadGridViewItemSource : INotifyPropertyChanged
    {

        public event PropertyChangedEventHandler PropertyChanged;

        private ObservableCollection<RadGridViewModel> _collection;
        public ObservableCollection<RadGridViewModel> Collection
        {
            get { return _collection; }
            set
            {
                if (_collection != value)
                {
                    _collection = value;
                    OnPropertyChanged("Collection");
                }
            }
        }

        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public RadGridViewItemSource()
        {
            List<RadGridViewModel> list = new List<RadGridViewModel>();
            for (decimal i = 0; i < 10; i = i + (decimal)0.1)
            {
                RadGridViewModel item = new RadGridViewModel()
                {
                    MyDecimal1 = i,
                    MyDecimal2 = i + 1,
                    MyDecimal3 = i + 2,
                    MyDecimal4 = i + 3,
                };
                list.Add(item);
            }

            Collection = new ObservableCollection<RadGridViewModel>(list);
        }
    }

If you execute this code you can see that the user need to click twice on the cancel button to execute the cancel method O_o.
The first click put the focus on the cancel button's cell and the second click call the cancelBtn_click method.
My question is simple : Why do i need to click twice on the cancel button ? and what i am doing wrong to get this behavior ?

Thank you for your help.

Joachim.

PS: I have attached screenshots of the example application in read an edit mode of a row

[Joachim]

Please, tell me if you need more information.

But if you copy/paste my code above in a simple project you can easily reproduce the issue with your last internal build (Silverlight_4_2010_2_1022_DEV)

[Maya]

Hi JOACHIM,

We investigate the issue you specified and discovered a minor problem on the case when an item is in edit mode and a button is clicked. However, it has been immediately fixed and it will be available this Friday with our Latest Internal Build. So, using the mentioned updated version, you will be able to click only once on a button when an item is in edit mode - just as it is expected to be.
You may download the Latest Internal Build from your Telerik account.
 

Regards,
Maya
the Telerik team

[Joachim]

Thank you Maya !

It's good to know that you're reactive when your customers are confronted to problems.

Good job,

Joachim.

[luis]

Good Morning,
i 've still the same problem....i have a Hyperlinkbutton so when i clic on it the property  this.radGridView1.SelectedItem is null i've to select the row and then make clic on Hyperlinkbutton for catch value from de radgridview but it take the value tha haves the focus ....i've RadControls_for_Silverlight_4_2010_3_1331_TRIAL_hotfix but its not better...help me please ..best regards from Colombia ....excuse me for my English...thx

[Maya]

Hola Luis,

If you are defining a HyperlinkButton in a CellTemplate of a column, you may handle its Click event and set the corresponding as the selected one:

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
        {
            var hyperlinkButton = sender as HyperlinkButton;
            var row = hyperlinkButton.ParentOfType<GridViewRow>();
            if(row != null)
            {
                row.IsSelected = true;
            }
        }

Thus the SelectedItem will be set and will not return a null value.

 

Kind regards,
Maya
the Telerik team

[luis]

Hi Maya...thanks for reply....i gonna try make things in this way...so later i talk you 'bout this issue..ok...thanks very much again...best regards..

[Atul]

how can I Handle this scenario in MVVM?

Thanks-
Atul Katare