GridViewColumns

in namespace DotVVM.AutoUI.Controls

Usage & Scenarios

A special type of a column for GridView control which auto-generates columns based on DotVVM Auto UI model metadata for all properties of the row binding context.

Sample 1: Auto-generating GridView columns

The Auto UI GridViewColumns control looks at the properties of the object bound to the DataSource property and auto-generates columns for them. Basically, this column will be replaced by the generated columns.

You can add additional columns before or after this column.

page.dothtml
ViewModel.cs

<dot:GridView DataSource="{value: Customers}">
  <auto:GridViewColumns />
  
  <dot:GridViewTemplateColumn>
    <dot:RouteLink RouteName="CustomerDetail" 
                   Param-Id="{value: Id}" 
                   Text="Edit" />
  </dot:GridViewTemplateColumn>
</dot:GridView>

public class ViewModel : DotvvmViewModelBase
{
    private static IQueryable<Customer> FakeDb()
    {
        return new[]
        {
            new Customer() { Id = 0, Name = "Dani Michele", BirthDate = new DateTime(1990, 2, 3), IsVIP = false }, 
            new Customer() { Id = 1, Name = "Elissa Malone", BirthDate = new DateTime(1984, 10, 6), IsVIP = false }, 
            new Customer() { Id = 2, Name = "Raine Damian", BirthDate = new DateTime(1988, 5, 17), IsVIP = false },
            new Customer() { Id = 3, Name = "Gerrard Petra", BirthDate = new DateTime(1994, 1, 23), IsVIP = false }, 
            new Customer() { Id = 4, Name = "Clement Ernie", BirthDate = new DateTime(1991, 4, 29), IsVIP = true }, 
            new Customer() { Id = 5, Name = "Rod Fred", BirthDate = new DateTime(1987, 6, 5), IsVIP = true }
        }.AsQueryable();
    }

    public GridViewDataSet<Customer> Customers { get; set; } = new GridViewDataSet<Customer>() { PagingOptions = { PageSize = 4} };

    public override Task PreRender()
    {
        if (Customers.IsRefreshRequired)
        {
            var queryable = FakeDb();
            Customers.LoadFromQueryable(queryable);
        }
        return base.PreRender();
    }
}

public class Customer
{
    // do not show this field
    [Display(AutoGenerateField = false)]
    public int Id { get; set; }

    public string Name { get; set; }

    // show date only
    [DisplayFormat(DataFormatString = "d")]
    public DateTime BirthDate { get; set; }

    public bool IsVIP { get; set; }
}

Sample 2: Groups of properties

To generate columns just for some properties, you can use the GroupName property to tell the control which group of properties shall be considered.

The property can be assigned to a specific group using the Display attribute:

[Display(..., GroupName = "basic")]
public string FirstName { get; set; }

page.dothtml
ViewModel.cs

<dot:GridView DataSource="{value: Customers}">
  <auto:GridViewColumns GroupName="BasicInfo" />

  <dot:GridViewTemplateColumn>
    Custom column in the middle
  </dot:GridViewTemplateColumn>

  <auto:GridViewColumns GroupName="AdvancedInfo" />
</dot:GridView>

public class ViewModel : DotvvmViewModelBase
{
    private static IQueryable<Customer> FakeDb()
    {
        return new[]
        {
            new Customer() { Id = 0, Name = "Dani Michele", BirthDate = new DateTime(1990, 2, 3), IsVIP = false }, 
            new Customer() { Id = 1, Name = "Elissa Malone", BirthDate = new DateTime(1984, 10, 6), IsVIP = false }, 
            new Customer() { Id = 2, Name = "Raine Damian", BirthDate = new DateTime(1988, 5, 17), IsVIP = false },
            new Customer() { Id = 3, Name = "Gerrard Petra", BirthDate = new DateTime(1994, 1, 23), IsVIP = false }, 
            new Customer() { Id = 4, Name = "Clement Ernie", BirthDate = new DateTime(1991, 4, 29), IsVIP = true }, 
            new Customer() { Id = 5, Name = "Rod Fred", BirthDate = new DateTime(1987, 6, 5), IsVIP = true }
        }.AsQueryable();
    }

