Skip to content
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions _contentTemplates/common/get-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,8 @@ To setup a local NuGet package source, so you can install the Telerik components


#root-component-telerik-layout
To enable the use of detached popups (for example, dropdown lists, menus, grid filters, etc.), you must add a component at the root level of the DOM:

Next to your main layout file (by default, the `~/Shared/MainLayout.razor` file in the Blazor project), add a Razor component called `TelerikLayout.razor` with the following content:

@inherits LayoutComponentBase
Expand Down
36 changes: 2 additions & 34 deletions _contentTemplates/common/js-interop-file.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
#end

#enable-static-assets
To enable the use of static assets in your project, add the following line to the `Startup.cs` file in the **Server** project:
To enable the use of static assets in your project, add the following line to the `Program.cs` file in the **Server** project:


**C#**
Expand All @@ -71,28 +71,11 @@ app.UseStaticFiles();

app.Run();
````
````Startup.cs
namespace MyBlazorAppName
{
public class Startup
{
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
// ...

//To enable static files from a package, make sure this is present.
app.UseStaticFiles();

// ...
}
}
}
````
#end

#register-telerik-service-server
<div class="skip-repl"></div>
````Program.cs
````
// ...

var builder = WebApplication.CreateBuilder(args);
Expand All @@ -105,21 +88,6 @@ builder.Services.AddTelerikBlazor();

var app = builder.Build();
````
````Startup.cs
namespace MyBlazorAppName
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
// ...
services.AddTelerikBlazor();
}

// ...
}
}
````
#end

#register-telerik-service-client
Expand Down
30 changes: 18 additions & 12 deletions getting-started/client-blazor.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: Make your first steps with Telerik UI for Blazor and build an app t
slug: getting-started/client-side
tags: get,started,first,steps,client
published: true
position: 1
position: 2
---

# First Steps with Client-Side UI for Blazor
Expand Down Expand Up @@ -41,15 +41,14 @@ This article explains how to get the <a href = "https://www.telerik.com/blazor-u

To enable the Telerik UI for Blazor components, you must add several client-side dependencies to the application:

### 4.1. Add the Telerik UI for Blazor Client Assets

1\. Add the `telerik-blazor.js` file to your main index file&mdash;`wwwroot/index.html`.

**HTML**
@[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet)

2\. To enable the use of static assets in your project, add the `app.UseStaticFiles();` line to the startup file of your `.Server` project (by default, this line is already present):

* Use `Startup.cs` for .NET 3.x
* Use `Program.cs` for .NET 6 and .NET 7
2\. To enable the use of static assets in your project, add the `app.UseStaticFiles();` line to the `Program.cs` file of your `.Server` project (by default, this line is already present).

