### Basic Tabs Component Setup in Blazor

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

Demonstrates how to set up a basic Tabs component with multiple items, each having a header and content. Configure animation effects using TabAnimationSettings.

```razor
@page "/tabs-example"
@using Syncfusion.Blazor.Navigations

<SfTab CssClass="e-fill">
    <TabAnimationSettings>
        <TabAnimationPrevious Effect="AnimationEffect.None"></TabAnimationPrevious>
        <TabAnimationNext Effect="AnimationEffect.None"></TabAnimationNext>
    </TabAnimationSettings>
    <TabItems>
        <TabItem>
            <ChildContent>
                <TabHeader Text="Profile" IconCss="e-icons e-user"></TabHeader>
            </ChildContent>
            <ContentTemplate>
                <div style="padding: 20px;">
                    <h4>User Profile</h4>
                    <p>View and edit your personal information, preferences, and account settings.</p>
                </div>
            </ContentTemplate>
        </TabItem>
        <TabItem>
            <ChildContent>
                <TabHeader Text="Settings" IconCss="e-icons e-settings"></TabHeader>
            </ChildContent>
            <ContentTemplate>
                <div style="padding: 20px;">
                    <h4>Application Settings</h4>
                    <p>Configure notifications, privacy, and display preferences.</p>
                </div>
            </ContentTemplate>
        </TabItem>
        <TabItem>
            <ChildContent>
                <TabHeader Text="Activity" IconCss="e-icons e-clock"></TabHeader>
            </ChildContent>
            <ContentTemplate>
                <div style="padding: 20px;">
                    <h4>Recent Activity</h4>
                    <p>Review your recent actions and login history.</p>
                </div>
            </ContentTemplate>
        </TabItem>
    </TabItems>
</SfTab>
```

--------------------------------

### Register Syncfusion Services in Program.cs

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

Configure Syncfusion Blazor services, including license registration and dependency injection, in your application's Program.cs file. This setup is crucial for enabling Syncfusion components and features.

```csharp
using Syncfusion.Blazor;
using Syncfusion.Blazor.Popups;
using Syncfusion.Licensing;

var builder = WebApplication.CreateBuilder(args);

// Register Syncfusion license
SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY");

// Add Syncfusion Blazor services
builder.Services.AddSyncfusionBlazor();

// Add dialog service for modal dialogs
builder.Services.AddScoped<SfDialogService>();

// Configure localization
builder.Services.AddLocalization(options => options.ResourcesPath = "Resources");
builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer));

var supportedCultures = new[] { "en-US", "de-DE", "fr-CH", "zh-CN", "ar" };
var localizationOptions = new RequestLocalizationOptions()
    .SetDefaultCulture("en-US")
    .AddSupportedCultures(supportedCultures)
    .AddSupportedUICultures(supportedCultures);

// Add Blazor Server components
builder.Services.AddRazorComponents().AddInteractiveServerComponents()
    .AddHubOptions(options =>
    {
        options.ClientTimeoutInterval = TimeSpan.FromMinutes(5);
        options.HandshakeTimeout = TimeSpan.FromSeconds(30);
        options.KeepAliveInterval = TimeSpan.FromSeconds(15);
    });

var app = builder.Build();
app.UseRequestLocalization(localizationOptions);
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();
app.Run();

```

--------------------------------

### Blazor Pivot Table Configuration

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

Configure the Blazor Pivot Table component with data source settings, including columns, rows, values, and formatting. This example demonstrates setting up a basic pivot table with sample sales data.

```razor
@page "/pivot-example"
@using Syncfusion.Blazor.PivotView

<SfPivotView TValue="SalesData" Height="400" EnableValueSorting="true">
    <PivotViewDataSourceSettings DataSource="@Data" ExpandAll="false" EnableSorting="true">
        <PivotViewColumns>
            <PivotViewColumn Name="Year"></PivotViewColumn>
            <PivotViewColumn Name="Quarter"></PivotViewColumn>
        </PivotViewColumns>
        <PivotViewRows>
            <PivotViewRow Name="Country"></PivotViewRow>
            <PivotViewRow Name="Products"></PivotViewRow>
        </PivotViewRows>
        <PivotViewValues>
            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Sales Amount"></PivotViewValue>
        </PivotViewValues>
        <PivotViewFormatSettings>
            <PivotViewFormatSetting Name="Amount" Format="C0" UseGrouping="true"></PivotViewFormatSetting>
        </PivotViewFormatSettings>
    </PivotViewDataSourceSettings>
    <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
</SfPivotView>

@code {
    public List<SalesData> Data = new()
    {
        new SalesData { Country = "USA", Products = "Bikes", Year = "2023", Quarter = "Q1", Sold = 250, Amount = 45000 },
        new SalesData { Country = "USA", Products = "Bikes", Year = "2023", Quarter = "Q2", Sold = 320, Amount = 57600 },
        new SalesData { Country = "Germany", Products = "Cars", Year = "2023", Quarter = "Q1", Sold = 80, Amount = 160000 },
        new SalesData { Country = "Germany", Products = "Cars", Year = "2023", Quarter = "Q2", Sold = 95, Amount = 190000 },
        new SalesData { Country = "UK", Products = "Bikes", Year = "2024", Quarter = "Q1", Sold = 180, Amount = 32400 },
        new SalesData { Country = "UK", Products = "Cars", Year = "2024", Quarter = "Q1", Sold = 45, Amount = 90000 }
    };

    public class SalesData
    {
        public string? Country { get; set; }
        public string? Products { get; set; }
        public string? Year { get; set; }
        public string? Quarter { get; set; }
        public int Sold { get; set; }
        public double Amount { get; set; }
    }
}
```

