### Complete Program.cs Example for Radzen Blazor Application Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/configuration.md This example demonstrates the complete setup for a Radzen Blazor application, including Blazor services, Radzen components, and AI Chat Service configuration. ```csharp var builder = WebApplicationBuilder.CreateBuilder(args); // Add Blazor services builder.Services.AddRazorComponents() .AddInteractiveServerComponents(); // Add Radzen components builder.Services.AddRadzenComponents(); // Configure AI Chat Service builder.Services.Configure(options => { options.Endpoint = builder.Configuration["OpenAI:Endpoint"]!; options.ApiKey = builder.Configuration["OpenAI:ApiKey"]!; options.Model = "gpt-3.5-turbo"; options.Temperature = 0.7; options.MaxTokens = 2000; }); // Add HTTP client for AI service builder.Services.AddHttpClient(); // Build and run var app = builder.Build(); if (!app.Environment.IsDevelopment()) { app.UseExceptionHandler("/Error", createScopeForErrors: true); app.UseHsts(); } app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseAntiforgery(); app.MapRazorComponents() .AddInteractiveServerRenderMode(); app.Run(); ``` -------------------------------- ### Example: Get Model and Temperature from Options Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/aichat-service.md Demonstrates how to access specific configuration values like the AI model and temperature from the service options. ```csharp var model = AIChatService.Options.Model; var temperature = AIChatService.Options.Temperature; ``` -------------------------------- ### Install Radzen.Blazor NuGet Package Source: https://github.com/radzenhq/radzen-blazor/blob/master/README.md Use the dotnet CLI to add the Radzen.Blazor NuGet package to your project. ```bash dotnet add package Radzen.Blazor ``` -------------------------------- ### Advanced AI Chat Setup with Custom Configuration Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/extensions.md This example demonstrates how to configure Radzen Blazor with AI Chat services, allowing for custom endpoint, API key, model, and other parameters. ```csharp var builder = WebApplicationBuilder.CreateBuilder(args); builder.Services .AddRazorComponents() .AddInteractiveServerComponents(); // Register core Radzen services builder.Services.AddRadzenComponents(); // Override AI Chat service with custom configuration builder.Services.AddAIChatService(options => { options.Endpoint = builder.Configuration["OpenAI:Endpoint"]!; options.ApiKey = builder.Configuration["OpenAI:ApiKey"]!; options.Model = "gpt-4"; options.Temperature = 0.8; options.MaxTokens = 4000; options.MaxMessages = 100; }); builder.Services.AddHttpClient(); var app = builder.Build(); app.UseHsts(); app.UseHttpsRedirection(); app.UseStaticFiles(); app.UseAntiforgery(); app.MapRazorComponents() .AddInteractiveServerRenderMode(); app.Run(); ``` -------------------------------- ### Basic Radzen Blazor Setup Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/extensions.md This snippet shows the minimal configuration required to register Radzen Blazor components in a new project. ```csharp // Program.cs var builder = WebApplicationBuilder.CreateBuilder(args); builder.Services .AddRazorComponents() .AddInteractiveServerComponents(); // Single line to register all Radzen services builder.Services.AddRadzenComponents(); var app = builder.Build(); app.Run(); ``` -------------------------------- ### Basic Context Menu Example Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/context-menu-service.md Demonstrates how to open a basic context menu with text items. Requires injecting ContextMenuService and defining menu items and a click handler. ```csharp @inject ContextMenuService ContextMenuService @code { void ShowContextMenu(MouseEventArgs args) { ContextMenuService.Open(args, new[] { new ContextMenuItem { Text = "Copy", Value = "copy" }, new ContextMenuItem { Text = "Cut", Value = "cut" }, new ContextMenuItem { Text = "Paste", Value = "paste" }, new ContextMenuItem { Text = "Delete", Value = "delete" } }, OnItemClick); } void OnItemClick(MenuItemEventArgs args) { Console.WriteLine($"Action: {args.Value}"); } } ``` -------------------------------- ### Basic Radzen Blazor Service Setup Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/README.md Registers Radzen components and HTTP client services in the application builder. This is a fundamental step for using Radzen Blazor. ```csharp builder.Services.AddRadzenComponents(); builder.Services.AddHttpClient(); ``` -------------------------------- ### Environment-Specific AI Chat Configuration Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/extensions.md This example illustrates how to apply different AI Chat service configurations based on the application's environment (development vs. production). ```csharp var builder = WebApplicationBuilder.CreateBuilder(args); builder.Services.AddRadzenComponents(); if (builder.Environment.IsDevelopment()) { builder.Services.AddAIChatService(options => { options.Endpoint = "http://localhost:11434/api/chat"; // Ollama options.Model = "llama2"; }); } else { builder.Services.Configure(options => { options.Endpoint = builder.Configuration["OpenAI:Endpoint"]!; options.ApiKey = builder.Configuration["OpenAI:ApiKey"]!; options.Model = "gpt-4"; }); } builder.Services.AddHttpClient(); ``` -------------------------------- ### Basic Theme Switching in Blazor Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/theme-service.md Inject the ThemeService and use its SetTheme method to change the application's theme. This example demonstrates switching to the 'material' theme when a button is clicked. ```csharp @inject ThemeService ThemeService @code { void SwitchTheme() { ThemeService.SetTheme("material"); } } ``` -------------------------------- ### Get WCAG Contrast Setting Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/theme-service.md Retrieves the boolean value indicating if WCAG high contrast is enabled. The example checks if the setting is true. ```csharp public bool? Wcag { get; } ``` ```csharp bool wcagEnabled = ThemeService.Wcag == true; ``` -------------------------------- ### Streaming AI Completions with Session Management Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/aichat-service.md Shows how to use GetCompletionsAsync to stream AI responses, specifying a session ID for conversation memory and optional parameters like temperature and max tokens. This example streams output to the console. ```csharp var sessionId = "user-123"; var fullResponse = ""; await foreach (var chunk in AIChatService.GetCompletionsAsync( "What is C#?", sessionId: sessionId, temperature: 0.7, maxTokens: 500 )) { fullResponse += chunk; Console.Write(chunk); // Stream to UI } ``` -------------------------------- ### Service Options Classes Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/README.md Placeholder classes for service configuration options. These are used for dependency injection setup for services like AIChat, Theme, Dialog, Tooltip, and ContextMenu. ```csharp public class AIChatServiceOptions { /* 8 properties */ } public class ThemeOptions { /* 4 properties */ } public class DialogOptions : DialogOptionsBase { /* 10+ properties */ } public class TooltipOptions { /* 5 properties */ } public class ContextMenuOptions { /* 3 properties */ } ``` -------------------------------- ### Use RadzenButton Component Source: https://github.com/radzenhq/radzen-blazor/blob/master/getting-started.md Example of how to use a RadzenButton component in a Blazor page, including handling the Click event. ```html @code { void OnClick() { // Handle the click event } } ``` -------------------------------- ### Get or Create Conversation Session Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/aichat-service.md Illustrates how to obtain a conversation session using its ID, or create a new one if it doesn't exist. It prints the session ID and the number of messages it contains. ```csharp var session = AIChatService.GetOrCreateSession("user-123"); Console.WriteLine($"Session ID: {session.Id}"); Console.WriteLine($"Messages: {session.Messages.Count}"); ``` -------------------------------- ### Get Right-to-Left Setting Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/theme-service.md Retrieves the boolean value indicating if the right-to-left layout is enabled. The example checks if the setting is true. ```csharp public bool? RightToLeft { get; } ``` ```csharp bool rtlEnabled = ThemeService.RightToLeft == true; ``` -------------------------------- ### Get Current Theme Name Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/theme-service.md Retrieves the name of the currently active theme. Example usage shows assigning the theme name to a string variable. ```csharp public string? Theme { get; } ``` ```csharp string? currentTheme = ThemeService.Theme; // e.g., "material" ``` -------------------------------- ### Basic Context Menu Usage Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/context-menu-service.md Demonstrates how to inject and use the ContextMenuService to open a basic context menu with predefined items when a button is right-clicked. Requires the ContextMenuService to be registered and RadzenContextMenu component to be present. ```csharp @inject ContextMenuService ContextMenuService @code { void ShowContextMenu(MouseEventArgs args) { ContextMenuService.Open(args, new[] { new ContextMenuItem { Text = "Edit", Value = "edit" }, new ContextMenuItem { Text = "Delete", Value = "delete", Icon = "delete" } }, OnMenuItemClick); } void OnMenuItemClick(MenuItemEventArgs args) { Console.WriteLine($"Selected: {args.Value}"); } } ``` -------------------------------- ### Messages Property Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/notification-service.md Accesses the ObservableCollection of active NotificationMessage objects. Used to get the count or clear all notifications. ```csharp public ObservableCollection Messages { get; private set; } ``` ```csharp // Get count of active notifications int count = NotificationService.Messages.Count; // Clear all notifications NotificationService.Messages.Clear(); // Access specific notification var firstMsg = NotificationService.Messages.FirstOrDefault(); ``` -------------------------------- ### Set Theme with Options Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/theme-service.md Configure the theme with additional options such as WCAG contrast compliance and right-to-left (RTL) layout. Ensure the ThemeOptions object is not null. ```csharp ThemeService.SetTheme(new ThemeOptions { Theme = "material", Wcag = true, // Enable WCAG contrast RightToLeft = false, TriggerChange = true }); ``` -------------------------------- ### Open Context Menu with Items Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/context-menu-service.md Shows how to open a context menu populated with a list of `ContextMenuItem` objects. A callback action is provided to handle item clicks. ```csharp void ShowMenu(MouseEventArgs args) { ContextMenuService.Open(args, new[] { new ContextMenuItem { Text = "Copy", Value = "copy" }, new ContextMenuItem { Text = "Paste", Value = "paste" }, new ContextMenuItem { Text = "Delete", Value = "delete" } }, (args) => { Console.WriteLine($"Menu item clicked: {args.Value}"); }); } ``` -------------------------------- ### Use a Radzen Button Component Source: https://github.com/radzenhq/radzen-blazor/blob/master/README.md An example of how to use a basic Radzen Button component in a Blazor page or component. ```razor ``` -------------------------------- ### Notify with NotificationMessage Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/notification-service.md Displays a notification by providing a fully configured NotificationMessage object. Includes an example of a click handler for the notification. ```csharp NotificationService.Notify(new NotificationMessage { Severity = NotificationSeverity.Success, Summary = "Saved", Detail = "Your changes have been saved", Duration = 3000, Click = (msg) => Console.WriteLine("Notification clicked") }); ``` -------------------------------- ### Basic Tooltip Usage Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/tooltip-service.md Inject the TooltipService and use it to open a tooltip with simple text content on mouse enter. ```csharp @inject TooltipService TooltipService ``` -------------------------------- ### Get Custom CSS Path Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/theme-service.md Retrieves the path to a custom CSS file if one is set. This property returns a string or null. ```csharp public string? CssPath { get; } ``` -------------------------------- ### Register Radzen Services in Program.cs Source: https://github.com/radzenhq/radzen-blazor/blob/master/README.md Add Radzen Blazor services to the dependency injection container in your `Program.cs` file. ```csharp builder.Services.AddRadzenComponents(); ``` -------------------------------- ### Get Active Conversation Sessions Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/aichat-service.md Shows how to retrieve a list of all currently active conversation sessions and display their IDs and message counts. ```csharp var sessions = AIChatService.GetActiveSessions(); foreach (var session in sessions) { Console.WriteLine($"Session {session.Id}: {session.Messages.Count} messages"); } ``` -------------------------------- ### Open Context Menu with Custom Content Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/context-menu-service.md Demonstrates opening a context menu using a `RenderFragment` to define custom HTML content, including nested menu items. A callback handles clicks on menu items within the custom content. ```csharp void ShowContextMenuWithContent(MouseEventArgs args) { ContextMenuService.Open(args, @ ); } void OnMenuItemClick(MenuItemEventArgs args) { Console.WriteLine($"Menu item with Value={args.Value} clicked"); } ``` -------------------------------- ### Multiple Tooltips with Different Positions Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/tooltip-service.md Demonstrates opening tooltips at different positions (Top, Bottom, Left, Right) using specific helper methods. ```csharp @inject TooltipService TooltipService
``` -------------------------------- ### AlignItems Enum Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/types.md Defines alignment for flex items. Control how items are positioned along the cross-axis, including start, center, end, stretch, and baseline. ```csharp public enum AlignItems { FlexStart, // Align to start Center, // Center align FlexEnd, // Align to end Stretch, // Stretch to fill Baseline // Align to baseline } ``` -------------------------------- ### Basic Dialog Opening in Radzen Blazor Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/dialog-service.md Demonstrates how to inject and use the DialogService to open a custom component as a dialog. This is the most common way to open a dialog with specific content and parameters. ```csharp @inject DialogService DialogService @code { async Task OpenDialog() { var result = await DialogService.OpenAsync( "Dialog Title", new Dictionary { { "PropertyName", value } } ); Console.WriteLine($"Dialog result: {result}"); } } ``` -------------------------------- ### Session Cleanup Task for AIChatService Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/aichat-service.md Sets up a periodic task to clean up old sessions managed by AIChatService. This example uses `IAsyncDisposable` and `PeriodicTimer` for background cleanup. ```csharp @inject AIChatService AIChatService @implements IAsyncDisposable @code { private PeriodicTimer? timer; protected override async Task OnInitializedAsync() { // Clean up old sessions every hour timer = new PeriodicTimer(TimeSpan.FromHours(1)); _ = CleanupTask(); } private async Task CleanupTask() { while (await timer!.WaitForNextTickAsync()) { AIChatService.CleanupOldSessions(24); // Remove sessions > 24 hours old } } async ValueTask IAsyncDisposable.DisposeAsync() { timer?.Dispose(); } } ``` -------------------------------- ### Context Menu with Images Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/context-menu-service.md Demonstrates using images instead of icons in context menu items. Specify the 'Image' property with the image path and optionally 'ImageStyle' for styling. ```csharp void ShowMenuWithImages(MouseEventArgs args) { ContextMenuService.Open(args, new[] { new ContextMenuItem { Text = "User Profile", Value = "profile", Image = "/images/profile.png", ImageStyle = "width: 20px; height: 20px;" }, new ContextMenuItem { Text = "Settings", Value = "settings" } }, OnItemClick); } ``` -------------------------------- ### Configuration from appsettings.json Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/extensions.md This snippet shows how to configure AI Chat service options by binding to a section in the appsettings.json file. ```json // appsettings.json { "AI": { "Endpoint": "https://api.openai.com/v1/chat/completions", "ApiKey": "sk-...", "ApiKeyHeader": "Authorization", "Model": "gpt-4", "Temperature": 0.7, "MaxTokens": 2000 } } ``` ```csharp // Program.cs var builder = WebApplicationBuilder.CreateBuilder(args); builder.Services.AddRadzenComponents(); builder.Services.Configure( builder.Configuration.GetSection("AI") ); builder.Services.AddHttpClient(); ``` -------------------------------- ### Open (RenderFragment) Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/context-menu-service.md Opens a context menu with custom HTML content defined using a `RenderFragment`. This allows for more complex and dynamic menu structures. ```APIDOC ## Open (RenderFragment) ### Description Opens a context menu with custom HTML content. ### Method Signature ```csharp public void Open( MouseEventArgs args, RenderFragment childContent ) ``` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Parameters Table | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | args | MouseEventArgs | Yes | Mouse event arguments | | childContent | RenderFragment | Yes | Custom HTML content | ### Request Example ```csharp void ShowContextMenuWithContent(MouseEventArgs args) { ContextMenuService.Open(args, @ ); } void OnMenuItemClick(MenuItemEventArgs args) { Console.WriteLine($"Menu item with Value={args.Value} clicked"); } ``` ### Response None directly returned. Interaction is handled via events within the `childContent`. ``` -------------------------------- ### Simple Text Tooltip Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/tooltip-service.md Demonstrates how to open a simple text tooltip on mouse enter using the TooltipService. ```csharp @inject TooltipService TooltipService ``` -------------------------------- ### Load Custom Theme with CSS Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/theme-service.md Set a custom CSS path using ThemeService.SetCssPath and then load a specific custom theme by its name using ThemeService.SetTheme. ```csharp @inject ThemeService ThemeService @code { protected override void OnInitialized() { // Set custom theme location ThemeService.SetCssPath("/themes"); // Load custom theme ThemeService.SetTheme("my-custom-theme"); } } ``` -------------------------------- ### Add Radzen.Blazor Package Reference Source: https://github.com/radzenhq/radzen-blazor/blob/master/getting-started.md Manually add the package reference to your .csproj file. ```xml ``` -------------------------------- ### GetCompletionsAsync Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/aichat-service.md Gets streaming AI completions from an AI model, managing conversation history based on the provided session ID. It supports various parameters to customize the AI's response and the API call. ```APIDOC ## GetCompletionsAsync ### Description Gets streaming AI completions with conversation memory. ### Method `async IAsyncEnumerable` ### Parameters #### Path Parameters - **userInput** (string) - Required - User message text - **sessionId** (string?) - Optional - Session ID for conversation memory (generates new if null) - **cancellationToken** (CancellationToken) - Optional - Cancellation token for the request - **model** (string?) - Optional - Model name (uses Options.Model if null) - **systemPrompt** (string?) - Optional - System prompt (uses Options.SystemPrompt if null) - **temperature** (double?) - Optional - Temperature 0.0-2.0 (uses Options.Temperature if null) - **maxTokens** (int?) - Optional - Max tokens (uses Options.MaxTokens if null) - **endpoint** (string?) - Optional - API endpoint (uses Options.Endpoint if null) - **proxy** (string?) - Optional - Proxy URL (overrides endpoint) - **apiKey** (string?) - Optional - API key (uses Options.ApiKey if null) - **apiKeyHeader** (string?) - Optional - API key header name (uses Options.ApiKeyHeader if null) ### Response #### Success Response - `IAsyncEnumerable` - Streamed response chunks ### Throws - `ArgumentException` - If userInput is null or whitespace - `HttpRequestException` - If API request fails - `InvalidOperationException` - If API key header not specified ### Example ```csharp var sessionId = "user-123"; var fullResponse = ""; await foreach (var chunk in AIChatService.GetCompletionsAsync( "What is C#?", sessionId: sessionId, temperature: 0.7, maxTokens: 500 )) { fullResponse += chunk; Console.Write(chunk); // Stream to UI } ``` ``` -------------------------------- ### Custom HTML Context Menu Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/context-menu-service.md Shows how to create a context menu using custom HTML content. This allows for embedding Radzen components or other HTML elements within the menu. ```csharp @inject ContextMenuService ContextMenuService @code { void ShowCustomMenu(MouseEventArgs args) { ContextMenuService.Open(args, @
); } } ``` -------------------------------- ### Complete _Imports.razor Configuration Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/configuration.md This snippet provides the complete configuration for the _Imports.razor file, including necessary system and Radzen Blazor namespaces. ```razor @using System.Net.Http @using Microsoft.AspNetCore.Authorization @using Microsoft.AspNetCore.Components.Authorization @using Microsoft.AspNetCore.Components.Forms @using Microsoft.AspNetCore.Components.Routing @using Microsoft.AspNetCore.Components.Web @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.JSInterop @using Radzen @using Radzen.Blazor ``` -------------------------------- ### Custom Model and Parameters with AIChatService Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/aichat-service.md Illustrates how to configure AIChatService with custom models, temperature, max tokens, and system prompts for tailored AI responses. ```csharp async Task SendWithCustomSettings(string userInput) { var response = ""; await foreach (var chunk in AIChatService.GetCompletionsAsync( userInput, sessionId: "chat-123", model: "gpt-4", temperature: 0.5, // More deterministic maxTokens: 1000, systemPrompt: "You are an expert software architect." )) { response += chunk; } } ``` -------------------------------- ### Tooltip with Delay Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/tooltip-service.md Shows how to configure a tooltip to appear after a specified delay using TooltipOptions. ```csharp void ShowTooltipWithDelay(ElementReference element) { TooltipService.Open(element, "Loading...", new TooltipOptions { Delay = 500, // Wait 500ms before showing Position = TooltipPosition.Top }); } ``` -------------------------------- ### Complete App.razor Configuration Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/configuration.md This snippet shows the complete configuration for the App.razor file, including base HTML structure, Radzen theme, and essential Radzen Blazor components. ```razor @using Radzen ``` -------------------------------- ### Open (Items) Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/context-menu-service.md Opens a context menu populated with a list of `ContextMenuItem` objects. A callback can be provided to handle item clicks. ```APIDOC ## Open (Items) ### Description Opens a context menu with a list of menu items. ### Method Signature ```csharp public void Open( MouseEventArgs args, IEnumerable items, Action? click = null ) ``` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Parameters Table | Parameter | Type | Required | Default | Description | |-----------|------|----------|---------|-------------| | args | MouseEventArgs | Yes | — | Mouse event arguments containing click position | | items | IEnumerable | Yes | — | Menu items to display | | click | Action? | No | null | Callback when an item is clicked | ### Request Example ```csharp void ShowMenu(MouseEventArgs args) { ContextMenuService.Open(args, new[] { new ContextMenuItem { Text = "Copy", Value = "copy" }, new ContextMenuItem { Text = "Paste", Value = "paste" }, new ContextMenuItem { Text = "Delete", Value = "delete" } }, (args) => { Console.WriteLine($"Menu item clicked: {args.Value}"); }); } ``` ### Response None directly returned, but the `click` callback is invoked upon item selection. ``` -------------------------------- ### Registering Custom Services in Program.cs Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/extensions.md Register your custom services with the dependency injection container in Program.cs. Services are typically registered with a scoped lifetime, which is suitable for web applications. ```csharp builder.Services.AddScoped(); // MyService.cs public class MyService { private readonly DialogService _dialogService; private readonly NotificationService _notificationService; public MyService(DialogService dialogService, NotificationService notificationService) { _dialogService = dialogService; _notificationService = notificationService; } } ``` -------------------------------- ### Dynamic Context Menu Items Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/context-menu-service.md Demonstrates generating context menu items dynamically. This is useful when the menu items depend on application state or data. ```csharp @inject ContextMenuService ContextMenuService @code { void ShowDynamicMenu(MouseEventArgs args) { var items = new List(); for (int i = 1; i <= 3; i++) { items.Add(new ContextMenuItem { Text = $"Item {i}", Value = $"item-{i}" }); } ContextMenuService.Open(args, items, OnItemClick); } void OnItemClick(MenuItemEventArgs args) { Console.WriteLine($"Selected: {args.Value}"); } } ``` -------------------------------- ### Custom HTML Tooltip Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/tooltip-service.md Demonstrates creating a tooltip with custom HTML content, including structured elements like lists and strong tags. ```csharp void ShowRichTooltip(ElementReference element) { TooltipService.Open(element, @

Feature Name

  • Feature 1
  • Feature 2
, new TooltipOptions { Position = TooltipPosition.Right, Style = "max-width: 200px;" }); } ``` -------------------------------- ### On Hover Tooltip with Close Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/tooltip-service.md Shows how to display a tooltip on mouse enter and close it on mouse leave using the TooltipService. ```csharp @inject TooltipService TooltipService ``` -------------------------------- ### Open Tooltip with Custom HTML Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/tooltip-service.md Opens a tooltip with custom HTML content using a RenderFragment. This allows for rich content within the tooltip. ```csharp void ShowTooltipWithHtml(ElementReference element) => TooltipService.Open(element, @
Rich Content

Supports HTML markup

); ``` -------------------------------- ### Context Menu with Icons Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/context-menu-service.md Shows how to add icons to context menu items. Specify the 'Icon' property for the icon name and optionally 'IconColor' for its color. ```csharp void ShowMenuWithIcons(MouseEventArgs args) { ContextMenuService.Open(args, new[] { new ContextMenuItem { Text = "Edit", Value = "edit", Icon = "edit" }, new ContextMenuItem { Text = "Delete", Value = "delete", Icon = "delete", IconColor = "#f44336" }, new ContextMenuItem { Text = "Archive", Value = "archive", Icon = "archive" } }, OnItemClick); } ``` -------------------------------- ### Register Radzen Components in Program.cs Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/configuration.md Register all Radzen components by calling AddRadzenComponents(). Alternatively, individual services can be registered. ```csharp builder.Services.AddRadzenComponents(); // Or register individual services builder.Services.AddScoped(); builder.Services.AddScoped(); builder.Services.AddScoped(); builder.Services.AddScoped(); builder.Services.AddScoped(); builder.Services.AddScoped(); ``` -------------------------------- ### Configure RadzenComponents for .NET 7 & .NET 6 Source: https://github.com/radzenhq/radzen-blazor/blob/master/getting-started.md Include this tag in your MainLayout.razor file for .NET 7 and .NET 6 applications to enable Radzen components like Dialog, ContextMenu, Tooltip, etc. ```html ``` -------------------------------- ### Opening a Dialog with Inline RenderFragment Content Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/dialog-service.md Illustrates how to open a dialog using an inline RenderFragment for content, allowing for dynamic and simple dialog UIs. This is ideal for confirmation dialogs or simple message boxes. ```csharp var result = await DialogService.OpenAsync("Confirm", ds => @

Are you sure?

); ``` -------------------------------- ### ConfirmOptions Class Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/types.md Defines configuration properties for confirmation dialogs. Use this to customize the text for both the OK and Cancel buttons. ```csharp public class ConfirmOptions : DialogOptionsBase { public string? OkButtonText { get; set; } public string? CancelButtonText { get; set; } } ``` -------------------------------- ### Hierarchical Context Menu Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/context-menu-service.md Illustrates creating a hierarchical (nested) context menu using RadzenMenu and RadzenMenuItem components. This allows for sub-menus. ```csharp void ShowHierarchicalMenu(MouseEventArgs args) { ContextMenuService.Open(args, @ ); } void OnMenuItemClick(MenuItemEventArgs args) { Console.WriteLine($"Menu item: {args.Value}"); } ``` -------------------------------- ### Dynamic Content Tooltip Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/tooltip-service.md Illustrates how to use dynamic content for a tooltip, updating the tooltip text and closing it after an action. ```csharp @inject TooltipService TooltipService @code { string tooltipText = "Copy to clipboard"; void Copy() { tooltipText = "Copied!"; TooltipService.Close(); StateHasChanged(); } } ``` -------------------------------- ### Open Tooltip with RenderFragment Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/tooltip-service.md Opens a tooltip with custom HTML content defined by a RenderFragment. This allows for rich, structured content within the tooltip. ```APIDOC ## Open (RenderFragment) Opens a tooltip with custom HTML content. ### Method Signature ```csharp public void Open( ElementReference element, RenderFragment childContent, TooltipOptions? options = null ) ``` ### Parameters #### Path Parameters * None #### Query Parameters * None #### Request Body * None ### Parameters Table | Parameter | Type | Required | Default | Description | |-----------|------|----------|---------|-------------| | element | ElementReference | Yes | — | Element reference | | childContent | RenderFragment | Yes | — | Custom HTML content | | options | TooltipOptions? | No | null | Configuration | ### Request Example ```csharp void ShowTooltipWithHtml(ElementReference element) => TooltipService.Open(element, @
Rich Content

