The GridBlazor component installation is straightforward. Just follow these steps:
-
Create a new Blazor server-side solution using the Blazor Server App template
-
Install GridBlazor and GridCore nuget packages on the project.
-
Add the following lines to the _Host.cshtml view or directly to the page:
<link href="_content/GridBlazor/css/gridblazor.min.css" rel="stylesheet" /> <script src="_content/GridBlazor/js/gridblazor.js"></script>
These files will be loaded from the GridBlazor nuget package, so it is not necessary to copy it to you project.
-
Add this line to the Startup.cs file:
services.AddGridBlazor(x => x.Style = CssFramework.Bootstrap_4);
You can select the CSS framework used in your project among the following:
- CssFramework.Bootstrap_4
- CssFramework.Bootstrap_5
- CssFramework.Bootstrap_3
- CssFramework.Materialize
- CssFramework.Bulma
-
Add the CCS framework that you use to the _Host.cshtml file
-
If you are using Boostrap 3.x you will also need this line in the _Host.cshtml file:
<link href="~/_content/GridBlazor/css/gridblazor-bootstrap3.min.css" rel="stylesheet" />
-
If you are using Materialize you will also need this line in the _Host.cshtml file:
<link href="~/_content/GridBlazor/css/gridblazor-materialize.min.css" rel="stylesheet" />
-
If you are using Bulma you will also need this line in the _Host.cshtml file:
<link href="~/_content/GridBlazor/css/gridblazor-bulma.min.css" rel="stylesheet" />