Blazor Grid - Column Binding

Bind Columns

Grid Columns can be bound to the Smart.Grid by setting them as children of the Column component:

@inject WeatherForecastService ForecastService

<Grid>
  <Columns>
    <Column DataField="Date" Label="Date"> </Column>
    <Column DataField="TemperatureC" Label="Temp. (C)"> </Column>
    <Column DataField="TemperatureF" Label="Temp. (F)"> </Column>
    <Column DataField="Summary" Label="Summary"> </Column>
  </Columns>
</Grid>

@code{
  private WeatherForecast[] forecast;

  protected override async Task OnInitializedAsync()
  {
      forecast = await ForecastService.GetForecastAsync(DateTime.Now);
  }
}

The most important properties of the Grid Column are DataField, Label and DataType:

  • DataField - specifies the property of the DataSource, which will be used as a value of the Column
  • Label - specifies the Column Title, which the users will see when the Grid has been rendered
  • DataType - specifies the column's data type. The Possible values are
    string | number | int | date | bool | object | any
Note that altough setting DataType is not required, it is recommended if you plan to use the Smart.Grid's Filtering & Sorting functionalities Basic Columns

Appearance

  • Align - specifies the alignment of the column's header. The Possible values are HorizontalAlignment.Left | Right | Center
  • VerticalAlign - specifies the vertical alignment of the column's header. The Possible values are VerticalAlignment.Center | Top | Bottom
  • CellsAlign - specifies the column's cells alignment. The Possible values are HorizontalAlignment.Left | Right | Center
  • CellsVerticalAlign - specifies the column's cells vertical alignment. The Possible values are VerticalAlignment.Center | Top | Bottom
  • CellsWrap - specifies the column's cells wrapping. The Possible values are true | false
  • Description - specifies the column's description, which is displaued when the end-user moves the pointer over the description button
  • ShowDescriptionButton - specifies whether the description button is visible. The Possible values are true | false
  • Width - specifies the width of the column. Value should be number
  • MinWidth - specifies the minimum width of the column. Value should be number
  • Icon - specifies the column's icon. Value should be CSS Class Name
  • ShowIcon - specifies whether the Icon is visible. The Possible values are true | false
  • Visible - specifies whether the column is visible. The Possible values are true | false

Formatting & Templates

  • CellsFormat - specifies the column's cells format for numbers, dates and time. Value should be string
  • FormatSettings - specifies the format settings for numbers, dates and time. Value should be object
    The properrties of the object are based on either Intl.NumberFormat or Intl.DateTimeFormat Constructors
  • Template - specifies the column's template. The Possible values are the id of HTMLTemplateElement or any of the built-in string values:
    checkBox | switchButton | radioButton| url | email

Group

  • AllowGroup - specifies whether the column can be grouped. The Possible values are true | false
  • ColumnGroup - specifies the name of the column group
    Note that Column Groups establish the hierarchy between the columns
  • Group - specifies the name of the column's group
    Note that Groups establish the hierarchy between the rows

Filter

  • AllowFilter - specifies whether the column can be filtered. The Possible values are true | false
  • Filter - specifies the filter of the column
  • FilterMenuMode - the filter menu mode of the column. The Possible values are:
    • basic - a single input is displayed in the filter menu
    • default - two input options are available for more precise filtering
    • excel - a checked list with unique values is displayed

Sort

  • AllowSort - specifies whether the column can be sorted. The Possible values are true | false
  • SortOrder - specifies the sort order of the column. The Possible values are GridColumnSortOrder.Null | Asc | Desc

Edit

  • AllowEdit - specifies whether the column can be edited. The Possible values are true | false
  • AllowHeaderEdit - specifies whether the column can be edited, when header editing is enabled. The Possible values are true | false
  • Editor - specifies the column's editor. Expects an object with Template property.
  • ValidationRules- specifies the column's validation rules. Expects object with the following properrties:
    • type - required, specifies the type of the validation. The Possible values are
      required | min | max | minLength | maxLength | email | null | requiredTrue | minDate | maxDate | pattern
    • value - not required if type set to required | requiredTrue
    • message - optional, specifies the error message

Reorder

  • AllowReorder - specifies whether the column can be reordered. The Possible values are true | false
    Note that the reorder settings are set inside the Grid Behavior property.

Resize

  • AllowResize - specifies whether the column can be resized. The Possible values are true | false
    Note that the resize settings are set inside the Grid Behavior property.

Functionality

  • AllowExport - specifies whether the column can be exported. The Possible values are true | false
  • AllowHide - specifies whether the column can be hidden. The Possible values are true | false
  • AllowSelect - specifies whether the column can be selected. The Possible values are true | false
    Note that the selection settings are set inside the Grid Selection property.
  • Freeze - specifies whether the column is pinned/freezed. The Possible values are near | far | false
  • Element - gets the HTML Element. The property returns null when the column is not in the View.
  • Summary - specifies the column summary. The property should be set to an array with the following possible values:
    sum | min | max | avg | count | median | stdev | stdevp | var | varp