UX improvements and code siplification

Author: vl-albedo

CS/GridCustomShortcuts/Components/Layout/NavMenu.razor

@@ -2,8 +2,6 @@
  <DxMenu Orientation="@Orientation.Vertical" CssClass="menu">
  <Items>
  <DxMenuItem NavigateUrl="/" Text="Home" CssClass="menu-item" IconCssClass="icon home-icon"></DxMenuItem>
- <DxMenuItem NavigateUrl="/counter" Text="Counter" CssClass="menu-item" IconCssClass="icon counter-icon"></DxMenuItem>
- <DxMenuItem NavigateUrl="/weather" Text="Weather" CssClass="menu-item" IconCssClass="icon weather-icon"></DxMenuItem> 
  </Items>
  </DxMenu>
 </div>

CS/GridCustomShortcuts/Components/Pages/Counter.razor

@@ -6,20 +6,22 @@
 @inject WeatherForecastService ForecastService
 @implements IAsyncDisposable
 
+<PageTitle>Blazor Grid Keyboard Shortcuts</PageTitle>
+<h1>Weather Forecast</h1>
+
 @if (forecasts == null)
 {
  <p><em>Loading...</em></p>
 }
 else
 {
  <div @ref="gridWrapper">
- <DxGrid @ref="grid" Data="@forecasts" 
- FocusedRowEnabled="true" 
- EditMode="GridEditMode.EditCell" 
- EditModelSaving="OnEditModelSaving"
- CssClass="mw-1100" ValidationEnabled=false>
+ <DxGrid @ref="grid" Data="@forecasts"
+ FocusedRowEnabled="true"
+ EditModelSaving="OnEditModelSaving"
+ CssClass="mw-1100">
  <Columns>
- <DxGridSelectionColumn />
+ <DxGridSelectionColumn Width="70px" />
  <DxGridDataColumn Caption="Date" FieldName="Date" />
  <DxGridDataColumn Caption="Temperature (C)" FieldName="TemperatureC" />
  <DxGridDataColumn Caption="Temperature (F)" FieldName="TemperatureF" />
@@ -28,18 +30,18 @@ else
  </DxGrid>
  </div>
 
-
- <DxPopup HeaderText="Forecast Entry"
- @bind-Visible="@popupVisible"
- BodyText="@("Viewing forecast for " + currentDate)">
+ <DxPopup HeaderText="@($"Weather Forecast for {selectedForecast?.Date:m}")"
+  @bind-Visible="@popupVisible">
+  <p><b>Temperature:</b> @selectedForecast?.TemperatureC °C</p>
+  <p><b>Summary:</b> @selectedForecast?.Summary</p>
  </DxPopup>
 }
 
 @code {
  private WeatherForecast[]? forecasts;
  private bool popupVisible;
  private ElementReference gridWrapper;
- private DateOnly currentDate;
+ private WeatherForecast? selectedForecast;
  private IGrid grid;
  private IJSObjectReference? module;
  private DotNetObjectReference<Index>? dotNetHelper;
@@ -51,7 +53,7 @@ else
  if (focusedItem == null)
  return;
  await grid.SaveChangesAsync();
- currentDate = focusedItem.Date;
+ selectedForecast = focusedItem;
  popupVisible = true;
  StateHasChanged();
  }

CS/GridCustomShortcuts/Components/Pages/Counter.razor.css

@@ -1,4 +1,4 @@
 {
- "autoGenerateVb": true,
+ "autoGenerateVb": false,
  "runOnWeb": false
 }