Insert new item on last column tab click

[Saykor]

Hi All,
Can you please see this video: https://www.youtube.com/watch?v=UtJ85t8URUU

I move to next column with tab. Currently when I am on the last column and click tab the cursor go to next row first editable column.
How can go do a grid.BeginInsert() and go there to add a new item and not to go on edit row in next line. We need this only when tab is clicked from the last column.

Regards

[Vanya Pavlova]

Hi Dimitar,


Thank you for contacting us.

You could handle KeyDown event of RadGridView and implement desired logic, as proposed below:

private void radGridView_KeyDown(object sender, KeyEventArgs e)
{
    if (e.Key == Key.Tab)
    {
        var grid = sender as RadGridView;
        Item currentItem = grid.CurrentItem as Item;
        if ((currentItem != null))
        {
            grid.BeginInsert();
            grid.CurrentColumn = grid.Columns[0];
        }
        else
        {
            e.Handled = true;
        }
    }
}

Will you please give it a try and let me know how this corresponds to your needs?


Regards,
Vanya Pavlova
Telerik

 

 

[Saykor]

Hi Vanya,
Thank you for your answer but it is not so easy. I already try KeyDown event for the grid and last column itself. The event for grid fire ( for the column not ) but never enter in case if (e.Key == Key.Tab). Except if this is last column on the last row. I need last column for inserted row to do:
   grid.BeginInsert();            
   grid.CurrentColumn = grid.Columns[0];
This mean when user start to insert a data when he add value on the last column and click tab to start new insert automatically.

If I use KeyUp event it works incorrectly. When user enter value on the penultimate column and click tab then the event is fired and not allow user to enter a value on the last column because start a new insert.

private void GrdCount_OnKeyUp(object sender, KeyEventArgs e)
        {
            if (e.Key == Key.Tab)
            {
                var grid = sender as RadGridView;
                var currentItem = grid.CurrentItem as StudentModel;
                if ((currentItem != null))
                {
                    if (grid.CurrentColumn.DisplayIndex == grid.Columns.Count - 1)
                    {
                        grid.BeginInsert();
                        grid.CurrentColumn = grid.Columns[0];
                    }
                }
                else
                {
                    e.Handled = true;
                }
            }
        }

<telerik:RadGridView.Columns>
                                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Id}" Header="Id" Width="Auto" IsVisible="False"/>
                                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Index}" IsReadOnly="True" />
                                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Calendars}" Header="Calendars" />
                                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Cards}" Header="Cards" />
                                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Diaries}" Header="Diaries" />
                                    <telerik:GridViewDataColumn DataMemberBinding="{Binding Notepads}" Header="Kids Notepads" />
                                </telerik:RadGridView.Columns>

[Dimitrina]

Hello,

RadGridView actually handles the Tab key internally and it performs its own navigation logic for it. In case you want to predefine it, you can create one of your own by developing a custom keyboard command provider. Please refer to our online documentation for a reference.

As a side note, you can also check this GitHub example on CustomKeyboardCommandProvider. It demonstrates how to predefine the default KeyboardProvider. Although GitHub is a very well-known platform we saw a better and easier approach for reviewing our examples developing our SDK Samples Browser. You can also use it to review the examples.

Would you please try overriding the way the Tab key is handled and let me know the result?

Regards,
Didie
Telerik

 

 

[Saykor]

Hi Didie,
Seems this is the right direction but I can't find the right sequence of commands. Please see the video: http://youtu.be/FE_Q8bhJKBE

you will see how row with index 23 disappear and we have 2 inserted rows.

public class KeyboardCommandProvider : DefaultKeyboardCommandProvider
    {
        private readonly GridViewDataControl _parentGrid;

        public KeyboardCommandProvider(GridViewDataControl grid)
            : base(grid)
        {
            _parentGrid = grid;
        }

        public override IEnumerable<ICommand> ProvideCommandsForKey(Key key)
        {
            var commandsToExecute = base.ProvideCommandsForKey(key).ToList();
            if (key == Key.Tab && _parentGrid.CurrentColumn.DisplayIndex == _parentGrid.Columns.Count - 1)
            {
                commandsToExecute.Clear();

                commandsToExecute.Add(RadGridViewCommands.CommitEdit);
                //commandsToExecute.Add(RadGridViewCommands.MoveFirst);
                commandsToExecute.Add(RadGridViewCommands.BeginInsert);
            }

            return commandsToExecute;
        }
    }

If I uncomment commandsToExecute.Add(RadGridViewCommands.MoveFirst); this works only from editing of existing row to start a new. But when start a new insert on the last column tab not start new insert.

Please advise.

[Boris]

Hello Saykor,

In order to be able to commit the data from the newly added row and then insert another new row, you will need to invoke the CommitNew() method of the Items collection of the parent grid.

public override IEnumerable<ICommand> ProvideCommandsForKey(Key key)
        {
            List<ICommand> commandsToExecute = base.ProvideCommandsForKey(key).ToList();
            if (key == Key.Tab && (parentGrid.CurrentColumn.DisplayIndex == parentGrid.Columns.Count - 1))
            {
                commandsToExecute.Clear();
                parentGrid.Items.CommitNew();
                commandsToExecute.Add(RadGridViewCommands.CommitEdit);
                commandsToExecute.Add(RadGridViewCommands.BeginInsert);
            }

            return commandsToExecute;
        }

