Custom columns

You can define your custom column by calling method Columns.Add in your Grid class. For example:

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

Method Titled int this case setup the column header text, if you do not setup this, Grid take the name of property (CompanyName).

Also you can call 'Insert' method if you want to add column at specified position:

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

You can construct the displaying value:
Columns.Add(o => o.Employees.LastName)
                .Titled("Employee")
                .RenderValueAs(o => o.Employees.FirstName + " " + o.Employees.LastName)

Not connected columns

Sometimes you need to add column, that renders some content, but don't have a base model property (for sorting, filtering). In this case you need to use empty contructor of Add method to create column:

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

When you create not connected column - you must specify RenderValueAs method to specify which content will be render in this column. Also sorting and filtering will not works in this columns.

Hidden columns

By default all columns adding to the grid are visible. If you want, that column not displaying in the grid view - specify that in the Add method:

Columns.Add(o => o.Id, true);
In this case you will not see this column, but you can get values at the client side (javascript). Note: you can't sort hidden columns.

Sorting

If you want to enable sorting of your column - just call Sortable(true) method of added column:

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

Sorting will be implemented by field that you specify at the Add method (o.Employees.LastName).

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

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

Auto generating columns

This feature of Grid.Mvc provides functionality to automatically creates columns from public properties of your model class.

To do this you need to call AutoGenerateColumns method of Grid<T> class or Grid html helper. After that Grid.Mvc adds columns for each public property:

@Html.Grid(Model).AutoGenerateColumns()

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

Column settings

Property name Description Example
Titled Setup the column header text Columns.Add(x=>x.Name).Titled("Name of product");
Encoded Enable or disable encoding column values Columns.Add(x=>x.Name).Encoded(false);
Sanitized If encoding is disabled sanitize column value from XSS attacks Columns.Add(x=>x.Name).Encoded(false).Sanitize(false);
SetWidth Setup width of current column Columns.Add(x=>x.Name).SetWidth("30%");
RenderValueAs Setup delegate to render column values Columns.Add(x=>x.Name).RenderValueAs(o => o.Employees.FirstName " " o.Employees.LastName)
Sortable Enable or disable sorting for current column Columns.Add(x=>x.Name).Sortable(true);
SortInitialDirection Setup the initial sort deirection of the column (need to enable sorting) Columns.Add(x=>x.Name).Sortable(true).SortInitialDirection(GridSortDirection.Descending);
SetInitialFilter Setup the initial filter of the column Columns.Add(x=>x.Name).Filterable(true).SetInitialFilter(GridFilterType.Equals, "some name");
ThenSortBy Setup ThenBy sorting of current column Columns.Add(x=>x.Name).Sortable(true).ThenSortBy(x=>x.Date);
ThenSortByDescending Setup ThenByDescending sorting of current column Columns.Add(x=>x.Name).Sortable(true).ThenSortBy(x=>x.Date).ThenSortByDescending(x=>x.Description);
Filterable Enable or disable filtering feauture on the column Columns.Add(x=>x.Name).Filterable(true);
SetFilterWidgetType Setup filter widget type for rendering custom filtering user interface Columns.Add(x=>x.Name).Filterable(true).SetFilterWidgetType("MyFilter");
Format Format column value Columns.Add(o => o.OrderDate).Format("{0:dd/MM/yyyy}")
Css Apply css classes to the column Columns.Add(x => x.Number).Css("hidden-xs")

Read more: Client side (javascript)

Last edited Sep 25, 2013 at 9:58 AM by Bukharin, version 12