**C#**
@[template](/_contentTemplates/common/js-interop-file.md#enable-static-assets-snippet)
Expand All @@ -58,12 +57,9 @@ To enable the Telerik UI for Blazor components, you must add several client-side

@[template](/_contentTemplates/common/js-interop-file.md#theme-static-asset-snippet)

4\. In the `~/Program.cs` file of the client web application, register the Telerik Blazor service.

**C#**
@[template](/_contentTemplates/common/js-interop-file.md#register-telerik-service-client)
### 4.2. Include @using Statements

5\. In the `~/_Imports.razor` file, add the `@using` directives below. This configures the project to recognize the Telerik components in all files. You can register one or both icon namespaces, depending on the [icon type you will be using]({%slug general-information/font-icons%}).
In the `~/_Imports.razor` file, add the `@using` directives below. This configures the project to recognize the Telerik components in all files. You can register one or both icon namespaces, depending on the [icon type you will be using]({%slug general-information/font-icons%}).

**_Imports.razor**

Expand All @@ -72,10 +68,20 @@ To enable the Telerik UI for Blazor components, you must add several client-side
@using Telerik.FontIcons
@using Telerik.SvgIcons

### 4.3. Add the TelerikRootComponent

Add a `TelerikRootComponent` component as a top-level component in the app and make sure it wraps all content.

6\. @[template](/_contentTemplates/common/get-started.md#root-component-telerik-layout)
@[template](/_contentTemplates/common/get-started.md#root-component-telerik-layout)

7\. @[template](/_contentTemplates/common/get-started.md#root-component-main-layout)
@[template](/_contentTemplates/common/get-started.md#root-component-main-layout)

### 4.4. Register the Telerik Blazor Service

In the `~/Program.cs` file of the client web application, register the Telerik Blazor service.

**C#**
@[template](/_contentTemplates/common/js-interop-file.md#register-telerik-service-client)

Now your project can use the Telerik UI for Blazor components.

Expand Down
8 changes: 4 additions & 4 deletions getting-started/hybrid-blazor.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: Make your first steps with Telerik UI for Blazor and build a .NET M
slug: getting-started/hybrid-blazor
tags: get,started,first,steps,server,hybrid,maui
published: true
position: 3
position: 5
---

# First Steps with Blazor Hybrid
Expand All @@ -31,7 +31,7 @@ Before adding the Telerik UI for Blazor components, ensure that the correspondin

The process for adding Telerik UI for Blazor to a WinForms, WPF, or MAUI app is similar to including the components in a [native Blazor app]({%slug getting-started/what-you-need%}) and involves the six steps listed below.

### 1. Get the `Telerik UI for Blazor` Package
### 1. Get the Telerik UI for Blazor Package

To use the UI for Blazor components, install the `Telerik.UI.for.Blazor` package and include its reference in the `.csproj` file of the app. [Read more on where to get the `Telerik.UI.for.Blazor` package...]({%slug getting-started/what-you-need%}#getting-the-telerik-packages)

Expand All @@ -41,7 +41,7 @@ To have the Telerik Blazor components look and behave as expected, you need the

You can add the Telerik resources as [static assets]({%slug getting-started/what-you-need%}#using-static-assets) or reference them from a [cloud CDN]({%slug getting-started/what-you-need%}#using-cdn).

### 3. Include `@using` Statements
### 3. Include @using Statements

You can set the project to recognize all Telerik components without explicit `@using` statements in every `.razor` file. To achieve this, add the code below to your `~/_Imports.razor` file. You can register one or both icon namespaces depending on the [icon type you will be using]({%slug general-information/font-icons%}).

Expand All @@ -56,7 +56,7 @@ You can set the project to recognize all Telerik components without explicit `@u
@using Telerik.SvgIcons
````

### 4. Add the `TelerikRootComponent`
### 4. Add the TelerikRootComponent

Add a `TelerikRootComponent` component as a top-level component in the app and make sure it wraps all content. At the time of writing, custom layouts are not supported, so you can add it to:

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
37 changes: 20 additions & 17 deletions getting-started/server-blazor.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: Make your first steps with Telerik UI for Blazor and build an app t
slug: getting-started/server-side
tags: get,started,first,steps,server
published: true
position: 2
position: 3
---

# First Steps with Server-Side UI for Blazor
Expand Down Expand Up @@ -41,40 +41,33 @@ This article explains how to get the Telerik UI for Blazor components in your <a

To enable the Telerik UI for Blazor components, you must add several client-side dependencies to the application:

### 4.1. Add the Telerik UI for Blazor Client Assets

1\. Add the `telerik-blazor.js` file to your main index file:

* `~/Pages/_Host.cshtml` for .NET 3.x and .NET 7
* `~/Pages/_Host.cshtml` for .NET 7
* `~/Pages/_Layout.cshtml` for .NET 6

**HTML**

@[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet)

2\. To enable the use of static assets in your project, add the `app.UseStaticFiles();` line to the startup file of your Blazor Server project (by default, this line is already present):

* Use `Startup.cs` for .NET 3.x
* Use `Program.cs` for .NET 6 and .NET 7
2\. To enable the use of static assets in your project, add the `app.UseStaticFiles();` line to the `Program.cs` file of your Blazor Server project (by default, this line is already present).

**C#**
@[template](/_contentTemplates/common/js-interop-file.md#enable-static-assets-snippet)


3\. To select the appearance and color scheme for the Telerik Blazor components, add the [theme stylesheet]({%slug general-information/themes%}) as a [static asset]({%slug general-information/themes%}#static-assets) or from a [CDN]({%slug general-information/themes%}#cdn).

* Use the `~/Pages/_Host.cshtml` index file for .NET 3.x and .NET 7
* Use the `~/Pages/_Host.cshtml` index file for .NET 7
* Use the `~/Pages/_Layout.cshtml` index file for .NET 6

@[template](/_contentTemplates/common/js-interop-file.md#theme-static-asset-snippet)

4\. In the startup file of your Blazor Server project, register the Telerik Blazor Service:

* Use `Startup.cs` for .NET 3.x
* Use `Program.cs` for .NET 6 and .NET 7

**C#**
@[template](/_contentTemplates/common/js-interop-file.md#register-telerik-service-server)
### 4.2. Include @using Statements

5\. In the `~/_Imports.razor` file, add the `@using` directives below. This configures the project to recognize the Telerik components in all files. You can register one or both icon namespaces, depending on the [icon type you will be using]({%slug general-information/font-icons%}).
In the `~/_Imports.razor` file, add the `@using` directives below. This configures the project to recognize the Telerik components in all files. You can register one or both icon namespaces, depending on the [icon type you will be using]({%slug general-information/font-icons%}).

**_Imports.razor**

Expand All @@ -83,10 +76,20 @@ To enable the Telerik UI for Blazor components, you must add several client-side
@using Telerik.FontIcons
@using Telerik.SvgIcons

### 4.3. Add the TelerikRootComponent

6\. @[template](/_contentTemplates/common/get-started.md#root-component-telerik-layout)
Add a `TelerikRootComponent` component as a top-level component in the app and make sure it wraps all content.

7\. @[template](/_contentTemplates/common/get-started.md#root-component-main-layout)
@[template](/_contentTemplates/common/get-started.md#root-component-telerik-layout)

@[template](/_contentTemplates/common/get-started.md#root-component-main-layout)

### 4.4. Register the Telerik Blazor Service

In the `Program.cs` file of your Blazor Server project, register the Telerik Blazor Service:

**C#**
@[template](/_contentTemplates/common/js-interop-file.md#register-telerik-service-server)

Now your Blazor Server project can use the Telerik UI for Blazor components.

Expand Down
Loading