GridMvc for ASP.NET Core MVC

Custom columns

Index

• You can create a custom column by calling the Columns.Add method in your SGrid class. 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, GridMvc 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);

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. Sorting at grid level has precendence over sorting defined at column level.

Auto generating columns

This feature of GridMvc component provides functionality to automatically create columns from public properties of your model class.

To auto generate columns you must call the AutoGenerateColumns method of SGrid class or the Grid html helper. After that GridMvc will add columns for each public property:

    @await Html.Grid(Model).AutoGenerateColumns().RenderAsync()

If you want to exclude some properties from auto generation or customize any property, you have to use Data annotations (please see Data annotations)

Column settings

<- Paging | Totals ->