Forums Home / ComponentOne / Blazor Edition
Posted by: soraroid on 17 October 2024, 1:42 am EST
soraroid
Posted 17 October 2024, 1:42 am EST
Hello.
Type your search term in text box, press Enter,
and a list will appear in the grid.
After loading the list,
I want the focus to move to the first row of the grid.
After that, when I move the focus using the arrow keys and press Enter on that row,
I want to get that data value.
Please include the source code.
Thank you.
ankit.kumar
Posted 18 October 2024, 4:51 am EST - Updated 18 October 2024, 4:56 am EST
Hi,
When you press enter on the TextBox, and press Enter, it will trigger “FilterChanged” event and you could use the event to set the focus to the grid and make the selection to the first row.
Further, you could handle the key press on the grid and then use the “SelectedItem” property to get the selected item of the grid. I have created a sample based on your requirement:
<C1TextBox @bind-Text:event="FinishedTextChange" @bind-Text="filterString" Placeholder="Search Text" Style="@("margin:8px 0")" />
<p style="color:#3F51B5">@selectionText</p>
<div id="gridContainer">
<FlexGrid @ref="grid" ItemsSource="dataSource" Style="@("height: 500px; width: 600px;")">
<FlexGridBehaviors>
<FullTextFilterBehavior FilterString="@filterString" HighlightStyle="@("color:#3E65FF")" TreatSpacesAsAndOperator="true" />
</FlexGridBehaviors>
</FlexGrid>
</div>
@code {
WeatherForecast[] forecasts;
string filterString;
string selectionText;
FlexGrid? grid;
C1DataCollection<WeatherForecast> dataSource;
private void OnFilterChanged(object sender, object args)
{
// Focus the Grid
grid.Focus();
// Make the Selection as First Cell Of the Grid
grid.Selection = new GridCellRange(0, 0);
// Make the First Cell in the Grid Focused
grid.StartEditing(0, 0);
grid.FinishEditing();
}
protected override void OnAfterRender(bool firstRender)
{
base.OnAfterRender(firstRender);
if (firstRender)
{
dataSource.FilterChanged += OnFilterChanged;
var dotNetReference = DotNetObjectReference.Create(this);
this.JsRuntime.InvokeVoidAsync("AddHandlers", dotNetReference);
}
}
protected override async Task OnInitializedAsync()
{
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
dataSource = new C1DataCollection<WeatherForecast>(forecasts);
}
[JSInvokable("EnterKeyHandler")]
public void KeyHandler()
{
// Apply Only when the Grid Is Not In Edit Mode
if (grid.ActiveEditor == null)
{
WeatherForecast item = (WeatherForecast)grid.SelectedItem;
selectionText = "Date: " + item.Date.ToString() + " , Summary: " + item.Summary;
StateHasChanged();
}
}
}References:
FilterChanged Event: https://developer.mescius.com/componentone/docs/blazor/online-blazor/C1.DataCollection~C1.DataCollection.C1DataCollection`1~FilterChanged_EV.html
SelectedItem Property: https://developer.mescius.com/componentone/docs/blazor/online-blazor/C1.Blazor.Grid~C1.Blazor.Grid.FlexGrid~SelectedItemProperty.html
Let me know if you face any issues.
Regards,
Ankit
soraroid
Posted 21 October 2024, 4:13 am EST
In our program, the grid is in a read-only state.
I also set the source you provided to read-only, but it does not work at once,
and you have to move the arrow key once to move the focus.
( Edit : <FlexGrid @ref=“grid” ItemsSource=“dataSource” Style="@(“height: 500px; width: 600px;”) IsReadOnly=“true”> )
I hope it works the same regardless of the read-only option.
Thank you.
ankit.kumar
Posted 21 October 2024, 7:04 am EST
Hi,
Use the “Selection” and the “SetCursor” API to make the selection to the first cell of the grid. You could use the following code snippet for “OnFilterChanged”.
It also works when the grid is read-only.
private void OnFilterChanged(object sender, object args)
{
if(grid == null)
{
return;
}
// Focus the Grid
grid.FocusAsync();
// Make the Selection as First Cell Of the Grid
grid.Selection = new GridCellRange(0, 0);
grid.SetCursor(0, 0);
}I have also attached the modified sample. Let me know if you face any issues.
References:
setCursor method: https://developer.mescius.com/componentone/docs/blazor/online-blazor/C1.Blazor.Grid~C1.Blazor.Grid.FlexGrid~SetCursor(Int32,Int32).html
Selection Property: https://developer.mescius.com/componentone/docs/blazor/online-blazor/C1.Blazor.Grid~C1.Blazor.Grid.FlexGrid~Selection.html
Regards,
Ankit
soraroid
Posted 22 October 2024, 2:41 am EST
I made some modifications to the source you provided.
When you press the button on the counter page, the grid is visible and the focus goes to the grid.
But when I press the button again, the focus doesn’t move to the grid, so I can’t move the focus.
Please correct it.
Thank you.
ankit.kumar
Posted 22 October 2024, 6:51 am EST - Updated 22 October 2024, 6:56 am EST
Hi,
The issue is related to your implementation. Based on your implementation, you are setting the focus on the grid and setting the selection in the “OnAfterRender()” method.
The “OnAfterRender()” method is called only once when the “Test” Component is visible once when you first click the button. After subsequent button clicks, the “OnAfterRender()” method won’t be called, and therefore, the grid won’t be in focus anymore.
If you want to focus on the grid, on every time the button clicks, you could use pass notify the Test Component by passing a parameter and checking if the parameter is changed (i.e, if the button is click), make the focus back to the grid.
Refer to the modified sample and the below gif.
Regards,
Ankit
