Popup with DataGrid demo improved

radzenhq · Oct 3, 2024 · f0f94eb · f0f94eb
1 parent 7123c9c
commit f0f94eb
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 29 deletions.
diff --git a/Radzen.Blazor/wwwroot/Radzen.Blazor.js b/Radzen.Blazor/wwwroot/Radzen.Blazor.js
@@ -708,7 +708,7 @@ window.Radzen = {
  table.nextSelectedIndex = 1;
  }
 
- if (key == 'ArrowLeft' || key == 'ArrowRight' || (key == 'ArrowUp' && table.nextSelectedIndex == 0 && table.parentNode.scrollTop == 0)) {
+ if (key == 'ArrowLeft' || key == 'ArrowRight' || (key == 'ArrowUp' && cellIndex != null && table.nextSelectedIndex == 0 && table.parentNode.scrollTop == 0)) {
  var highlightedCells = rows[table.nextSelectedIndex].querySelectorAll('.rz-state-focused');
  if (highlightedCells.length) {
  for (var i = 0; i < highlightedCells.length; i++) {

diff --git a/RadzenBlazorDemos/Pages/PopupDataGrid.razor b/RadzenBlazorDemos/Pages/PopupDataGrid.razor
@@ -22,12 +22,12 @@
  </style>
 
 <div class="rz-p-12 rz-text-align-center">
- <RadzenTextBox @ref=textBox Value="@customerId" @oninput=@(args => customerId = value = $"{args.Value}")
+ <RadzenTextBox @ref=textBox Value="@customerId" @oninput=@OnInput
  @onclick="@(args => popup.ToggleAsync(textBox.Element))" @onkeydown=@OnKeyDown />
 </div>
 
-<Popup @ref=popup id="popup" Lazy=true AutoFocusFirstElement="false" class="my-popup">
- <RadzenDataGrid id="grid" TItem="Customer" Data="@customers" RowSelect="@RowSelect" AllowVirtualization="true" AllowSorting="true" Style="height:360px">
+<Popup @ref=popup id="popup" AutoFocusFirstElement="false" class="my-popup">
+ <RadzenDataGrid @ref=grid id="grid" TItem="Customer" Data="@customers" RowSelect="@OnRowSelect" AllowSorting="true" Style="height:360px">
  <Columns>
  <RadzenDataGridColumn Property="CustomerID" Title="CustomerID" />
  <RadzenDataGridColumn Property="CompanyName" Title="CompanyName" />
@@ -44,6 +44,7 @@
  string customerId;
  IEnumerable<Customer> customers;
  Popup popup;
+ RadzenDataGrid<Customer> grid;
 
  protected override async Task OnInitializedAsync()
  {
@@ -57,53 +58,42 @@
  || c.Country.ToLowerInvariant().Contains(value));
  }
 
- async Task RowSelect(Customer customer)
+ async Task OnRowSelect(Customer customer)
  {
  value = "";
  customerId = customer.CustomerID;
  await popup.CloseAsync();
  }
 
- int selectedIndex = -1;
+ async Task OnInput(ChangeEventArgs args)
+ {
+ selectedIndex = 0;
+ customerId = value = $"{args.Value}";
+ await grid.Reload();
+ }
+
+ int selectedIndex = 0;
  async Task OnKeyDown(KeyboardEventArgs args)
  {
  var items = customers;
+ var popupOpened = await JSRuntime.InvokeAsync<bool>("Radzen.popupOpened", "popup");
 
  var key = args.Code != null ? args.Code : args.Key;
 
  if (!args.AltKey && (key == "ArrowDown" || key == "ArrowUp"))
  {
- var newSelectedIndex = Math.Clamp(selectedIndex + (key == "ArrowUp" ? -1 : 1), 0, items.Count() - 1);
- var shouldChange = newSelectedIndex != selectedIndex;
-
- if (shouldChange)
- {
- selectedIndex = newSelectedIndex;
- await JSRuntime.InvokeAsync<int[]>("Radzen.focusTableRow", "grid", key, selectedIndex - 1, null);
- }
-
- var popupOpened = await JSRuntime.InvokeAsync<bool>("Radzen.popupOpened", "popup");
-
- if (shouldChange && !popupOpened)
- {
- customerId = items.ElementAtOrDefault(selectedIndex)?.CustomerID;
- }
+ var result = await JSRuntime.InvokeAsync<int[]>("Radzen.focusTableRow", "grid", key, selectedIndex, null, false);
+ selectedIndex = result.First();
  }
- else if (key == "Enter" || key == "NumpadEnter")
+ else if (args.AltKey && key == "ArrowDown" || key == "Enter" || key == "NumpadEnter")
  {
- var popupOpened = await JSRuntime.InvokeAsync<bool>("Radzen.popupOpened", "popup");
-
- if (popupOpened)
+ if (popupOpened && (key == "Enter" || key == "NumpadEnter"))
  {
  customerId = items.ElementAtOrDefault(selectedIndex)?.CustomerID;
  }
 
  await popup.ToggleAsync(textBox.Element);
  }
- else if (args.AltKey && key == "ArrowDown")
- {
- await popup.ToggleAsync(textBox.Element);
- }
  else if (key == "Escape" || key == "Tab")
  {
  await popup.CloseAsync();