--------------------------------

### Blazor DataGrid Component Example

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

Demonstrates the usage of the Syncfusion Blazor DataGrid component for displaying tabular data with features like paging, sorting, and filtering. Includes a custom template for conditional styling of status badges.

```razor
@page "/datagrid-example"
@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
    <GridPageSettings PageSize="10"></GridPageSettings>
    <GridColumns>
        <GridColumn Field="@nameof(Order.OrderId)" HeaderText="Order ID"
                    TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field="@nameof(Order.CustomerName)" HeaderText="Customer" Width="150"></GridColumn>
        <GridColumn Field="@nameof(Order.OrderDate)" HeaderText="Order Date"
                    Format="d" Type="ColumnType.Date" Width="130"></GridColumn>
        <GridColumn Field="@nameof(Order.Freight)" HeaderText="Freight"
                    Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field="@nameof(Order.Status)" HeaderText="Status" Width="120">
            <Template>
                @{
                    var order = context as Order;
                    var statusClass = order?.Status == "Completed" ? "status-completed" : "status-pending";
                }
                <span class="status-badge @statusClass">@order?.Status</span>
            </Template>
        </GridColumn>
    </GridColumns>
</SfGrid>

@code {
    public List<Order> Orders { get; set; } = new();

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 50).Select(i => new Order
        {
            OrderId = 1000 + i,
            CustomerName = $"Customer {i}",
            OrderDate = DateTime.Now.AddDays(-i),
            Freight = 25.50 * i,
            Status = i % 2 == 0 ? "Completed" : "Pending"
        }).ToList();
    }

    public class Order
    {
        public int OrderId { get; set; }
        public string? CustomerName { get; set; }
        public DateTime OrderDate { get; set; }
        public double Freight { get; set; }
        public string? Status { get; set; }
    }
}

```

--------------------------------

### Run .NET 9 Blazor Server Demo with .NET CLI

Source: https://github.com/syncfusion/blazor-samples/blob/master/README.md

Use this command to run the .NET 9 Blazor Web App Server Demos project from the command line.

```bash
dotnet run --project Blazor-Server-Demos/Blazor_Server_Demos_NET9.csproj
```

--------------------------------

### Run .NET 8 Blazor Server Demo with .NET CLI

Source: https://github.com/syncfusion/blazor-samples/blob/master/README.md

Use this command to run the .NET 8 Blazor Web App Server Demos project from the command line.

```bash
dotnet run --project Blazor-Server-Demos/Blazor_Server_Demos_NET8.csproj
```

--------------------------------

### Run .NET 10 Blazor Server Demo with .NET CLI

Source: https://github.com/syncfusion/blazor-samples/blob/master/README.md

Use this command to run the .NET 10 Blazor Web App Server Demos project from the command line.

```bash
dotnet run --project Blazor-Server-Demos/Blazor_Server_Demos_NET10.csproj
```

--------------------------------

### Run .NET 9 Blazor WASM Demo with .NET CLI

Source: https://github.com/syncfusion/blazor-samples/blob/master/README.md

Use this command to run the .NET 9 Blazor Web App WASM Demos project from the command line.

```bash
dotnet run --project Blazor-WASM-Demos/Blazor_WASM_Demos/Blazor_WASM_Demos_NET9.csproj
```

--------------------------------

### Run .NET 10 Blazor WASM Demo with .NET CLI

Source: https://github.com/syncfusion/blazor-samples/blob/master/README.md

Use this command to run the .NET 10 Blazor Web App WASM Demos project from the command line.

```bash
dotnet run --project Blazor-WASM-Demos/Blazor_WASM_Demos/Blazor_WASM_Demos_NET10.csproj
```

--------------------------------

### Run .NET 8 Blazor WASM Demo with .NET CLI

Source: https://github.com/syncfusion/blazor-samples/blob/master/README.md

Use this command to run the .NET 8 Blazor Web App WASM Demos project from the command line.

```bash
dotnet run --project Blazor-WASM-Demos/Blazor_WASM_Demos/Blazor_WASM_Demos_NET8.csproj
```

--------------------------------

### Configure Blazor Scheduler with Appointments

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