    public GridViewDataSet<Customer> Customers { get; set; } = new GridViewDataSet<Customer>() { PagingOptions = { PageSize = 4} };

    public override Task PreRender()
    {
        if (Customers.IsRefreshRequired)
        {
            var queryable = FakeDb();
            Customers.LoadFromQueryable(queryable);
        }
        return base.PreRender();
    }
}

public class Customer
{
    // do not show this field
    [Display(AutoGenerateField = false)]
    public int Id { get; set; }

    [Display(GroupName = "BasicInfo")]
    public string Name { get; set; }

    // show date only
    [DisplayFormat(DataFormatString = "d")]
    [Display(GroupName = "AdvancedInfo")]
    public DateTime BirthDate { get; set; }

    [Display(GroupName = "AdvancedInfo")]
    public bool IsVIP { get; set; }
}

Sample 3: Explicit property listing

If you prefer explicit listing of the properties, you can use the IncludeProperties and ExcludeProperties properties to specify which properties shall be generated.

page.dothtml
ViewModel.cs

<dot:GridView DataSource="{value: Customers}">
  <auto:GridViewColumns IncludeProperties="Name,BirthDate" />

  <dot:GridViewTemplateColumn>
    Custom column in the middle
  </dot:GridViewTemplateColumn>

  <auto:GridViewColumns ExcludeProperties="Name,BirthDate" />
</dot:GridView>

public class ViewModel : DotvvmViewModelBase
{
    private static IQueryable<Customer> FakeDb()
    {
        return new[]
        {
            new Customer() { Id = 0, Name = "Dani Michele", BirthDate = new DateTime(1990, 2, 3), IsVIP = false }, 
            new Customer() { Id = 1, Name = "Elissa Malone", BirthDate = new DateTime(1984, 10, 6), IsVIP = false }, 
            new Customer() { Id = 2, Name = "Raine Damian", BirthDate = new DateTime(1988, 5, 17), IsVIP = false },
            new Customer() { Id = 3, Name = "Gerrard Petra", BirthDate = new DateTime(1994, 1, 23), IsVIP = false }, 
            new Customer() { Id = 4, Name = "Clement Ernie", BirthDate = new DateTime(1991, 4, 29), IsVIP = true }, 
            new Customer() { Id = 5, Name = "Rod Fred", BirthDate = new DateTime(1987, 6, 5), IsVIP = true }
        }.AsQueryable();
    }

    public GridViewDataSet<Customer> Customers { get; set; } = new GridViewDataSet<Customer>() { PagingOptions = { PageSize = 4} };

    public override Task PreRender()
    {
        if (Customers.IsRefreshRequired)
        {
            var queryable = FakeDb();
            Customers.LoadFromQueryable(queryable);
        }
        return base.PreRender();
    }
}

public class Customer
{
    // do not show this field
    [Display(AutoGenerateField = false)]
    public int Id { get; set; }

    [Display(GroupName = "BasicInfo")]
    public string Name { get; set; }

    // show date only
    [DisplayFormat(DataFormatString = "d")]
    [Display(GroupName = "AdvancedInfo")]
    public DateTime BirthDate { get; set; }

    [Display(GroupName = "AdvancedInfo")]
    public bool IsVIP { get; set; }
}

Sample 4: Include properties based on view

Sometimes you want to reuse the same model object in multiple contexts, a.k.a. "views".

You can decorate the properties with the Visible attribute to define in which views they shall appear.

// will be shown only when ViewName == "List"
[Visible(ViewNames = "List")]
public string CountryName { get; set; }
// will be shown only when ViewName == "Insert" || ViewName == "Edit"
[Visible(ViewNames = "Insert | Edit")]
public int CountryId { get; set; }
// will be shown only when ViewName != "Insert" && ViewName != "Edit"
[Visible(ViewNames = "!Insert & !Edit")]
public int UserId { get; set; }

The ViewName property specifies the view name for the current context. That's why only the column for the CountryName property is displayed in the sample.

page.dothtml
ViewModel.cs

