starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-07-08 18:16:08 +00:00
Code Issues 1.3k Packages Projects Releases 28 Wiki Activity

Rename ribbon tabs to toolsets in public API

Browse Source 
The spreadsheet has two distinct sets of tab-like UI: the toolbar at the
top (groupings of tools) and the sheet strip at the bottom (worksheet
picker). The public API mixed both as 'Tab'. Settle terms:

- toolbar (singular) — the whole top strip; ShowToolbar already owned this
- toolset — one named section of tools inside the toolbar (was 'tab')
- sheet tab — the bottom worksheet picker; ShowSheetTabs unchanged

Renames:
- SelectedTabIndex/-Changed → SelectedToolsetIndex/-Changed
- TableDesignTab component → TableDesignToolset (file + usages)
- Doc comments and demo description that said 'ribbon' now say 'toolbar'
  (the term 'ribbon' is reserved for a future RadzenRibbon component)
This commit is contained in:
Atanas Korchev
2026-05-19 18:29:29 +03:00
committed by Vladimir Enchev
parent b175b4c0c0
commit d4498a6bfa
8 changed files with 34 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
Radzen.Blazor.Tests/SpreadsheetTests.cs
View File

@@ -50,12 +50,12 @@ public class SpreadsheetTests
}
[Fact]
public void Spreadsheet_Defaults_RenderRibbonFormulaBarAndSheetTabs()
public void Spreadsheet_Defaults_RenderToolbarFormulaBarAndSheetTabs()
{
using var ctx = CreateContext();
var c = ctx.RenderComponent<RadzenSpreadsheet>(p => p.Add(x => x.Workbook, NewWorkbook()));
Assert.Contains("rz-tabview", c.Markup); // ribbon
Assert.Contains("rz-tabview", c.Markup); // toolbar
Assert.Contains("rz-spreadsheet-formula-editor", c.Markup); // formula bar
Assert.Contains("rz-spreadsheet-sheet-tabs", c.Markup); // sheet strip
}
@@ -63,7 +63,7 @@ public class SpreadsheetTests
// ── ShowToolbar / ShowFormulaBar / ShowSheetTabs ────────────────────
[Fact]
public void ShowToolbar_False_HidesRibbonTabLabels()
public void ShowToolbar_False_HidesToolbarToolsetLabels()
{
using var ctx = CreateContext();
var c = ctx.RenderComponent<RadzenSpreadsheet>(p =>
@@ -72,7 +72,7 @@ public class SpreadsheetTests
p.Add(x => x.ShowToolbar, false);
});
// Every ribbon tab label is gone; the bottom sheet-tabs strip stays.
// Every toolset label is gone; the bottom sheet-tabs strip stays.
var home = RadzenStrings.ResourceManager.GetString(nameof(RadzenStrings.Spreadsheet_HomeTab))!;
var insert = RadzenStrings.ResourceManager.GetString(nameof(RadzenStrings.Spreadsheet_InsertTab))!;
Assert.DoesNotContain(home, c.Markup);
@@ -105,10 +105,10 @@ public class SpreadsheetTests
Assert.DoesNotContain("rz-spreadsheet-sheet-tabs", c.Markup);
}
// ── ChildContent (custom ribbon) ────────────────────────────────────
// ── ChildContent (custom toolbar) ──
[Fact]
public void ChildContent_Replaces_DefaultRibbonTabs()
public void ChildContent_Replaces_DefaultToolsets()
{
using var ctx = CreateContext();
var c = ctx.RenderComponent<RadzenSpreadsheet>(p =>
@@ -117,7 +117,7 @@ public class SpreadsheetTests
p.AddChildContent("<RadzenTabsItem Text=\"My Tab\"><div>my tools</div></RadzenTabsItem>");
});
// Default labels are gone, the supplied tab is rendered, the ribbon shell stays.
// Default labels are gone, the supplied toolset is rendered, the toolbar shell stays.
var home = RadzenStrings.ResourceManager.GetString(nameof(RadzenStrings.Spreadsheet_HomeTab))!;
Assert.DoesNotContain(home, c.Markup);
Assert.Contains("My Tab", c.Markup);
@@ -125,10 +125,10 @@ public class SpreadsheetTests
}
[Fact]
public void ChildContent_DoesNotInclude_TableDesignTab_AutomaticallyInsideTable()
public void ChildContent_DoesNotInclude_TableDesignToolset_AutomaticallyInsideTable()
{
// ChildContent fully replaces the toolbar — the host does NOT inject the
// Table Design tab. Users add the TableDesignTab component themselves to opt in.
// Table Design tab. Users add the TableDesignToolset component themselves to opt in.
using var ctx = CreateContext();
var wb = NewWorkbook();
var sheet = wb.Sheets[0];
@@ -147,7 +147,7 @@ public class SpreadsheetTests
}
[Fact]
public void TableDesignTab_InChildContent_ShowsWhenCellInsideTable()
public void TableDesignToolset_InChildContent_ShowsWhenCellInsideTable()
{
using var ctx = CreateContext();
var wb = NewWorkbook();
@@ -158,7 +158,7 @@ public class SpreadsheetTests
var c = ctx.RenderComponent<RadzenSpreadsheet>(p =>
{
p.Add(x => x.Workbook, wb);
p.AddChildContent<Radzen.Blazor.Spreadsheet.Tools.TableDesignTab>(tab =>
p.AddChildContent<Radzen.Blazor.Spreadsheet.Tools.TableDesignToolset>(tab =>
tab.Add(t => t.Worksheet, sheet));
});
@@ -167,7 +167,7 @@ public class SpreadsheetTests
}
[Fact]
public void TableDesignTab_InChildContent_HiddenWhenCellOutsideTable()
public void TableDesignToolset_InChildContent_HiddenWhenCellOutsideTable()
{
using var ctx = CreateContext();
var wb = NewWorkbook();
@@ -178,7 +178,7 @@ public class SpreadsheetTests
var c = ctx.RenderComponent<RadzenSpreadsheet>(p =>
{
p.Add(x => x.Workbook, wb);
p.AddChildContent<Radzen.Blazor.Spreadsheet.Tools.TableDesignTab>(tab =>
p.AddChildContent<Radzen.Blazor.Spreadsheet.Tools.TableDesignToolset>(tab =>
tab.Add(t => t.Worksheet, sheet));
});

4
Radzen.Blazor/RadzenSpreadsheet.razor
View File

@@ -15,7 +15,7 @@
<CascadingValue Value=@ActiveView?.Commands TValue="UndoRedoStack">
@if (ShowToolbar)
{
<RadzenTabs SelectedIndex=@SelectedTabIndex SelectedIndexChanged=@SelectedTabIndexChanged>
<RadzenTabs SelectedIndex=@SelectedToolsetIndex SelectedIndexChanged=@SelectedToolsetIndexChanged>
<Tabs>
@if (ChildContent != null)
{
@@ -108,7 +108,7 @@
<DataValidation/>
</RadzenStack>
</RadzenTabsItem>
<TableDesignTab/>
<TableDesignToolset />
}
</Tabs>
</RadzenTabs>

25
Radzen.Blazor/RadzenSpreadsheet.razor.cs
View File

@@ -63,7 +63,7 @@ public interface ISpreadsheet
/// <summary>
/// Returns <c>true</c> when the given feature is enabled on the host
/// <see cref="RadzenSpreadsheet"/>. Tools should use this to decide whether
/// they should appear disabled in the ribbon.
/// they should appear disabled.
/// </summary>
/// <param name="feature">The feature to check.</param>
bool IsFeatureAllowed(SpreadsheetFeature feature);
@@ -128,17 +128,18 @@ public partial class RadzenSpreadsheet : RadzenComponent, IAsyncDisposable, ISpr
public Dictionary<string, Spreadsheet.SpreadsheetCellType>? CellTypes { get; set; }
/// <summary>
/// The index of the active ribbon tab. Defaults to <c>1</c> so the Home tab is
/// shown first. Supports two-way binding via <c>@bind-SelectedTabIndex</c>.
/// The index of the active toolset in the toolbar. Defaults to <c>1</c> so the
/// Home toolset is shown first. Supports two-way binding via
/// <c>@bind-SelectedToolsetIndex</c>.
/// </summary>
[Parameter]
public int SelectedTabIndex { get; set; } = 1;
public int SelectedToolsetIndex { get; set; } = 1;
/// <summary>
/// Fired when the active ribbon tab changes. Used by <c>@bind-SelectedTabIndex</c>.
/// Fired when the active toolset changes. Used by <c>@bind-SelectedToolsetIndex</c>.
/// </summary>
[Parameter]
public EventCallback<int> SelectedTabIndexChanged { get; set; }
public EventCallback<int> SelectedToolsetIndexChanged { get; set; }
/// <summary>
/// When <c>true</c>, the spreadsheet rejects every command that mutates the
@@ -149,14 +150,14 @@ public partial class RadzenSpreadsheet : RadzenComponent, IAsyncDisposable, ISpr
public bool ReadOnly { get; set; }
/// <summary>
/// When <c>true</c> (the default) the ribbon toolbar is rendered above the grid.
/// When <c>true</c> (the default) the toolbar is rendered above the grid.
/// Set to <c>false</c> for kiosk or view-only embeds.
/// </summary>
[Parameter]
public bool ShowToolbar { get; set; } = true;
/// <summary>
/// When <c>true</c> (the default) the formula bar is rendered between the ribbon
/// When <c>true</c> (the default) the formula bar is rendered between the toolbar
/// and the grid.
/// </summary>
[Parameter]
@@ -223,11 +224,11 @@ public partial class RadzenSpreadsheet : RadzenComponent, IAsyncDisposable, ISpr
public EventCallback<SpreadsheetCommandEventArgs> CommandExecuting { get; set; }
/// <summary>
/// Replaces the built-in ribbon tabs. When set, the supplied content sits inside the
/// ribbon's <see cref="RadzenTabs.Tabs"/> slot — each child should be a
/// Replaces the built-in toolsets. When set, the supplied content sits inside the
/// toolbar's <see cref="RadzenTabs.Tabs"/> slot — each child should be a
/// <see cref="RadzenTabsItem"/>. Add
/// <see cref="Radzen.Blazor.Spreadsheet.Tools.TableDesignTab"/> to keep the contextual
/// "Table Design" tab.
/// <see cref="Radzen.Blazor.Spreadsheet.Tools.TableDesignToolset"/> to keep the
/// contextual "Table Design" toolset.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }

0
Radzen.Blazor/Spreadsheet/Tools/TableDesignTab.razor → Radzen.Blazor/Spreadsheet/Tools/TableDesignToolset.razor
View File

2
RadzenBlazorDemos/Pages/SpreadsheetCustomToolbarCommand.razor
View File

@@ -2,7 +2,7 @@
@using Radzen.Blazor.Spreadsheet.Tools
@using Radzen.Documents.Spreadsheet
<RadzenSpreadsheet Workbook=@workbook SelectedTabIndex="0" style="height: 500px">
<RadzenSpreadsheet Workbook=@workbook SelectedToolsetIndex="0" style="height: 500px">
<RadzenTabsItem Text="Review">
<RadzenStack Orientation="Orientation.Horizontal" Gap="0.125rem" AlignItems="AlignItems.Center">
<Undo />

4
RadzenBlazorDemos/Pages/SpreadsheetCustomToolbarPage.razor
View File

@@ -4,14 +4,14 @@
Spreadsheet <strong>Custom Toolbar</strong>
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
Replace the built-in ribbon with your own selection of tools. Pick from the public tool components, reorder them, group them as you like, and add custom tools that dispatch undoable commands.
Replace the built-in toolbar with your own selection of tools. Pick from the public tool components, reorder them, group them as you like, and add custom tools that dispatch undoable commands.
</RadzenText>
<RadzenText Anchor="spreadsheet-custom-toolbar#predefined-tools" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
Predefined tools in a custom layout
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
Drop any of the components from <code>Radzen.Blazor.Spreadsheet.Tools</code> into the spreadsheet's <code>ChildContent</code>. The host cascades the active <code>Worksheet</code> so the tools wire themselves up — no parameters needed. Add <code>TableDesignTab</code> to keep the contextual Table Design tab.
Drop any of the components from <code>Radzen.Blazor.Spreadsheet.Tools</code> into the spreadsheet's <code>ChildContent</code>. The host cascades the active <code>Worksheet</code> so the tools wire themselves up — no parameters needed. Add <code>TableDesignToolset</code> to keep the contextual Table Design toolset.
</RadzenText>
<RadzenExample ComponentName="Spreadsheet" Example="SpreadsheetCustomToolbarTools">
<SpreadsheetCustomToolbarTools />

2
RadzenBlazorDemos/Pages/SpreadsheetCustomToolbarTools.razor
View File

@@ -27,7 +27,7 @@
<CustomSort />
</RadzenStack>
</RadzenTabsItem>
<TableDesignTab />
<TableDesignToolset />
</RadzenSpreadsheet>
@code {

4
RadzenBlazorDemos/Services/ExampleService.cs
View File

@@ -393,8 +393,8 @@ namespace RadzenBlazorDemos
Name = "Custom Toolbar",
Path = "spreadsheet-custom-toolbar",
Title = "Blazor Spreadsheet Custom Toolbar | Free UI Components by Radzen",
Description = "Replace the built-in ribbon with your own selection of tools. Reuse the predefined tool components in any order or layout, and add custom tools that dispatch undoable commands.",
Tags = new [] { "spreadsheet", "toolbar", "custom", "custom tools", "ribbon", "childcontent", "command", "icommand", "undo", "extend" },
Description = "Replace the built-in toolbar with your own selection of tools. Reuse the predefined tool components in any order or layout, and add custom tools that dispatch undoable commands.",
Tags = new [] { "spreadsheet", "toolbar", "custom", "custom tools", "childcontent", "command", "icommand", "undo", "extend" },
Toc = [ new () { Text = "Predefined tools in a custom layout", Anchor = "#predefined-tools" }, new () { Text = "Custom tool with an undoable command", Anchor = "#custom-tool" } ]
},
}