Sets up a Blazor Scheduler component with multiple views (Day, Week, Month, Agenda) and sample appointment data. Requires Syncfusion.Blazor.Schedule namespace and AppointmentData model.

```razor
@page "/scheduler-example"
@using Syncfusion.Blazor.Schedule

<SfSchedule TValue="AppointmentData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate">
    <ScheduleEventSettings DataSource="@Appointments"></ScheduleEventSettings>
    <ScheduleViews>
        <ScheduleView Option="View.Day"></ScheduleView>
        <ScheduleView Option="View.Week"></ScheduleView>
        <ScheduleView Option="View.WorkWeek"></ScheduleView>
        <ScheduleView Option="View.Month"></ScheduleView>
        <ScheduleView Option="View.Agenda"></ScheduleView>
    </ScheduleViews>
</SfSchedule>

@code {
    public DateTime CurrentDate { get; set; } = DateTime.Today;

    public List<AppointmentData> Appointments = new()
    {
        new AppointmentData
        {
            Id = 1,
            Subject = "Team Meeting",
            StartTime = DateTime.Today.AddHours(9),
            EndTime = DateTime.Today.AddHours(10),
            Location = "Conference Room A"
        },
        new AppointmentData
        {
            Id = 2,
            Subject = "Project Review",
            StartTime = DateTime.Today.AddHours(14),
            EndTime = DateTime.Today.AddHours(16),
            Location = "Virtual"
        },
        new AppointmentData
        {
            Id = 3,
            Subject = "Client Call",
            StartTime = DateTime.Today.AddDays(1).AddHours(11),
            EndTime = DateTime.Today.AddDays(1).AddHours(12),
            IsAllDay = false
        }
    };

    public class AppointmentData
    {
        public int Id { get; set; }
        public string? Subject { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string? Location { get; set; }
        public bool IsAllDay { get; set; }
    }
}
```

--------------------------------

### Implement Dialog Component with Actions

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

Shows how to open, close, and handle confirmation actions for a Syncfusion Blazor Dialog. Ensure the `SfDialog` component is correctly configured with templates and buttons.

```razor
@page "/dialog-example"
@using Syncfusion.Blazor.Popups

<button class="e-btn e-primary" @onclick="@OpenDialog">Open Dialog</button>

<SfDialog Width="400px" ShowCloseIcon="true" @bind-Visible="@IsVisible"
          IsModal="true" Header="Confirm Action">
    <DialogTemplates>
        <Content>
            <p>Are you sure you want to proceed with this action?</p>
            <p>This operation cannot be undone.</p>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Cancel" OnClick="@CloseDialog"></DialogButton>
        <DialogButton Content="Confirm" IsPrimary="true" OnClick="@OnConfirm"></DialogButton>
    </DialogButtons>
    <DialogEvents Closed="@OnDialogClose"></DialogEvents>
</SfDialog>

@code {
    private bool IsVisible = false;

    private void OpenDialog() => IsVisible = true;
    private void CloseDialog() => IsVisible = false;

    private void OnConfirm()
    {
        Console.WriteLine("Action confirmed!");
        IsVisible = false;
    }

    private void OnDialogClose(CloseEventArgs args)
    {
        Console.WriteLine("Dialog closed");
    }
}
```

--------------------------------

### Blazor Kanban Board Implementation

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

This snippet shows how to set up the Syncfusion Blazor Kanban Board. It defines columns, key fields, and card settings, along with sample task data. The 'KeyField' in 'SfKanban' should match the 'Status' property in 'KanbanTask'.

```razor
@page "/kanban-example"
@using Syncfusion.Blazor.Kanban

<SfKanban KeyField="Status" DataSource="@Tasks">
    <KanbanColumns>
        <KanbanColumn HeaderText="To Do" KeyField="@(new List<string>() { "Open" })"></KanbanColumn>
        <KanbanColumn HeaderText="In Progress" KeyField="@(new List<string>() { "InProgress" })"></KanbanColumn>
        <KanbanColumn HeaderText="Testing" KeyField="@(new List<string>() { "Testing" })"></KanbanColumn>
        <KanbanColumn HeaderText="Done" KeyField="@(new List<string>() { "Close" })"></KanbanColumn>
    </KanbanColumns>
    <KanbanCardSettings HeaderField="Id" ContentField="Summary"
                        GrabberField="Color" TagsField="Tags"></KanbanCardSettings>
</SfKanban>

@code {
    public List<KanbanTask> Tasks = new()
    {
        new KanbanTask { Id = "TASK-1", Summary = "Analyze customer requirements",
                         Status = "Open", Priority = "High", Tags = new[] { "Analysis" }, Color = "#ee6352" },
        new KanbanTask { Id = "TASK-2", Summary = "Design database schema",
                         Status = "InProgress", Priority = "Medium", Tags = new[] { "Design" }, Color = "#57a773" },
        new KanbanTask { Id = "TASK-3", Summary = "Implement user authentication",
                         Status = "Testing", Priority = "High", Tags = new[] { "Backend" }, Color = "#ee6352" },
        new KanbanTask { Id = "TASK-4", Summary = "Create API documentation",
                         Status = "Close", Priority = "Low", Tags = new[] { "Documentation" }, Color = "#5aa9e6" }
    };

    public class KanbanTask
    {
        public string? Id { get; set; }
        public string? Summary { get; set; }
        public string? Status { get; set; }
        public string? Priority { get; set; }
        public string[]? Tags { get; set; }
        public string? Color { get; set; }
    }
}
```