Supports HTML markup

); ``` ### Response * None (This is a void method) ### Response Example * None ``` -------------------------------- ### Notify with Full Parameters Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/notification-service.md Displays a notification using all available parameters, including severity, summary, detail, duration, click handler, close on click behavior, custom payload, and a close handler. Default values are provided for most parameters. ```csharp NotificationService.Notify( severity: NotificationSeverity.Error, summary: "Error", detail: "Failed to save changes", duration: 5000, click: msg => { /* handle click */ }, closeOnClick: true, payload: new { ErrorCode = 500 } ); ``` -------------------------------- ### Use DialogService and NotificationService Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/README.md Inject DialogService and NotificationService to show confirmation dialogs and success notifications in response to button clicks. ```csharp @inject DialogService DialogService @inject NotificationService NotificationService @code { async Task ShowDialog() { var result = await DialogService.Confirm("Continue?", "Confirm"); if (result == true) { NotificationService.Notify(NotificationSeverity.Success, "Confirmed", "You pressed OK"); } } } ``` -------------------------------- ### ContextMenuOptions Class Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/context-menu-service.md Defines the configuration properties for a context menu. ```APIDOC ## ContextMenuOptions Class ### Description Configuration for context menu display. ### Properties - **ChildContent** (RenderFragment?): Custom Blazor content. - **Items** (IEnumerable?): Collection of menu items. - **Click** (Action?): Callback when item clicked. ``` -------------------------------- ### Notify (Full Parameters) Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/notification-service.md Displays a notification with all available configuration options, including severity, summary, detail, duration, click handlers, and close behavior. ```APIDOC ## Notify (Full Parameters) ### Description Displays a notification with all configurable options. This overload provides default values for most parameters, allowing for concise calls when only specific options need customization. ### Method `public void Notify( NotificationSeverity severity = NotificationSeverity.Info, string summary = "", string detail = "", double duration = 3000, Action? click = null, bool closeOnClick = false, object? payload = null, Action? close = null )` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **severity** (NotificationSeverity) - Optional - Default: Info - Severity level of the notification. - **summary** (string) - Optional - Default: "" - The main text or title of the notification. - **detail** (string) - Optional - Default: "" - The detailed content of the notification. - **duration** (double) - Optional - Default: 3000 - The display duration in milliseconds. - **click** (Action?) - Optional - Default: null - A callback action executed when the notification is clicked. - **closeOnClick** (bool) - Optional - Default: false - Determines if the notification should close when clicked. - **payload** (object?) - Optional - Default: null - Custom data associated with the notification. - **close** (Action?) - Optional - Default: null - A callback action executed when the notification is closed. ### Request Example ```csharp NotificationService.Notify( severity: NotificationSeverity.Error, summary: "Error", detail: "Failed to save changes", duration: 5000, click: msg => { /* handle click */ }, closeOnClick: true, payload: new { ErrorCode = 500 } ); ``` ### Response #### Success Response (void) This method does not return a value. #### Response Example N/A ``` -------------------------------- ### Simple Chat with AIChatService Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/aichat-service.md Demonstrates a basic chat interface using AIChatService to send user input and display AI responses. It streams the response chunk by chunk. ```csharp @inject AIChatService AIChatService @foreach (var msg in messages) {
@msg
} @code { string userInput = ""; List messages = new(); async Task SendMessage() { var response = ""; await foreach (var chunk in AIChatService.GetComcompletionsAsync(userInput)) { response += chunk; } messages.Add($"You: {userInput}"); messages.Add($"AI: {response}"); userInput = ""; } } ``` -------------------------------- ### Opening a Dialog with Specific Component and Options Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/dialog-service.md Shows how to open a dialog using a specific Blazor component, passing parameters and custom dialog options like width. This is useful for creating highly customized dialog experiences. ```csharp var result = await DialogService.OpenAsync( "Edit User", new Dictionary { { "UserId", 123 } }, new DialogOptions { Width = "800px" } ); ``` -------------------------------- ### OnOpen Event Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/context-menu-service.md This event is raised when a context menu is opened. It provides mouse event arguments and context menu options. ```APIDOC ## Event: OnOpen ### Description Raised when a context menu is opened. Provides details about the mouse event and menu configuration. ### Signature ```csharp public event Action? OnOpen ``` ### Parameters #### mouseEventArgs - **Type**: `MouseEventArgs` - **Description**: Mouse event with click position. #### options - **Type**: `ContextMenuOptions` - **Description**: Menu configuration. ``` -------------------------------- ### TooltipOptions Configuration Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/types.md Defines the configuration properties for tooltips, including text, position, delay, duration, CSS styling, and custom content. ```csharp public class TooltipOptions { public string? Text { get; set; } // Tooltip text public TooltipPosition Position { get; set; } // Position public int Delay { get; set; } // Delay before show (ms) public int Duration { get; set; } // Auto-close duration (ms) public string? CssClass { get; set; } // CSS classes public string? Style { get; set; } // CSS inline styles public RenderFragment? ChildContent { get; set; } // Custom HTML } ``` -------------------------------- ### Add Radzen.Blazor to _Imports.razor Source: https://github.com/radzenhq/radzen-blazor/blob/master/README.md Include the Radzen namespaces in your `_Imports.razor` file to make components available. ```razor @using Radzen @using Radzen.Blazor ``` -------------------------------- ### AlertOptions Class Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/types.md Defines configuration properties for alert dialogs. Use this to customize the text displayed on the OK button. ```csharp public class AlertOptions : DialogOptionsBase { public string? OkButtonText { get; set; } } ``` -------------------------------- ### Register TooltipService Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/configuration.md Register TooltipService as a scoped service. This service requires NavigationManager. ```csharp builder.Services.AddScoped(); ``` -------------------------------- ### Accessing Themes Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/theme-service.md The static `Themes` class provides access to all available themes, as well as filtered lists for free and premium themes. ```APIDOC ## Themes Class Access predefined themes via the static `Themes` class. ```csharp public static class Themes { public static readonly Theme[] All { get; } // All themes public static IEnumerable Free { get; } // Free themes only public static IEnumerable Premium { get; } // Premium themes only } ``` ``` -------------------------------- ### Theme Service Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/README.md Allows for runtime theme switching, supports WCAG compliance, and RTL (Right-to-Left) text direction. ```APIDOC ## Theme Service ### Description Manages the application's visual theme, enabling dynamic changes and ensuring accessibility standards are met. ### Methods - `LoadTheme(string name)`: Loads a specified theme. - `SetRTL(bool enabled)`: Enables or disables Right-to-Left text direction. - `SetDarkMode(bool enabled)`: Enables or disables dark mode. ### Usage Example ```csharp @inject ThemeService ThemeService ``` ``` -------------------------------- ### Configure RadzenComponents for .NET 8 Source: https://github.com/radzenhq/radzen-blazor/blob/master/getting-started.md Include this tag in your MainLayout.razor file for .NET 8 applications to enable Radzen components like Dialog, ContextMenu, Tooltip, etc. Ensure you use an appropriate interactive render mode. ```html ``` -------------------------------- ### TooltipOptions Class Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/tooltip-service.md Configuration options for tooltips, allowing customization of text, position, delay, duration, and appearance. ```APIDOC ## TooltipOptions Class ### Description Configuration options for tooltips, allowing customization of text, position, delay, duration, and appearance. ### Properties - **Text** (string?) - Optional - Text content to display. - **Position** (TooltipPosition) - Optional - Where to position tooltip (Top, Bottom, Left, Right). Defaults to Bottom. - **Delay** (int) - Optional - Delay before showing in milliseconds. Defaults to 0. - **Duration** (int) - Optional - Auto-close duration in milliseconds (0 = no auto-close). Defaults to 0. - **CssClass** (string?) - Optional - Custom CSS class. - **Style** (string?) - Optional - Custom CSS inline styles. - **ChildContent** (RenderFragment?) - Optional - Custom HTML content. ``` -------------------------------- ### Development and Production AI Service Configuration Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/configuration.md Configures AI chat service options based on the environment. Use for local development with Ollama or for production with OpenAI. ```csharp if (builder.Environment.IsDevelopment()) { builder.Services.Configure(options => { options.Endpoint = "http://localhost:11434/api/chat"; // Local Ollama options.Model = "llama2"; }); } else { builder.Services.Configure(options => { options.Endpoint = "https://api.openai.com/v1/chat/completions"; options.ApiKey = builder.Configuration["OpenAI:ApiKey"]!; options.Model = "gpt-4"; }); } ``` -------------------------------- ### AlertOptions and ConfirmOptions Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/dialog-service.md Configuration options for alert and confirm dialogs, including button text customization. ```APIDOC ## AlertOptions and ConfirmOptions Classes Both inherit from `DialogOptionsBase` and add button text configuration: ```csharp public class AlertOptions : DialogOptionsBase { public string? OkButtonText { get; set; } } public class ConfirmOptions : DialogOptionsBase { public string? OkButtonText { get; set; } public string? CancelButtonText { get; set; } } ``` ``` -------------------------------- ### Open (RenderFragment - Non-async) Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/api-reference/dialog-service.md Opens a dialog with inline content defined by a RenderFragment. This method is non-blocking and allows for simple, inline dialog definitions. ```APIDOC ## Open (RenderFragment - Non-async) ### Description Opens a dialog with inline content (non-blocking). This method is suitable for defining dialog content directly within the calling code. ### Method Signature ```csharp public virtual void Open(string title, RenderFragment childContent, DialogOptions? options = null) ``` ### Parameters #### Path Parameters * None #### Query Parameters * None #### Request Body * None ### Parameters Table | Parameter | Type | Required | Default | Description | |-----------|------|----------|---------|-------------| | title | string | Yes | — | Dialog title | | childContent | RenderFragment | Yes | — | Dialog content | | options | DialogOptions | No | null | Dialog options | ``` -------------------------------- ### Configure AI Chat Service Options Source: https://github.com/radzenhq/radzen-blazor/blob/master/_autodocs/README.md Configures options for the AI Chat service, specifying the OpenAI endpoint, API key, model, and temperature. Ensure the OPENAI_API_KEY environment variable is set. ```csharp builder.Services.Configure(options => { options.Endpoint = "https://api.openai.com/v1/chat/completions"; options.ApiKey = Environment.GetEnvironmentVariable("OPENAI_API_KEY")!; options.Model = "gpt-4"; options.Temperature = 0.7; }); ```