Blazor | ComponentOne
Controls / FlexGrid / Quick Start
In This Topic
    Quick Start
    In This Topic

    This quick start guides you through the steps of adding the FlexGrid control in your Blazor application, binding data to it and displaying the data in the control. In this example, we are using weather forecast service for binding its data to the FlexGrid control. This displays date & time, temperatures and summary in the control.



    Create a Blazor App

    1. In Visual Studio, select create a new project from the Get Started pane. 
    2. In the Create a new project window, select Blazor App and click Next.
    3. In the Configure your new project window, provide as name of the project you want to create in the Project name field, say BlazorIntro in this example. 
    4. Set location for the project in Location field. Click Create.
    5. In the Create a new Blazor app dialog, select Blazor Server App template and click Create. A new server-side Blazor app is created.
    Note: Blazor Client-side app or WebAssembly app can be created using the Blazor WebAssembly App template. For details, check the Blazor WebAssembly topic in Blazor templates.

    Configure References & Data Source

    Now, rebuild the project to restore basic dependencies. After completion of the steps above.

    1. From the Project menu, select  Manage NuGet Packages.
    2. In the NuGet Package Manager window, select as the Package source.
    3. Search for C1.Blazor.Grid package and click Install.  
    4. Navigate to the Pages folder, open _Host.cshtml file and register the client resources by adding the following lines of code.
    5. Add the following code to the <head> tag.
      Copy Code
      <link rel="stylesheet" href="/_content/C1.Blazor.Core/styles.css" />
      <link rel="stylesheet" href="/_content/C1.Blazor.Grid/styles.css" />
      <link rel="stylesheet" href="/_content/C1.Blazor.ListView/styles.css" />
      <link rel="stylesheet" href="/_content/C1.Blazor.Input/styles.css" />
      <link rel="stylesheet" href="/_content/C1.Blazor.DataPager/styles.css" />
      <link rel="stylesheet" href="~/_content/C1.Blazor.Calendar/styles.css" />
      <link rel="stylesheet" href="~/_content/C1.Blazor.DateTimeEditors/styles.css" />
      <link rel="stylesheet" href="~/_content/C1.Blazor.Chart/styles.css" />

    6. Add the following code to the <body> tag.
      Copy Code
      <script src="/_content/C1.Blazor.Core/scripts.js"></script>
      <script src="/_content/C1.Blazor.Input/scripts.js"></script>
      <script src="/_content/C1.Blazor.Grid/scripts.js"></script>
      <script src="~/_content/C1.Blazor.Chart/scripts.js"></script>
      <script src="~/_content/C1.Blazor.Calendar/scripts.js"></script>

    7. Right click on Pages folder, click Add, and select Razor Page to add a new Razor page. Provide name to the new Razor page, say Flexgridintro.
    8. Add the required directives to initialize and use the FlexGrid control in the new Razor page.
      Copy Code
      @using C1.DataCollection
      @using C1.Blazor.Grid

    9. Add the following references to access the data classes as demo data in the razor page.
      In this example, BlazorIntro.Data containing the service WeatherForecastService is added which creates WeatherForecast.cs and WeatherForecastService.cs classes in the Data folder.
      Copy Code
      @using BlazorIntro.Data
      @inject WeatherForecastService ForecastService


    Back to Top

    Bind FlexGrid to Data

    To bind FlexGrid to data, follow the steps mentioned below.

    1. Fetch the data from WeatherForecastService by adding the following code.
      Copy Code
      @code {
      WeatherForecast[] forecasts;
      protected override async Task OnInitializedAsync() {
       forecasts = await ForecastService.GetForecastAsync(DateTime.Now);

    2. Initialize the FlexGrid control and bind the fetched data to FlexGrid by adding the following HTML markup.
      Copy Code
      <FlexGrid ItemsSource="forecasts"></FlexGrid>

    3. Add a navigation path to the FlexGrid by appending the following HTML markup in the <ul> element.
      Copy Code
      <li class="nav-item px-3">
       <NavLink class="nav-link" href="Flexgridintro">
       FlexGrid Introduction


    Back to Top

    Build and Run the Project

    1. Click Build | Build Solution to build the project.
    2. Press F5 to run the project.

    Back to Top