--------------------------------

### AI AssistView Component with Prompt Suggestions and Handling

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

Implements an AI AssistView component for conversational AI. Includes prompt suggestions, custom banner, toolbar items, and handles user prompts with simulated AI responses. Requires Syncfusion.Blazor.InteractiveChat.

```razor
@page "/ai-assist-example"
@using Syncfusion.Blazor.InteractiveChat

<div style="height: 600px; max-width: 800px; margin: 0 auto;">
    <SfAIAssistView @ref="AssistView" PromptSuggestions="@Suggestions"
                    PromptRequested="@HandlePrompt">
        <AssistViews>
            <AssistView>
                <BannerTemplate>
                    <div style="text-align: center; padding: 40px;">
                        <h3>AI Assistant</h3>
                        <p>Ask me anything or select a suggestion below.</p>
                    </div>
                </BannerTemplate>
            </AssistView>
        </AssistViews>
        <AssistViewToolbar ItemClicked="OnToolbarClick">
            <AssistViewToolbarItem Type="ItemType.Spacer"></AssistViewToolbarItem>
            <AssistViewToolbarItem IconCss="e-icons e-refresh" TooltipText="Clear"></AssistViewToolbarItem>
        </AssistViewToolbar>
    </SfAIAssistView>
</div>

@code {
    private SfAIAssistView? AssistView;

    private List<string> Suggestions = new()
    {
        "How do I create a DataGrid component?",
        "Explain Blazor component lifecycle",
        "Show me a Chart example",
        "What is dependency injection in Blazor?"
    };

    private async Task HandlePrompt(AssistViewPromptRequestedEventArgs args)
    {
        await Task.Delay(1500); // Simulate AI processing

        args.Response = args.Prompt switch
        {
            var p when p.Contains("DataGrid") =>
                "To create a DataGrid, add `<SfGrid>` with DataSource and GridColumns...",
            var p when p.Contains("lifecycle") =>
                "Blazor components have lifecycle methods: OnInitialized, OnParametersSet, OnAfterRender...",
            _ => "I can help you with Syncfusion Blazor components. Please ask a specific question."
        };

        args.PromptSuggestions = Suggestions;
    }

    private void OnToolbarClick(AssistViewToolbarItemClickedEventArgs args)
    {
        if (args.Item.IconCss?.Contains("e-refresh") == true)
        {
            AssistView?.Prompts.Clear();
        }
    }
}
```

--------------------------------

### Configure Blazor Chart with Sales Data

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

Renders an interactive line chart to visualize annual sales by region. Requires Syncfusion.Blazor.Charts namespace and SalesData model.

```razor
@page "/chart-example"
@using Syncfusion.Blazor.Charts

<SfChart Title="Annual Sales by Region" Width="100%">
    <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime"
                       EdgeLabelPlacement="EdgeLabelPlacement.Shift">
        <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
    </ChartPrimaryXAxis>
    <ChartPrimaryYAxis Title="Revenue (USD)" Minimum="0" Maximum="100" Interval="20">
        <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
        <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
    </ChartPrimaryYAxis>
    <ChartTooltipSettings Enable="true" EnableHighlight="true"
                          Header="<b>${series.name}</b>"
                          Format="${point.x} : <b>${point.y}K</b>"></ChartTooltipSettings>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@NorthData" Name="North" XName="Month" YName="Sales"
                     Type="ChartSeriesType.Line" Width="2">
            <ChartMarker Visible="true" Width="7" Height="7" Shape="ChartShape.Circle"></ChartMarker>
        </ChartSeries>
        <ChartSeries DataSource="@SouthData" Name="South" XName="Month" YName="Sales"
                     Type="ChartSeriesType.Line" Width="2">
            <ChartMarker Visible="true" Width="7" Height="7" Shape="ChartShape.Diamond"></ChartMarker>
        </ChartSeries>
    </ChartSeriesCollection>
    <ChartLegendSettings EnableHighlight="true"></ChartLegendSettings>
</SfChart>

@code {
    public class SalesData
    {
        public DateTime Month { get; set; }
        public double Sales { get; set; }
    }

    public List<SalesData> NorthData = new()
    {
        new SalesData { Month = new DateTime(2024, 1, 1), Sales = 35 },
        new SalesData { Month = new DateTime(2024, 2, 1), Sales = 42 },
        new SalesData { Month = new DateTime(2024, 3, 1), Sales = 55 },
        new SalesData { Month = new DateTime(2024, 4, 1), Sales = 48 },
        new SalesData { Month = new DateTime(2024, 5, 1), Sales = 62 },
        new SalesData { Month = new DateTime(2024, 6, 1), Sales = 75 }
    };

    public List<SalesData> SouthData = new()
    {
        new SalesData { Month = new DateTime(2024, 1, 1), Sales = 28 },
        new SalesData { Month = new DateTime(2024, 2, 1), Sales = 38 },
        new SalesData { Month = new DateTime(2024, 3, 1), Sales = 45 },
        new SalesData { Month = new DateTime(2024, 4, 1), Sales = 52 },
        new SalesData { Month = new DateTime(2024, 5, 1), Sales = 58 },
        new SalesData { Month = new DateTime(2024, 6, 1), Sales = 68 }
    };
}
```