<dot:GridView DataSource="{value: Customers}">
  <auto:GridViewColumns ViewName="List" />
  
  <dot:GridViewTemplateColumn>
    <dot:RouteLink RouteName="CustomerDetail" 
                   Param-Id="{value: Id}" 
                   Text="Edit" />
  </dot:GridViewTemplateColumn>
</dot:GridView>

public class ViewModel : DotvvmViewModelBase
{
    private static IQueryable<Customer> FakeDb()
    {
        return new[]
        {
            new Customer() { Id = 0, Name = "Dani Michele", CountryName = "CZ", CountryId = 1 }, 
            new Customer() { Id = 1, Name = "Elissa Malone", CountryName = "PL", CountryId = 2 }, 
            new Customer() { Id = 2, Name = "Raine Damian", CountryName = "PL", CountryId = 2 },
            new Customer() { Id = 3, Name = "Gerrard Petra", CountryName = "DE", CountryId = 3 }, 
            new Customer() { Id = 4, Name = "Clement Ernie", CountryName = "CZ", CountryId = 1 }, 
            new Customer() { Id = 5, Name = "Rod Fred", CountryName = "DE", CountryId = 3 }
        }.AsQueryable();
    }

    public GridViewDataSet<Customer> Customers { get; set; } = new GridViewDataSet<Customer>() { PagingOptions = { PageSize = 4} };

    public override Task PreRender()
    {
        if (Customers.IsRefreshRequired)
        {
            var queryable = FakeDb();
            Customers.LoadFromQueryable(queryable);
        }
        return base.PreRender();
    }
}

public class Customer
{
    // do not show this field
    [Display(AutoGenerateField = false)]
    public int Id { get; set; }

    public string Name { get; set; }

    // will be shown only when ViewName == "List"
    [Visible(ViewNames = "List")]
    public string CountryName { get; set; }

    // will be shown only when ViewName == "Insert" || ViewName == "Edit"
    [Visible(ViewNames = "Insert | Edit")]
    public int CountryId { get; set; }
}

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
AllowSorting	Boolean		attribute inner element static value bindable default	False
CellDecorators	List<Decorator>	Gets or sets a list of decorators that will be applied on each cell which is not in the edit mode.	attribute inner element static value bindable default	null
CssClass	String		attribute inner element static value bindable default	null
DataContext	Object	Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. The DataContext is null in client-side templates.	attribute inner element static value bindable default	null
EditCellDecorators	List<Decorator>	Gets or sets a list of decorators that will be applied on each cell which is in the edit mode.	attribute inner element static value bindable default	null
EditTemplate	ITemplate		attribute inner element static value bindable default	null
ExcludeProperties	String[]	The specified properties will not be included in this form.	attribute inner element static value bindable default	[]
FilterTemplate	ITemplate		attribute inner element static value bindable default	null
GroupName	String	Gets or sets the group of fields that should be rendered. If not set, fields from all groups will be rendered.	attribute inner element static value bindable default	null
HeaderCellDecorators	List<Decorator>	Gets or sets a list of decorators that will be applied on each header cell.	attribute inner element static value bindable default	null
HeaderCssClass	String		attribute inner element static value bindable default	null
HeaderTemplate	ITemplate		attribute inner element static value bindable default	null
HeaderText	String		attribute inner element static value bindable default	null
IncludeProperties	String[]	Only the specified properties will be included in this form. Using ViewName, GroupName or ExcludedProperties at the same time as IncludedProperties does not make sense. The properties will be listed in the exact order defined in this property.	attribute inner element static value bindable default	null
IsEditable	Boolean		attribute inner element static value bindable default	True
SortAscendingHeaderCssClass	String		attribute inner element static value bindable default	sort-asc
SortDescendingHeaderCssClass	String		attribute inner element static value bindable default	sort-desc
SortExpression	String		attribute inner element static value bindable default	null
ViewName	String	Gets or sets the view name (e.g. Insert, Edit, ReadOnly). Some fields may have different metadata for each view.	attribute inner element static value bindable default	null
Visible	Boolean		attribute inner element static value bindable default	True
Width	String		attribute inner element static value bindable default	null

Edit on Github