Forums Home / ComponentOne / ComponentOne Studio for Xamarin
Posted by: jared.fritsch on 28 December 2017, 8:37 am EST
jared.fritsch
Posted 28 December 2017, 8:37 am EST
In UWP, with the C1FlexGrid, is there a way to click the tab key on a keyboard to move to the next cell and then once we have reached the last column, move to the next row? I would like to be able to edit Column 1, click tab, and have it move to Column 2 with edit mode already open so I can begin typing right away. I want to edit an entire grid without having to use my mouse.
sonu.singh
Posted 28 December 2017, 5:16 pm EST
Hi,
Please try to use below code for achieving your requirement.
bool istabKeyPressed = false;
private void C1FlexGrid_Loaded(object sender, RoutedEventArgs e)
{
c1FlexGrid.KeyActionTab = C1.Xaml.FlexGrid.KeyAction.MoveAcross;
c1FlexGrid.SelectionChanged += C1FlexGrid_SelectionChanged;
c1FlexGrid.PrepareCellForEdit += C1FlexGrid_PrepareCellForEdit;
}
private void C1FlexGrid_PrepareCellForEdit(object sender, C1.Xaml.FlexGrid.CellEditEventArgs e)
{
istabKeyPressed = false;
c1FlexGrid.ActiveEditor.KeyDown += ActiveEditor_KeyDown;
}
private void ActiveEditor_KeyDown(object sender, KeyRoutedEventArgs e)
{
if (e.Key == Windows.System.VirtualKey.Tab)
{
istabKeyPressed = true;
}
}
private void C1FlexGrid_SelectionChanged(object sender, C1.Xaml.FlexGrid.CellRangeEventArgs e)
{
if (istabKeyPressed)
{
c1FlexGrid.StartEditing(false);
}
}
Hope, it will help you.
Note: You can modify the code above based on your requirement as well.
Thanks,
Singh
jared.fritsch
Posted 29 December 2017, 12:48 am EST
Singh, thank you for the response. Is your code for the Xamarin API? Correct me if I’m wrong, but some of that code doesn’t appear to be, for example: “.KeyActionTab” and “.ActiveEditor.KeyDown”.
abdias.michael
Posted 2 January 2018, 8:31 pm EST
Hi Jared,
The code that Sonu had provided is indeed for UWP since it wasn’t clear from your query if it’s for Xamarin.Forms or UWP.
I couldn’t find a way to detect Tab key press on FlexGrid and navigate through the grid. The cell can be put in edit mode as soon as a cell is selected by handling its SelectionChanged event.
private void Grid_SelectionChanged(object sender, C1.Xamarin.Forms.Grid.GridCellRangeEventArgs e)
{
grid.StartEditing(e.CellRange.Row, e.CellRange.Column);
}
However, couldn’t get the Tab key press. Let me discuss this with the concerned team and get back to you. Tracking Id - 303515
jared.fritsch
Posted 3 January 2018, 1:26 am EST
Thanks for the reply, Michael. Sorry for not mentioning Xamarin.Forms specifically. I will make sure to do that from now on.
Being able to tab through a grid is a very important requirement of ours. I know iOS and Android don’t really have “tab” buttons. You usually see the text of the return key changed to something like “Next” and I know even that gets difficult because some custom keyboards don’t support text on that key.
However, Xamarin.Forms does support tabbing through focus-able controls in UWP. This isn’t a property that is set by a developer in code (such as .KeyActionTab). It is just something that happens. Clicking tab takes you to the next logical, focus-able control.
Thanks for looking into it. Is there a way that I could follow that tracking ID you posted?
abdias.michael
Posted 3 January 2018, 3:42 pm EST
Hi Jared,
The tracking id is for our internal tracking and you won’t be able to access it. I’m keeping a track of it for you and will let you as soon as there is any update on it. You can always ask for an update here on the forums itself.
jared.fritsch
Posted 11 January 2018, 1:52 am EST
Any update on this one?
abdias.michael
Posted 14 January 2018, 10:47 pm EST
Hi Jared,
I have asked for an update from the concerned team looking into this issue and will get back to you soon. Kindly allow me a day or two.
jared.fritsch
Posted 22 January 2018, 1:20 am EST
Michael - were you able to get an update?
abdias.michael
Posted 22 January 2018, 5:15 pm EST
Hi Jared,
Yes, I do have an update for you. Currently, there is no direct way to implement the functionality you’re looking for. But as a workaround for this, you can implement a custom renderer for UWP where you can listen to the KeyDown event and implement the behavior you want (which would look very similar to the code provided earlier in the forum thread).
Our development team is looking for potential solutions to make this easier in the future however, there is no fixed timeline for it as it may require a lot of work.
jared.fritsch
Posted 23 January 2018, 3:31 am EST
Thanks for following up. Could I possibly get a code example on how to create a custom renderer for the FlexGrid? It’s not immediately clear to me as some of the inherited methods I’m used to working with in custom renderers are sealed in the FlexGridRenderer.
This is what I have so far. Not sure if I am doing this correctly. With this code, I am so far able to get any key that was pressed except for the tab key. For some reason when I click tab, the KeyDown event is never triggered.
protected override void InitializeNativeElement()
{
base.InitializeNativeElement();
this.NElement.KeyDown += Control_KeyDown;
}
private void Control_KeyDown(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
{
if (e.Key == Windows.System.VirtualKey.Tab)
{
}
}
abdias.michael
Posted 4 February 2018, 10:51 pm EST
Even I couldn’t get the KeyDown to fire on Tab key press in a custom renderer. I’ve re-escalated the issue to our PM for a better approach or to find out if anything is missing. Sorry for the delay in getting back to you.
jared.fritsch
Posted 5 February 2018, 1:38 am EST
Thank you for the follow up. Let me know what you find.
kelley.ricker
Posted 5 February 2018, 2:21 am EST
I think you need to use the PreviewKeyDown event for this rather than KeyDown now that I’ve looked into it more. I think there’s something that prevents keycapture for certain keys through the KeyDown, though you can handle them through PreviewKeyDown just fine. Here’s the code that roughly works for me with Cell based selection:
private void NElement_PreviewKeyDown(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
{
if (e.Key == Windows.System.VirtualKey.Tab)
{
GridCellRange CurrentRange = ((GridBase)sender).Selection;
if (CurrentRange.Column == 8)
{
((GridBase)sender).Select(new GridCellRange(CurrentRange.Row + 1, 0), true);
}
else
{
((GridBase)sender).Select(new GridCellRange(CurrentRange.Row, CurrentRange.Column + 1), true);
}
e.Handled = true;
}
}
A couple notes:
I’m not sure that there’s an easy way to get the Column count from the CustomRenderer since it isn’t a part of the GridBase (which is why I’ve hardcoded the value 8 here). I’ll have to research this more… perhaps there is a way to pass the value from the FlexGrid control at the Xamarin level.
We’re aware that this approach is not the easiest and we’d like to improve the functionality here in the future. We’re researching a couple of different solutions for the future. One could be the addition of a property that directly controls the Excel like cycling behavior you’re asking for. The second one would be a more generic type of keydown event that could work across platforms through Xamarin.Forms (though we’d need to do a lot of planning, work, and testing for something like this). Neither of these would be an immediate thing, but we are taking them into account as we wrap up our current release and start looking forward.
Thanks
Kelley
jared.fritsch
Posted 5 February 2018, 7:29 am EST
Thanks for the response, Kelley! That solution does look promising. However, it looks like PreviewKeyDown is a Windows 10 Fall Creators Update (10.0; Build 16299) API. That might not work for us at this time. You wouldn’t happen to have any other workarounds, would you?
I appreciate you looking into adding this sort of functionality. I understand that things get quite tricky when having to accommodate multiple platforms, especially mobile devices.
kelley.ricker
Posted 5 February 2018, 10:31 am EST
I’ll have to do some more research, but I’ll let you know. Maybe I can get it to work with the Editor along the lines of what Sonu proposed.
Kelley
kelley.ricker
Posted 7 December 2018, 1:50 am EST
As an update to this thread generally, you can use the KeyActionTab property of the FlexGrid to get Excel like tab cycling. This property should be available in all build post 2018v2:
Simply set this property to Cycle as follows:
grid.KeyActionTab = GridTabAction.Cycle;