--------------------------------

### Render World Map with City Markers in Blazor

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

Use SfMaps to visualize geographic data. Configure layers, shape settings, and marker templates to display custom information like city names and locations. Requires a GeoJSON file for map shapes.

```razor
@page "/maps-example"
@using Syncfusion.Blazor.Maps

<SfMaps>
    <MapsLayers>
        <MapsLayer ShapeData='new { dataOptions = "world-map.json" }' TValue="string">
            <MapsShapeSettings Fill="#E5E5E5"></MapsShapeSettings>
            <MapsMarkerSettings>
                <MapsMarker Visible="true" DataSource="@CityData" TValue="City">
                    <MarkerTemplate>
                        @{
                            var city = context as City;
                        }
                        <div style="text-align: center;">
                            <div style="background: red; width: 10px; height: 10px; border-radius: 50%;"></div>
                            <span style="font-size: 12px; font-weight: bold;">@city?.Name</span>
                        </div>
                    </MarkerTemplate>
                </MapsMarker>
            </MapsMarkerSettings>
        </MapsLayer>
    </MapsLayers>
    <MapsZoomSettings Enable="false"></MapsZoomSettings>
    <MapsTitleSettings Text="World Cities">
        <MapsTitleTextStyle Size="16px"></MapsTitleTextStyle>
    </MapsTitleSettings>
</SfMaps>

@code {
    public List<City> CityData = new()
    {
        new City { Name = "New York", Latitude = 40.7128, Longitude = -74.0060 },
        new City { Name = "London", Latitude = 51.5074, Longitude = -0.1278 },
        new City { Name = "Tokyo", Latitude = 35.6762, Longitude = 139.6503 },
        new City { Name = "Sydney", Latitude = -33.8688, Longitude = 151.2093 },
        new City { Name = "Dubai", Latitude = 25.2048, Longitude = 55.2708 }
    };

    public class City
    {
        public string? Name { get; set; }
        public double Latitude { get; set; }
        public double Longitude { get; set; }
    }
}
```

--------------------------------

### Implement a Searchable DropDownList in Blazor

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

This snippet demonstrates how to use the Syncfusion Blazor DropDownList component for user selection with data binding, filtering, and custom fields. It includes a sample data model and an event handler for value changes.

```razor
@page "/dropdown-example"
@using Syncfusion.Blazor.DropDowns

<div style="max-width: 300px; margin: 20px;">
    <label class="form-label">Select a Country</label>
    <SfDropDownList TItem="Country" TValue="string"
                    DataSource="@Countries"
                    @bind-Value="@SelectedCountry"
                    Placeholder="Choose a country"
                    PopupHeight="230px"
                    AllowFiltering="true">
        <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
        <DropDownListEvents TItem="Country" TValue="string"
                            ValueChange="OnCountryChange"></DropDownListEvents>
    </SfDropDownList>
    <p style="margin-top: 10px;">Selected: <b>@SelectedCountry</b></p>
</div>

@code {
    public string SelectedCountry = "US";

    public List<Country> Countries = new()
    {
        new Country { Code = "US", Name = "United States" },
        new Country { Code = "UK", Name = "United Kingdom" },
        new Country { Code = "DE", Name = "Germany" },
        new Country { Code = "FR", Name = "France" },
        new Country { Code = "JP", Name = "Japan" },
        new Country { Code = "AU", Name = "Australia" },
        new Country { Code = "CA", Name = "Canada" }
    };

    public class Country
    {
        public string? Code { get; set; }
        public string? Name { get; set; }
    }

    private void OnCountryChange(ChangeEventArgs<string, Country> args)
    {
        Console.WriteLine($"Selected: {args.ItemData?.Name}");
    }
}
```

--------------------------------

### Create a Diagram with Nodes and Connectors in Blazor

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

This snippet shows how to initialize and populate a Syncfusion Blazor Diagram component with nodes and connectors to create flowcharts or diagrams. It includes helper methods for creating nodes and connectors with specified properties.

