### Install Syncfusion Blazor Calendar NuGet Package
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/getting-started/blazor-server-side-dotnet-cli.md
These commands add the Syncfusion.Blazor.Calendars NuGet package to the project with a specified version and then restore all project dependencies.
```.NET CLI
dotnet add package Syncfusion.Blazor.Calendars --version {{ site.releaseversion }}
dotnet restore
```
--------------------------------
### Install Syncfusion Blazor Themes NuGet Package
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/getting-started/blazor-server-side-dotnet-cli.md
Installs the Syncfusion.Blazor.Themes NuGet package using the .NET CLI, which provides styling assets for Syncfusion Blazor components. This step is crucial for applying themes to the application.
```.NET CLI
dotnet add package Syncfusion.Blazor.Themes --version {{ site.releaseversion }}
dotnet restore
```
--------------------------------
### Include Syncfusion Blazor Styles from NuGet (New Standard)
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/listview/getting-started.md
This HTML snippet demonstrates how to reference Syncfusion Blazor CSS styles from the installed Syncfusion.Blazor.Lists NuGet package. It should be placed in the section of ~/wwwroot/index.html (WebAssembly) or ~/Pages/_Host.cshtml (Server).
```HTML
```
--------------------------------
### Configure Blazor Dialog Component Styles in Development Environment
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/dialog/getting-started.md
This code snippet shows how to include Syncfusion Blazor styles for the Dialog component within the section of `_Host.cshtml` when running in a Development environment, referencing local static web assets. It also includes a commented-out example for CDN reference.
```cshtml
....
....
@**@
```
--------------------------------
### Add Syncfusion Blazor Individual NuGet Package Styles
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/tabs/getting-started.md
Integrate client-side style resources for Syncfusion Blazor components using the recommended individual NuGet package approach. Place this tag within the section of your ~/Pages/_Host.cshtml file to apply the theme.
```HTML
```
--------------------------------
### Initialize Basic Blazor DatePicker Component (Blazor)
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/datepicker/getting-started.md
This Blazor snippet shows how to add a basic SfDatePicker component to your Index.razor view page. It includes a placeholder text to guide the user, demonstrating minimal setup.
```Blazor (CSHTML)
```
--------------------------------
### Create Blazor Server Project with .NET CLI
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/getting-started/blazor-server-side-dotnet-cli.md
These commands create a new Blazor Server application named 'BlazorApp' in a new directory and then navigate into that directory using the .NET CLI.
```.NET CLI
dotnet new blazorserver -o BlazorApp
cd BlazorApp
```
--------------------------------
### Install Blazor WebAssembly Project Templates (CLI)
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/rich-text-editor/how-to/blazor-web-assembly.md
Command-line instruction to install essential project templates for Blazor WebAssembly applications in Visual Studio 2019.
```CLI
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4
```
--------------------------------
### Register Syncfusion Blazor Services in Startup.cs
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/toolbar/getting-started.md
This snippet demonstrates how to register the necessary services for Syncfusion Blazor components in the `ConfigureServices` method of the `Startup.cs` file using `services.AddSyncfusionBlazor()`.
```C#
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
```
--------------------------------
### Configure Multiple Components in Blazor In-place Editor
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/in-place-editor/getting-started.md
Illustrates how to integrate multiple Syncfusion Blazor components, specifically `SfTextBox`, `SfDatePicker`, and `SfDropDownList`, within a single `SfInPlaceEditor` setup to create a basic editable form. This example includes Razor markup, C# code-behind for data models and binding, and inline CSS for styling.
```cshtml
@using Syncfusion.Blazor.InPlaceEditor
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Calendars
@using Syncfusion.Blazor.DropDowns
Modify Basic Details
Name
Date of Birth
Gender
@code {
public DateTime? DateValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day);
public string TextValue = "Andrew";
public string DropdownValue = "Male";
public class Gender
{
public string value { get; set; }
public string text { get; set; }
}
List dropdownData = new List()
{
new Gender(){ text= "Male" },
new Gender(){ text= "Female" }
};
}
```
--------------------------------
### Register Syncfusion Blazor Services in Startup.cs
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/multiselect-dropdown/getting-started.md
Configure the `Startup.cs` file by adding `services.AddSyncfusionBlazor()` within the `ConfigureServices` method to enable Syncfusion Blazor components.
```C#
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddSyncfusionBlazor();
}
}
}
```
--------------------------------
### Configure Syncfusion Blazor Services in Startup.cs
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/diagram-component/getting-started.md
This C# code snippet demonstrates how to register Syncfusion Blazor services by calling `services.AddSyncfusionBlazor()` within the `ConfigureServices` method of your `Startup.cs` file.
```C#
@using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
```
--------------------------------
### Check .NET SDK Version
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/getting-started/blazor-server-side-dotnet-cli.md
This command is used to verify the installed version of the .NET SDK in your development environment.
```.NET CLI
dotnet --version
```
--------------------------------
### Configure Syncfusion Blazor Services in Server-Side Startup.cs
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/tooltip/getting-started.md
This snippet demonstrates how to register Syncfusion Blazor services in a server-side Blazor application. It involves adding `services.AddSyncfusionBlazor()` within the `ConfigureServices` method of the `Startup.cs` file to enable Syncfusion component functionality.
```csharp
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
```
--------------------------------
### Configure Syncfusion Blazor Services in Startup.cs
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/dialog/getting-started.md
This C# code snippet shows how to register the necessary services for Syncfusion Blazor components by calling `services.AddSyncfusionBlazor()` within the `ConfigureServices` method of the `Startup.cs` file. This step is essential to enable the full functionality of Syncfusion components in the application.
```csharp
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
```
--------------------------------
### Bind Data to Blazor MultiSelect Component
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/multiselect-dropdown/getting-started.md
Populate the `SfMultiSelect` component with data using the `DataSource` property. This example demonstrates binding a list of `Games` objects, specifying `Text` and `Value` fields.
```CSHTML
@code {
public class Games
{
public string ID { get; set; }
public string Text { get; set; }
}
List LocalData = new List {
new Games() { ID= "Game1", Text= "American Football" },
new Games() { ID= "Game2", Text= "Badminton" },
new Games() { ID= "Game3", Text= "Basketball" },
new Games() { ID= "Game4", Text= "Cricket" },
new Games() { ID= "Game5", Text= "Football" },
new Games() { ID= "Game6", Text= "Golf" },
new Games() { ID= "Game7", Text= "Hockey" },
new Games() { ID= "Game8", Text= "Rugby"},
new Games() { ID= "Game9", Text= "Snooker" },
new Games() { ID= "Game10", Text= "Tennis"},
};
}
```
--------------------------------
### Register Syncfusion Blazor Services in Startup.cs
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/listbox/getting-started.md
Configure the Syncfusion Blazor services by adding `services.AddSyncfusionBlazor()` within the `ConfigureServices` method of your `Startup.cs` file. This step is crucial for the proper functioning and dependency injection of Syncfusion components.
```csharp
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
```
--------------------------------
### Reference Syncfusion Blazor CSS via NuGet or CDN
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/multiselect-dropdown/getting-started.md
Add the Syncfusion Blazor theme stylesheet to the HEAD section of the `~/Pages/_Host.cshtml` page. This example shows referencing `bootstrap4.css` from `_content` or a CDN.
```HTML
@**@
```
--------------------------------
### Add Blazor Chip Component Styles (CDN)
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/chip/getting-started.md
This HTML snippet illustrates how to reference Syncfusion Blazor component styles via a Content Delivery Network (CDN). Include this link in the section of your index.html (WebAssembly) or _Host.cshtml (Server) file for external style loading.
```HTML
```
--------------------------------
### Add Syncfusion Blazor Styles to Host Page
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/listbox/getting-started.md
Include the Syncfusion Blazor client-side style resources in the `` element of the `~/Pages/_Host.cshtml` page. Styles can be referenced from the installed NuGet package content or a CDN.
```cshtml
@**@
```
--------------------------------
### Set Mask Property for Blazor MaskedTextBox
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/input-mask/getting-started.md
This snippet illustrates how to apply a mask to the SfMaskedTextBox component using the Mask property, validating user input. The example uses '000-000-0000' to allow only digits.
```CSHTML
```
--------------------------------
### Register Syncfusion Blazor Services in Startup.cs
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/file-upload/getting-started.md
This C# code demonstrates how to register the necessary services for Syncfusion Blazor components in the ConfigureServices method of your Startup.cs file using services.AddSyncfusionBlazor().
```C#
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
// ... (other code)
public void ConfigureServices(IServiceCollection services)
{
// ... (other code)
services.AddSyncfusionBlazor();
}
}
}
```
--------------------------------
### Integrate Syncfusion Blazor Calendar Component
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/getting-started/blazor-server-side-dotnet-cli.md
Adds a basic Syncfusion Calendar component to a Blazor .razor page, such as Index.razor. This demonstrates how to use a Syncfusion UI component after setup.
```razor
```
--------------------------------
### Configure Syncfusion Blazor Services in Client-Side Program.cs
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/tooltip/getting-started.md
This snippet illustrates the process of registering Syncfusion Blazor services in a client-side (WebAssembly) Blazor application. The `builder.Services.AddSyncfusionBlazor()` method is added within the `Main` function of the `Program.cs` file to initialize Syncfusion components.
```csharp
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Program
{
public static async Task Main(string[] args)
{
....
....
builder.Services.AddSyncfusionBlazor();
}
}
}
```
--------------------------------
### Populate Syncfusion Blazor Scheduler with Appointments
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/scheduler/getting-started.md
This example shows how to bind event data to the Blazor Scheduler by assigning a `DataSource` to the `ScheduleEventSettings` property. It includes sample `AppointmentData` to demonstrate populating the scheduler with pre-defined events.
```CSHTML
@using Syncfusion.Blazor.Schedule
@code{
DateTime CurrentDate = new DateTime(2020, 2, 14);
List DataSource = new List
{
new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) },
new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) }
};
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public string Location { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public string Description { get; set; }
public bool IsAllDay { get; set; }
public string RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
public Nullable RecurrenceID { get; set; }
}
}
```
--------------------------------
### Register Syncfusion Blazor Services in Startup.cs (C#)
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/linear-gauge/getting-started.md
Illustrates how to register the necessary Syncfusion Blazor services in the ConfigureServices method of the Startup.cs file, enabling Syncfusion components within the application.
```C#
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceColloection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
```
--------------------------------
### Format NumericTextBox Value in Blazor
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/numeric-textbox/getting-started.md
Demonstrates how to format the value of a Syncfusion Blazor NumericTextBox component using the 'Format' property. The example uses the currency format 'c2' to display the value when the component is unfocused.
```cshtml
```
--------------------------------
### Add Syncfusion Blazor Styles (Development)
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/kanban/getting-started.md
This code snippet adds the Syncfusion Blazor CSS styles to the application's `_Host.cshtml` page, specifically for the development environment. It includes a local reference and a commented-out CDN reference.
```cshtml
....
....
@**@
```
--------------------------------
### Register Syncfusion Blazor Services in Startup.cs
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/query-builder/getting-started.md
This C# snippet demonstrates how to register the necessary services for Syncfusion Blazor components by calling services.AddSyncfusionBlazor() within the ConfigureServices method of the Startup.cs file.
```C#
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
```
--------------------------------
### Configure Azure SignalR for Blazor Server Application
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/chart/getting-started.md
Adds `AddAzureSignalR()` to the SignalR configuration in `Startup.cs`. This specific setup is required when hosting your Blazor server application on Azure SignalR, ensuring proper integration and scalability.
```csharp
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
services.AddSignalR(e => {e.MaximumReceiveMessageSize = 65536;}).AddAzureSignalR();
}
}
}
```
--------------------------------
### Register Syncfusion Blazor Services in Startup.cs
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/drop-down-menu/getting-started.md
This C# code demonstrates how to register the necessary Syncfusion Blazor services within the ConfigureServices method of the Startup.cs file. This step is essential for the Syncfusion components to function correctly within the Blazor application.
```C#
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
```
--------------------------------
### Initialize Blazor Smith Chart Component
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/smith-chart/getting-started.md
This code demonstrates the basic initialization of the `SfSmithchart` component by adding its tag to the `Index.razor` view page. This is the minimal setup required to render the Smith Chart in a Blazor application.
```CSHTML
@page "/"
```
--------------------------------
### Register Syncfusion Blazor Services in Startup (C#)
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/stock-chart/getting-started.md
Configures the necessary services for Syncfusion Blazor components by calling services.AddSyncfusionBlazor() within the ConfigureServices method of the Startup.cs file. This step is crucial for the proper functioning of Syncfusion components.
```C#
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
// ... other code ...
public void ConfigureServices(IServiceCollection services)
{
// ... other services ...
services.AddSyncfusionBlazor();
}
}
}
```
--------------------------------
### Add Polyfills for Internet Explorer 11
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/kanban/getting-started.md
This snippet demonstrates how to include polyfills for Internet Explorer 11 in the `_Host.cshtml` file to ensure proper rendering of the Blazor Server-side application. It adds a script reference for `blazor.polyfill.min.js`.
```cshtml
```
--------------------------------
### Control NumericTextBox Precision in Blazor
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/numeric-textbox/getting-started.md
Illustrates how to restrict the number of decimals in a Syncfusion Blazor NumericTextBox using the 'Decimals' and 'ValidateDecimalOnType' properties. It shows examples with 'ValidateDecimalOnType' enabled and disabled, affecting whether precision is enforced during typing.
```cshtml
```
--------------------------------
### Register Syncfusion Blazor Services in Startup.cs
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/kanban/getting-started.md
This C# code snippet demonstrates how to register the necessary services for Syncfusion Blazor components within the `ConfigureServices` method of the `Startup.cs` file. The `services.AddSyncfusionBlazor()` call integrates Syncfusion's services into the dependency injection container.
```csharp
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
```
--------------------------------
### Initialize Basic Blazor DateTimePicker Component
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/datetime-picker/getting-started.md
This Razor snippet demonstrates the basic initialization of the Syncfusion Blazor DateTimePicker component within an Index.razor view page. It sets a simple placeholder text to guide user input.
```cshtml
```
--------------------------------
### Initialize Syncfusion Blazor Dashboard Layout Component
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/dashboard-layout/getting-started.md
This snippet demonstrates how to initialize a basic Syncfusion Blazor Dashboard Layout component with a default panel. It shows the minimal setup required to render the component in a Blazor application.
```C#
@using Syncfusion.Blazor.Layouts
```
--------------------------------
### Register Syncfusion Blazor Services in Startup.cs
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/dropdown-list/getting-started.md
This C# snippet demonstrates how to register the necessary services for Syncfusion Blazor components in the `ConfigureServices` method of the `Startup.cs` file. Calling `services.AddSyncfusionBlazor()` enables the framework to properly initialize and manage Syncfusion components.
```C#
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
```
--------------------------------
### Register Syncfusion Blazor Services in Startup.cs
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/smith-chart/getting-started.md
This snippet illustrates how to register the necessary Syncfusion Blazor services within the `ConfigureServices` method of the `Startup.cs` file. This step is crucial for enabling Syncfusion components to function correctly within the Blazor application.
```C#
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
```
--------------------------------
### Integrate DatePicker in Blazor In-place Editor
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/in-place-editor/getting-started.md
Demonstrates how to render a Syncfusion Blazor DatePicker component within an `SfInPlaceEditor` by setting its `Type` to `InputType.Date` and binding its value. The example includes both the Razor markup and the C# code-behind for data binding.
```cshtml
@using Syncfusion.Blazor.InPlaceEditor
@using Syncfusion.Blazor.Calendars
@code {
public DateTime? DateValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day);
}
```
--------------------------------
### Add Syncfusion Blazor Sidebar Component to a Razor Page
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/sidebar/getting-started.md
Provides an example of integrating a basic Syncfusion Blazor Sidebar component into a Razor page. The snippet includes the necessary `@using` directive, the `SfSidebar` component with `ChildContent`, and basic CSS styling.
```cshtml
@using Syncfusion.Blazor.Navigations
Header
Sidebar
Main content
```
--------------------------------
### Include Syncfusion Blazor Styles and Polyfill for Development
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/diagram-component/getting-started.md
This snippet demonstrates how to conditionally include Syncfusion Blazor themes and a polyfill script for Internet Explorer 11 in the development environment within the HEAD section of your `index.cshtml`.
```CSHTML
```
--------------------------------
### Embed Syncfusion Blazor Styles from NuGet (New Standard)
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/range-slider/getting-started.md
Integrate Syncfusion Blazor component styles by referencing the 'bootstrap4.css' file from the installed 'Syncfusion.Blazor' NuGet package within the section of your Blazor application's host page.
```HTML
....
....
```
--------------------------------
### Register Syncfusion Blazor Services in Startup.cs
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/card/getting-started.md
This C# snippet demonstrates how to register Syncfusion Blazor services in the ConfigureServices method of Startup.cs. It uses services.AddSyncfusionBlazor() to enable Syncfusion components.
```csharp
using Syncfusion.Blazor;
namespace BlazorApplication
{
public class Startup
{
....
....
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
}
```
--------------------------------
### Add Syncfusion Blazor Styles and Scripts to HTML Head
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/datagrid/getting-started.md
This snippet demonstrates how to include Syncfusion Blazor themes and core scripts in the `index.html` file's `` section. These references are crucial for the proper styling and functionality of Syncfusion Blazor components within a WebAssembly application.
```HTML
....
```
--------------------------------
### Load GeoJSON Shape Data into Blazor Maps Layer
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/maps/getting-started.md
This CSHTML example illustrates how to add a `MapsLayer` to the `SfMaps` component and bind GeoJSON data using the `ShapeData` property, typically referencing a URL to a GeoJSON file like a world map.
```cshtml
@* To load shape data *@
```
--------------------------------
### Integrate Syncfusion Blazor Tooltip Component
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/tooltip/getting-started.md
This snippet provides an example of adding a Syncfusion Blazor Tooltip component to a Razor page. It includes the required `@using` directives, the `` and `` markup, and a C# `@code` block to define the tooltip's content. This demonstrates basic component usage and data binding.
```cshtml
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
@code
{
string Content = "Lets go green & Save Earth !!";
}
```
--------------------------------
### Populate Syncfusion Blazor Kanban Board with Data
Source: https://github.com/syncfusion/blazor-docs/blob/master/blazor/kanban/getting-started.md
This example demonstrates how to define a `TasksModel` class and populate a `List` as the `DataSource` for a Syncfusion Blazor Kanban component. It configures `KanbanColumns` and `KanbanCardSettings` to display task data based on status and other fields.
```Razor
@using Syncfusion.Blazor.Kanban
```
```C#
@code {
public class TasksModel
{
public string Id { get; set; }
public string Title { get; set; }
public string Status { get; set; }
public string Summary { get; set; }
}
public List Tasks = new List()
{
new TasksModel { Id = "Task 1", Title = "BLAZ-29001", Status = "Open", Summary = "Analyze the new requirements gathered from the customer." },
new TasksModel { Id = "Task 2", Title = "BLAZ-29002", Status = "Open", Summary = "Show the retrieved data from the server in grid control." },
new TasksModel { Id = "Task 3", Title = "BLAZ-29003", Status = "InProgress", Summary = "Improve application performance" },
new TasksModel { Id = "Task 4", Title = "BLAZ-29004", Status = "Testing", Summary = "Fix the issues reported by the customer." },
new TasksModel { Id = "Task 5", Title = "BLAZ-29005", Status = "Testing", Summary = "Fix the issues reported in Safari browser." },
new TasksModel { Id = "Task 6", Title = "BLAZ-29006", Status = "Close", Summary = "Analyze SQL server 2008 connection." },
new TasksModel { Id = "Task 7", Title = "BLAZ-29007", Status = "Close", Summary = "Analyze grid control." },
new TasksModel { Id = "Task 8", Title = "BLAZ-29008", Status = "Close", Summary = "Stored procedure for initial data binding of the grid." }
};
}
```