After this is in place, a component can be injected a into page or within another component. Example:

<div class=“container”>
    <NextGrid />
</div>

Type parameter

First, a type parameter T should be set. This parameter represents a type of a single item inside grid.

The type parameter is required, but will be helpful in many situations.

Example

<NextGrid T="Product" />

This type is usually a model class, for example:

public class Product
{
    public string Title { get; set; } = "";
    public double Price { get; set; } = 0;
    public int Stock { get; set; } = 0;
}

By setting T type parameter, a reference of this type will be available within template for a cell.

In the following example we have added two columns and we bind the to 2 of properties from our model class.

<NextGrid T="Product" ItemsSource="Products">
    <TextColumn HeaderText="Title" DataBinding="p => p.Title" Size="120px" />
    <SpinColumn HeaderText="Price" DataBinding="p => p.Price" Size="80px" />
</NextGrid>

Columns

There are several different column types. They share parameters such as DataBinding or Size, but each introduce own parameters that are more specific to the column type.

Grid layouts

There is one more thing that need to be added, it's a grid layout component which tells how cells will be rendered. At the moment there are 2 layouts: details and stacks.

<NextGrid T="Product" ItemsSource="Products">
    <DetailsGridLayout />
...
    <TextColumn HeaderText="Title" DataBinding="p => p.Title" Size="120px" />
    <SpinColumn HeaderText="Price" DataBinding="p => p.Price" Size="80px" />
</NextGrid>

Currently active grid layout can be set via ActiveGridLayoutIndex parameter. Fortunately just adding a single grid layout is enough for grid to start displaying data.

Next: Connecting the data