```razor
@page "/diagram-example"
@using Syncfusion.Blazor.Diagram

<SfDiagramComponent @ref="Diagram" Width="100%" Height="500px"
                    Nodes="@Nodes" Connectors="@Connectors">
    <SnapSettings Constraints="SnapConstraints.None"></SnapSettings>
</SfDiagramComponent>

@code {
    SfDiagramComponent? Diagram;
    DiagramObjectCollection<Node> Nodes = new();
    DiagramObjectCollection<Connector> Connectors = new();

    protected override void OnInitialized()
    {
        Nodes.Add(CreateNode("start", 300, 50, "Start", NodeBasicShapes.Ellipse));
        Nodes.Add(CreateNode("process1", 300, 150, "Process Data", NodeBasicShapes.Rectangle));
        Nodes.Add(CreateNode("decision", 300, 250, "Valid?", NodeBasicShapes.Diamond));
        Nodes.Add(CreateNode("process2", 150, 350, "Handle Error", NodeBasicShapes.Rectangle));
        Nodes.Add(CreateNode("end", 300, 350, "Complete", NodeBasicShapes.Ellipse));

        Connectors.Add(CreateConnector("conn1", "start", "process1"));
        Connectors.Add(CreateConnector("conn2", "process1", "decision"));
        Connectors.Add(CreateConnector("conn3", "decision", "process2", "No"));
        Connectors.Add(CreateConnector("conn4", "decision", "end", "Yes"));
    }

    private Node CreateNode(string id, double x, double y, string label, NodeBasicShapes shape)
    {
        return new Node
        {
            ID = id,
            OffsetX = x,
            OffsetY = y,
            Width = 100,
            Height = shape == NodeBasicShapes.Diamond ? 80 : 50,
            Shape = new BasicShape { Type = NodeShapes.Basic, Shape = shape },
            Style = new ShapeStyle { Fill = "#6BA5D7", StrokeColor = "#2B579A" },
            Annotations = new DiagramObjectCollection<ShapeAnnotation>
            {
                new ShapeAnnotation { Content = label, Style = new TextStyle { Color = "white" } }
            }
        };
    }

    private Connector CreateConnector(string id, string source, string target, string label = "")
    {
        return new Connector
        {
            ID = id,
            SourceID = source,
            TargetID = target,
            Style = new ShapeStyle { StrokeColor = "#6BA5D7", StrokeWidth = 2 },
            TargetDecorator = new DecoratorSettings { Shape = DecoratorShape.Arrow },
            Annotations = string.IsNullOrEmpty(label) ? null : new DiagramObjectCollection<PathAnnotation>
            {
                new PathAnnotation { Content = label, Style = new TextStyle { Fill = "white" } }
            }
        };
    }
}
```

--------------------------------

### Blazor Gantt Chart Implementation

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

This snippet demonstrates how to configure the Syncfusion Blazor Gantt Chart component. It includes task data, field mappings, column definitions, and label settings. Ensure the TaskData class is defined with appropriate properties.

```razor
@page "/gantt-example"
@using Syncfusion.Blazor.Gantt

<SfGantt DataSource="@TaskData" Height="450px" Width="100%" HighlightWeekends="true"
         ProjectStartDate="@(new DateTime(2024, 1, 1))"
         ProjectEndDate="@(new DateTime(2024, 6, 30))">
    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate"
                     Duration="Duration" Progress="Progress" Dependency="Predecessor"
                     ParentID="ParentId"></GanttTaskFields>
    <GanttColumns>
        <GanttColumn Field="TaskId" Width="80"></GanttColumn>
        <GanttColumn Field="TaskName" HeaderText="Task Name" Width="250"></GanttColumn>
        <GanttColumn Field="StartDate" HeaderText="Start Date"></GanttColumn>
        <GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
        <GanttColumn Field="Progress" HeaderText="Progress"></GanttColumn>
    </GanttColumns>
    <GanttLabelSettings LeftLabel="TaskName" TValue="TaskData"></GanttLabelSettings>
    <GanttSplitterSettings Position="30%"></GanttSplitterSettings>
</SfGantt>

@code {
    public List<TaskData> TaskData { get; set; } = new()
    {
        new TaskData { TaskId = 1, TaskName = "Project Planning", StartDate = new DateTime(2024, 1, 2),
                       EndDate = new DateTime(2024, 1, 15), Progress = 100 },
        new TaskData { TaskId = 2, TaskName = "Requirements Analysis", StartDate = new DateTime(2024, 1, 16),
                       Duration = "10", Progress = 80, ParentId = 1 },
        new TaskData { TaskId = 3, TaskName = "Design Phase", StartDate = new DateTime(2024, 1, 30),
                       Duration = "15", Progress = 60, Predecessor = "2" },
        new TaskData { TaskId = 4, TaskName = "Development", StartDate = new DateTime(2024, 2, 20),
                       Duration = "30", Progress = 40, Predecessor = "3" },
        new TaskData { TaskId = 5, TaskName = "Testing", StartDate = new DateTime(2024, 4, 1),
                       Duration = "15", Progress = 0, Predecessor = "4" }
    };

    public class TaskData
    {
        public int TaskId { get; set; }
        public string? TaskName { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime? EndDate { get; set; }
        public string? Duration { get; set; }
        public int Progress { get; set; }
        public int? ParentId { get; set; }
        public string? Predecessor { get; set; }
    }
}
```

