GridBlazor for ASP.NET Core MVC

Custom columns

Index

All customization for columns must be done in the razor page:

• You can create a custom column by calling the Columns.Add method in the IGridColumnCollection interface. For example:

      Columns.Add(o => o.Customers.CompanyName);

• The Titled method of the Column object defines the column header text. If you don't call this method, GridBlazor will use the name of the property by default (in this case CompanyName).

      Columns.Add(o => o.Customers.CompanyName)
              .Titled("Company Name")

• If you want to add a column in a specified grid position, you can use the Insert method :

      Columns.Insert(0, o => o.Customers.CompanyName)
              .Titled("Company Name")

• You can construct a custom display value of the column using the RenderValueAs method:

      Columns.Add(o => o.Employees.LastName)
              .RenderValueAs(o => o.Employees.FirstName + " " + o.Employees.LastName)

• You can build html content in the column using the RenderValueAs, Encoded and Sanitized methods:

       c.Add(o => o.OrderID).Encoded(false).Sanitized(false)
      	.RenderValueAs(o => $"<b><a class='modal_link' href='/Home/Edit/{o.OrderID}'>Edit</a></b>");

• You can apply css classes to all cells of a column:

      Columns.Add(o => o.Employees.LastName).Css("hidden-xs")

• You can apply css classes to selected cells of a column:

      Columns.Add(o => o.OrderDate)
          .SetCellCssClassesContraint(o => o.OrderDate.HasValue && o.OrderDate.Value >= DateTime.Parse("1997-01-01") ? "red" : "")

• As a general rule you can concatenate method calls of the Column object to configure each column. For example:

      Columns.Add(o => o.Customers.CompanyName)
              .Titled("Company Name")
              .Sortable(true)
              .SetWidth(220);

Component columns

Sometimes you need to add a column that renders a component. In this case you must use an empty contructor of the Add method to create a column and its RenderComponentAs method to define the content that will be rendered in it:

    Columns.Add().RenderComponentAs(typeof(ButtonCell));

The parameter of the RenderComponentAs method must be the Type of the Blazor component used for this column. You must also create a Blazor component that includes only a parameter called Item of the same type of the grid row element. The component can include any html elements as well as event handling features.

This is an example of this type of component:

    <button class='btn btn-sm btn-primary' @onclick="@MyClickHandler">Save</button>

    @code {
        [Parameter]
        protected Order Item { get; set; }

        private void MyClickHandler(UIMouseEventArgs e)
        {
            Console.WriteLine("Button clicked: Item " + Item.OrderID);
        }
    }

Remember that sorting and filtering will not work on component columns.

Not connected columns

Sometimes you need to add a column that renders some content, but there is no base model property. In this case you must use an empty contructor of the Add method to create a column and its RenderValueAs method to define the content that will be rendered in it:

    Columns.Add().RenderValueAs(model => "Item " + model.Id);

Remember that sorting and filtering will not work on not connected columns.

Hidden columns

All columns added to the grid are visible by default. If you want that a column will not appear on the screen you have to set it up in the Add method call:

    Columns.Add(o => o.Id, true);

The second parameter of the Add method defines if the column will be hidden or not. In this example you will not see the Id column, but you can get values at the client side using javascript. Important: you can't sort hidden columns.

Sorting

If you want to enable sorting just for one column, you just call the Sortable(true) method of that column:

    Columns.Add(o => o.Employees.LastName)
                .Titled("Employee")
                .Sortable(true);

Sorting will be implemented for the field that you specify the Add method, in this example for the o.Employees.LastName field.

If you pass an ordered collection of items to the Grid constructor and you want to display this by default, you have to specify the initial sorting options:

    Columns.Add(o => o.OrderDate)
                .Titled("Date")
                .Sortable(true)
                .SortInitialDirection(GridSortDirection.Descending);

Remember that you can also enable Sorting for all columns of a grid. Sorting at grid level has precendence over sorting defined at column level.

Sorting with a custom comparer

You can enable sorting using a custom comparer. This feature only works for grids where all items are in memory. Grids where items are in a database and EF Core is used to get them don't support custom comparers and will throw an exception if the are configured in this way.

If you want to use a custom comparer for a column yo can do it by calling the Columns.Add method in the IGridColumnCollection interface using an IComparer<TKey> as a parameter:

    var comparer = new ....;

    .... 

    c.Add(o => o.Customer.CompanyName, comparer)

Header tooltip

You can enable a tooltip for a column header. The tooltip will appear when the pointer hover on the column header of the grid.

If the grid is configured for CRUD operations, the tooltip will also appear hovering over the field label of CRUD forms.

If you want to use a tooltip for a column yo can do it by calling the SetTooltip method in the column definition:

    c.Add(o => o.OrderID).SetTooltip("Order ID is ... ");

Column settings

<- Paging | Totals ->