@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Inputs
<div id="test-dialog-root">
<SfDialog @bind-Visible="IsOpen"
Width="80%"
Height="500"
IsModal="true"
ShowCloseIcon="true"
Target="#test-dialog-root">
<DialogTemplates>
<Header>Tabbed Dialog Repro</Header>
<Content>
@if (TabHeaders.Count > 0 && SelectedTabIndex >= 0)
{
<SfTab @bind-SelectedItem="SelectedTabIndex">
<TabEvents Selected="OnTabSelected"></TabEvents>
<TabItems>
@foreach (var tab in TabHeaders)
{
<TabItem ID="@tab.TabKey">
<ChildContent>
<TabHeader Text="@tab.TabName"></TabHeader>
</ChildContent>
<ContentTemplate>
<div class="tab-content">
@if (SelectedTab is not null)
{
<SfGrid DataSource="@SelectedTab.GridData" @ref="@SelectedTab.GridRef">
<GridEditSettings AllowEditing="true"
AllowAdding="true"
AllowDeleting="true"
Mode="Syncfusion.Blazor.Grids.EditMode.Batch"
ShowConfirmDialog="false" />
<GridSelectionSettings Mode="Syncfusion.Blazor.Grids.SelectionMode.Both" />
<GridEvents CellSelected="CellSelectHandler" TValue="TestGridRow"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(TestGridRow.Id) IsPrimaryKey="true" Visible="false" />
<GridColumn Field=@nameof(TestGridRow.Name) HeaderText="Name" Width="200" />
<GridColumn Field=@nameof(TestGridRow.Value) HeaderText="Value" EditType="EditType.NumericEdit" Width="100" />
</GridColumns>
</SfGrid>
<SfTextArea @bind-Value="SelectedTab.Notes" Placeholder="Notes..." Rows="3" />
<SfButton OnClick="() => SaveTabAsync(tab.TabKey)">Save</SfButton>
}
else
{
<div style="min-height:150px;display:flex;align-items:center;justify-content:center;">
Loading...
</div>
}
</div>
</ContentTemplate>
</TabItem>
}
</TabItems>
</SfTab>
}
</Content>
</DialogTemplates>
<DialogButtons>
<DialogButton Content="Close" CssClass="e-flat e-outline" OnClick="@(async () => await OnClose.InvokeAsync())"></DialogButton>
</DialogButtons>
</SfDialog>
</div>
@code {
[Parameter] public bool IsOpen { get; set; }
[Parameter] public EventCallback OnClose { get; set; }
private int SelectedTabIndex = -1;
private List<TabHeader> TabHeaders = new();
private TestTab? SelectedTab;
protected override async Task OnParametersSetAsync()
{
if (!IsOpen) return;
TabHeaders = await GetTabHeadersAsync();
SelectedTabIndex = TabHeaders.FindIndex(t => t.IsActive);
if (SelectedTabIndex < 0) SelectedTabIndex = 0;
await LoadTabContentAsync(SelectedTabIndex);
}
private async Task<List<TabHeader>> GetTabHeadersAsync()
{
await Task.Delay(100); // Simulate async data fetch
return new List<TabHeader>
{
new TabHeader { TabKey = "tab1", TabName = "Tab 1", IsActive = false },
new TabHeader { TabKey = "tab2", TabName = "Tab 2", IsActive = true },
new TabHeader { TabKey = "tab3", TabName = "Tab 3", IsActive = false }
};
}
public async Task OnTabSelected(SelectEventArgs args)
{
// TODO: Check for dirty state and prompt user before switching
await LoadTabContentAsync(args.SelectedIndex);
}
private async Task LoadTabContentAsync(int tabIndex)
{
var tabHeader = TabHeaders[tabIndex];
SelectedTab = new TestTab
{
TabKey = tabHeader.TabKey,
LastUpdatedBy = "User" + (tabIndex + 1),
LastUpdatedDate = DateTime.Now.AddMinutes(-tabIndex * 10),
GridData = Enumerable.Range(1, 3).Select(i => new TestGridRow
{
Id = i,
Name = $"Item {i} (Tab {tabIndex + 1})",
Value = 10 * (tabIndex + 1) + i
}).ToList(),
Notes = ""
};
await Task.CompletedTask;
}
// Single-click edit handler
public async Task CellSelectHandler(CellSelectEventArgs<TestGridRow> args)
{
if (SelectedTab?.GridRef is null) return;
var cellIndexes = await SelectedTab.GridRef.GetSelectedRowCellIndexesAsync();
var rowIndex = cellIndexes[0].Item1;
var colIndex = (int)cellIndexes[0].Item2;
var fields = await SelectedTab.GridRef.GetColumnFieldNamesAsync();
await SelectedTab.GridRef.EditCellAsync(rowIndex, fields[colIndex]);
}
// Save logic (simulate DB save)
private async Task SaveTabAsync(string tabKey)
{
// Save SelectedTab.GridData and SelectedTab.Notes to DB
// After save, reload tab data
await LoadTabContentAsync(SelectedTabIndex);
}
public class TabHeader
{
public string TabKey { get; set; } = default!;
public string TabName { get; set; } = default!;
public bool IsActive { get; set; }
}
public class TestTab
{
public string TabKey { get; set; } = default!;
public string LastUpdatedBy { get; set; } = default!;
public DateTime LastUpdatedDate { get; set; }
public List<TestGridRow> GridData { get; set; } = new();
public SfGrid<TestGridRow>? GridRef { get; set; }
public string Notes { get; set; } = "";
}
public class TestGridRow
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public int Value { get; set; }
}
}