--------------------------------

### Initialize and Manipulate Image Editor in Blazor

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

Use the SfImageEditor component to load, edit, and save images. Event handlers like OnCreated and Saved can be used to manage image loading and export processes.

```razor
@page "/image-editor-example"
@using Syncfusion.Blazor.ImageEditor

<SfImageEditor @ref="ImageEditor" Height="500px" Width="100%">
    <ImageEditorEvents Created="OnCreated" Saved="OnSaved"></ImageEditorEvents>
</SfImageEditor>

<div style="margin-top: 10px; display: flex; gap: 10px;">
    <button class="e-btn" @onclick="RotateImage">Rotate 90°</button>
    <button class="e-btn" @onclick="FlipHorizontal">Flip Horizontal</button>
    <button class="e-btn" @onclick="ApplyFilter">Apply Sepia</button>
    <button class="e-btn e-primary" @onclick="SaveImage">Save Image</button>
</div>

@code {
    private SfImageEditor? ImageEditor;

    private async Task OnCreated()
    {
        if (ImageEditor != null)
        {
            await ImageEditor.OpenAsync("https://cdn.syncfusion.com/blazor/images/image-editor/desktop.png");
        }
    }

    private async Task RotateImage()
    {
        if (ImageEditor != null)
            await ImageEditor.RotateAsync(90);
    }

    private async Task FlipHorizontal()
    {
        if (ImageEditor != null)
            await ImageEditor.FlipAsync(ImageEditorDirection.Horizontal);
    }

    private async Task ApplyFilter()
    {
        if (ImageEditor != null)
            await ImageEditor.ApplyImageFilterAsync(ImageFilterOption.Sepia);
    }

    private async Task SaveImage()
    {
        if (ImageEditor != null)
            await ImageEditor.ExportAsync("EditedImage", ImageEditorFileType.PNG);
    }

    private void OnSaved(SaveEventArgs args)
    {
        Console.WriteLine($"Image saved: {args.FileName}");
    }
}
```

--------------------------------

### Implement Smart Paste Button in Blazor Form

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

Use the SfSmartPasteButton to automatically populate form fields from clipboard content. Ensure data-smartpaste-description attributes are set on input elements for context.

```razor
@page "/smart-paste-example"
@using Syncfusion.Blazor.SmartComponents
@using Syncfusion.Blazor.DataForm
@using Syncfusion.Blazor.Buttons

<div style="max-width: 500px; margin: 20px auto; padding: 20px; border: 1px solid #ddd; border-radius: 8px;">
    <h4>Contact Form</h4>
    <SfDataForm Model="@Contact" ColumnCount="1">
        <FormValidator>
            <DataAnnotationsValidator></DataAnnotationsValidator>
        </FormValidator>
        <FormItems>
            <FormItem Field="@nameof(Contact.Name)">
                <Template>
                    <label>Full Name</label>
                    <input @bind="Contact.Name" class="e-input"
                           data-smartpaste-description="Person's full name" />
                </Template>
            </FormItem>
            <FormItem Field="@nameof(Contact.Email)">
                <Template>
                    <label>Email</label>
                    <input @bind="Contact.Email" class="e-input" type="email"
                           data-smartpaste-description="Email address" />
                </Template>
            </FormItem>
            <FormItem Field="@nameof(Contact.Phone)">
                <Template>
                    <label>Phone</label>
                    <input @bind="Contact.Phone" class="e-input"
                           data-smartpaste-description="Phone number in format (XXX) XXX-XXXX" />
                </Template>
            </FormItem>
            <FormItem Field="@nameof(Contact.Message)">
                <Template>
                    <label>Message</label>
                    <textarea @bind="Contact.Message" class="e-input" rows="3"
                              data-smartpaste-description="Main message or inquiry"></textarea>
                </Template>
            </FormItem>
        </FormItems>
        <FormButtons>
            <SfButton Content="Reset" OnClick="@ResetForm"></SfButton>
            <SfSmartPasteButton IsPrimary="true" Content="Smart Paste" IconCss="e-icons e-paste">
            </SfSmartPasteButton>
        </FormButtons>
    </SfDataForm>
</div>

@code {
    private ContactModel Contact = new();

    private void ResetForm() => Contact = new ContactModel();

    public class ContactModel
    {
        public string? Name { get; set; }
        public string? Email { get; set; }
        public string? Phone { get; set; }
        public string? Message { get; set; }
    }
}
```

--------------------------------