I attached a sample project that demonstrates the suggested approach.

I hope this helps.

Regards,
Boris Penev
Telerik

 

 

[Saykor]

Dear Boris,
Thank you for the example. I download it and works good as you build.
But seems we have a bug in the control. Can you please add NewRowPosition="Top" in the grid to see what is happen? If the add new row line is not on the screen all is working as expected. If is show we have same behavior like in my video above.

In my project i work with older version of your controls so i not have property NewRowPosition="Top". I use  ShowInsertRow="True". When remove it all is ok but then add new row line is not showing anymore.

Best regards,
Saykor

[Boris]

Hi Saykor,

The described behavior is expected and not considered a bug. In general the NewRowPosition property of RadGridView can be set to three enum values: 

1. None - Do not display the new row (the default).
2. Top - Display the new row on top.
3. Bottom - Display the new row after the last standard row. Please note that this mode is supported only when GroupRenderMode is Flat.

Behind each of these values RadGridView uses different mechanisms for displaying / not displaying the new row position. Thus you cannot expect the new row to behave the same way for the three different enum values. In addition, I am not entirely sure why you need to use the NewRowPosition="Top", when you have a different logic for inserting rows.

I hope this clarifies the behavior of the NewRowPosition property.

Regards,
Boris Penev
Telerik

 

 

[Saykor]

Hi Boris,
I not ask you to explain me the behavior of NewRowPosition property

The position of this button "Click here to add new item" is not suppose to break the inserted items. When it is show on top or bottom all values of the new inserted item is cleared. When it do not exist the inserted items works normally. So what is the purposes of this button when he is visible we cannot insert a new items ?

The command sequence that you give me above:
commandsToExecute.Clear();                
parentGrid.Items.CommitNew();                
commandsToExecute.Add(RadGridViewCommands.CommitEdit);                
commandsToExecute.Add(RadGridViewCommands.BeginInsert);

Works well when the insert button is not visible and not work at all when it is visible. When it is visible and I click "Enter" the new insert items is ok. So the problem is in the command sequence or in the insert button.

If I remove parentGrid.Items.CommitNew(); from the commands and "Click here to add new item" is visible the new item is inserted but not automatically open a new line for new insert.

Only difference that I do is to remove "Click here to add new item" and place normal button out of the grid to do grid.BeginInsert() because your grid with default insert button not works. And you tell me something that not work is expected?

Please see this video and tell me again how it is expected behavior: http://youtu.be/JP5Bray4pq4

Sequence of test:
1. click Add new item button
2. type: qwe 123, click tab
3. qwer 1234 tab
4. qwer 12345 enter
5. restart program, add NewRowPosition="top"
6. click on grid button and type: qwe 123 tab - the new inserted row is empty.
7. wer 234 tab
8. ert 345 enter - hop we have a new unexpected behavior - first new item have value 345, new inserted have name "ert" with value 0
9. asdf 1111 enter - it is ok now
10. asddd 4342 tab - again clear item
11. and last test go out of the screen but it is clear item even I start BeginInsert from my button.

The only one expected behavior need to have here if all works. Step 2, 3 and 4 in case of "Click here to add new item" is visible or not.

For now I use external button in my program that work well. But the question is still open and the strange behavior need to be investigate and fix by your team.

[Saykor]

Forget to add the test project: https://mega.co.nz/#!59QXgRKD!Nx7a9TdHMBsrTWsHLFNke0-_i6lFVsk8ief2BHTJxHU

Regards,
Saykor

[Boris]

Hi Saykor,

In general it is not recommended to mix the custom logic from the KeyboardCommandProvider and the logic provided by the NewRowPosition="Top" property. Because there is no way to know which will execute first. That is why we are observing the behavior from your screen-casts.

In order to fulfill your requirement, you can use the RowEditEnded event and a Dispatcher with a DispatcherPriority set to Background in the following way:

private void clubsGrid_RowEditEnded(object sender, GridViewRowEditEndedEventArgs e)
        {
            RadGridView grid = sender as RadGridView;

            if (e.EditAction != GridViewEditAction.Cancel)
            {
                if (grid.SelectedItem == e.Row.Item && grid.Items.IndexOf(e.Row.Item) == (grid.Items.Count - 1))
                {
                    grid.BeginInsert();
                }

                if (e.EditOperationType == GridViewEditOperationType.Insert)
                {
                    grid.CommitEdit();
                    Dispatcher.BeginInvoke(new Action(() =>
                    {
                        grid.BeginInsert();
                    }), DispatcherPriority.Background);
                }
            }
        }

I attached an updated version of the provided project, demonstrating the suggested approach.

I hope this helps.

Regards,
Boris Penev
Telerik

 

 

[Saykor]

Hi Boris,
This is very good answer but have one little problem.
How I can stop to insert new items? :)

When I start to add new item and click enter grid fire RowEditEnded event and start new insert. If I click with my mouse on other row same thing is happen.

Regards,
Dimitar

[Boris]

Hello Saykor,

In order to stop the insertion of a new item, when you edit the last cell of an already existing row, you can just comment out the first inner if statement from the code snippet from my previous reply. In addition, the easiest way to cancel the editing is to press the Escape key twice. 

I hope this helps.

Regards,
Boris Penev
Telerik