### Configure Rich Text Editor Toolbar

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

Defines the toolbar items for the Syncfusion Blazor Rich Text Editor. Customize this list to control available formatting options.

```razor
@page "/rich-text-editor-example"
@using Syncfusion.Blazor.RichTextEditor

<SfRichTextEditor @bind-Value="@Content">
    <RichTextEditorToolbarSettings Items="@ToolbarItems" />
</SfRichTextEditor>

<div style="margin-top: 20px;">
    <h4>Output HTML:</h4>
    <pre>@Content</pre>
</div>

@code {
    private string Content = "<h2>Welcome!</h2><p>This is a <strong>Rich Text Editor</strong> demo.</p>";

    private List<ToolbarItemModel> ToolbarItems = new()
    {
        new ToolbarItemModel() { Command = ToolbarCommand.Bold },
        new ToolbarItemModel() { Command = ToolbarCommand.Italic },
        new ToolbarItemModel() { Command = ToolbarCommand.Underline },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.Formats },
        new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
        new ToolbarItemModel() { Command = ToolbarCommand.OrderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.UnorderedList },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
        new ToolbarItemModel() { Command = ToolbarCommand.Image },
        new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
        new ToolbarItemModel() { Command = ToolbarCommand.Separator },
        new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
        new ToolbarItemModel() { Command = ToolbarCommand.Undo },
        new ToolbarItemModel() { Command = ToolbarCommand.Redo }
    };
}
```

--------------------------------

### Generate Blazor Registration Form with Validation

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

Use SfDataForm to automatically generate form fields from model properties. Includes built-in validation using Data Annotations and supports custom layouts. Ensure DataAnnotationsValidator is included for validation.

```razor
@page "/data-form-example"
@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations

<div style="max-width: 500px; margin: 0 auto;">
    <h4>Registration Form</h4>
    <SfDataForm Model="@RegistrationModel" ColumnCount="2" ColumnSpacing="20px">
        <FormValidator>
            <DataAnnotationsValidator></DataAnnotationsValidator>
        </FormValidator>
        <FormItems>
            <FormAutoGenerateItems></FormAutoGenerateItems>
        </FormItems>
    </SfDataForm>
</div>

@code {
    private Registration RegistrationModel = new()
    {
        FirstName = "John",
        LastName = "Doe"
    };

    public class Registration
    {
        [Required(ErrorMessage = "First name is required")]
        [Display(Name = "First Name")]
        public string? FirstName { get; set; }

        [Required(ErrorMessage = "Last name is required")]
        [Display(Name = "Last Name")]
        public string? LastName { get; set; }

        [Required(ErrorMessage = "Email is required")]
        [EmailAddress(ErrorMessage = "Invalid email format")]
        public string? Email { get; set; }

        [Required]
        [MinLength(8, ErrorMessage = "Password must be at least 8 characters")]
        [DataType(DataType.Password)]
        public string? Password { get; set; }

        [Display(Name = "Date of Birth")]
        [DataType(DataType.Date)]
        public DateTime? DateOfBirth { get; set; }

        [Display(Name = "Accept Terms")]
        public bool AcceptTerms { get; set; }
    }
}
```

--------------------------------

### Display Toast Notifications

Source: https://context7.com/syncfusion/blazor-samples/llms.txt

Demonstrates how to trigger different types of toast notifications (success, warning, error) using the Syncfusion Blazor Toast component. The `Timeout` property sets the auto-dismiss duration.

```razor
@page "/toast-example"
@using Syncfusion.Blazor.Notifications

<div style="display: flex; gap: 10px;">
    <button class="e-btn e-success" @onclick="@ShowSuccess">Success</button>
    <button class="e-btn e-warning" @onclick="@ShowWarning">Warning</button>
    <button class="e-btn e-danger" @onclick="@ShowError">Error</button>
    <button class="e-btn" @onclick="@HideAll">Hide All</button>
</div>

<SfToast @ref="Toast" Timeout="5000">
    <ToastPosition X="Right" Y="Top"></ToastPosition>
</SfToast>

@code {
    private SfToast? Toast;

    private async Task ShowSuccess()
    {
        await Toast!.ShowAsync(new ToastModel
        {
            Title = "Success!",
            Content = "Your changes have been saved successfully.",
            CssClass = "e-toast-success",
            Icon = "e-success toast-icons"
        });
    }

    private async Task ShowWarning()
    {
        await Toast!.ShowAsync(new ToastModel
        {
            Title = "Warning",
            Content = "Please review your input before proceeding.",
            CssClass = "e-toast-warning",
            Icon = "e-warning toast-icons"
        });
    }

    private async Task ShowError()
    {
        await Toast!.ShowAsync(new ToastModel
        {
            Title = "Error",
            Content = "An error occurred. Please try again.",
            CssClass = "e-toast-danger",
            Icon = "e-error toast-icons"
        });
    }

    private async Task HideAll() => await Toast!.HideAsync("All");
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.