Version: 2.0 |

GridView

in namespace DotVVM.Framework.Controls.Bootstrap4

A Bootstrap extension for the built-in GridView control.

Properties

Name Type Description Notes Default Value
Border BoostrapTableBorder Gets or sets the style of table border.
attribute
inner element
static value
bindable
default
Default
Columns List<GridViewColumn> Gets or sets a collection of columns that will be placed inside the grid.
attribute
inner element
static value
bindable
default
DataSource Object Gets or sets the source collection or a GridViewDataSet that contains data in the control.
attribute
inner element
static value
bindable
default
EditRowDecorators List<Decorator> Gets or sets a list of decorators that will be applied on each row in edit mode.
attribute
inner element
static value
bindable
default
EmptyDataTemplate ITemplate Gets or sets the template which will be displayed when the DataSource is empty.
attribute
inner element
static value
bindable
default
FilterPlacement GridViewFilterPlacement Gets or sets the place where the filters will be created.
attribute
inner element
static value
bindable
default
HeaderRow
HasStripedRows Boolean Gets or sets whether rows have alternating colors.
attribute
inner element
static value
bindable
default
False
HeaderTheme BootstrapTableHeaderTheme Gets or sets the template color of the GridView header.
attribute
inner element
static value
bindable
default
Default
HighlightRowOnHover Boolean Gets or sets whether row should be highlighted on hover.
attribute
inner element
static value
bindable
default
False
InlineEditing Boolean Gets or sets whether the inline editing is allowed in the Grid. If so, you have to use a GridViewDataSet as the DataSource.
attribute
inner element
static value
bindable
default
False
IsResponsive Boolean Gets or sets whether table is responsive.
attribute
inner element
static value
bindable
default
False
RowDecorators List<Decorator> Gets or sets a list of decorators that will be applied on each row which is not in the edit mode.
attribute
inner element
static value
bindable
default
ShowHeaderWhenNoData Boolean Gets or sets whether the header row should be displayed when the grid is empty.
attribute
inner element
static value
bindable
default
False
Size BoostrapTableSize Gets or sets table size
attribute
inner element
static value
bindable
default
Default
SortChanged Action<String> Gets or sets the command that will be triggered when the user changed the sort order.
attribute
inner element
static value
bindable
default
TableTheme BoostrapTableTheme Gets or sets the template color of the GridView.
attribute
inner element
static value
bindable
default
Default

Events

Name Type Description

Usage & Scenarios

A Bootstrap extension for the built-in GridView control which allows to apply Bootstrap table classes on the table.

https://getbootstrap.com/docs/4.1/content/tables/

HTML Rendered by the Control

Sample 1: Simple Bootstrap GridView

The usage is the same as the built-in GridView control.

You can specify whether the table should have borders using the Border property - the values are Default, None or All.

<bs:GridView DataSource="{value: Customers}" SortChanged="{command: SortCustomers}" 
             Border="All">
  <Columns>
    <dot:GridViewTextColumn HeaderText="Id" ValueBinding="{value: CustomerId}" AllowSorting="True" />
    <dot:GridViewTextColumn HeaderText="Name" ValueBinding="{value: Name}" AllowSorting="True" />
    <dot:GridViewTextColumn HeaderText="Birth Date" ValueBinding="{value: BirthDate}" FormatString="g" AllowSorting="True" />
  </Columns>
</bs:GridView>
public class ViewModel : DotvvmViewModelBase
{
    private static IQueryable<CustomerData> FakeDb()
    {
        return new[]
        {
            new CustomerData() { CustomerId = 1, Name = "John Doe", BirthDate = DateTime.Parse("1976-04-01"), Color = BootstrapColor.Danger },
            new CustomerData() { CustomerId = 2, Name = "John Deer", BirthDate = DateTime.Parse("1984-03-02"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 3, Name = "Johnny Walker", BirthDate = DateTime.Parse("1934-01-03"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 4, Name = "Jim Hacker", BirthDate = DateTime.Parse("1912-11-04"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 5, Name = "Joe E. Brown", BirthDate = DateTime.Parse("1947-09-05"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 6, Name = "Jim Harris", BirthDate = DateTime.Parse("1956-07-06"), Color = BootstrapColor.Warning },
            new CustomerData() { CustomerId = 7, Name = "J. P. Morgan", BirthDate = DateTime.Parse("1969-05-07"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 8, Name = "J. R. Ewing", BirthDate = DateTime.Parse("1987-03-08"), Color = BootstrapColor.Warning },
            new CustomerData() { CustomerId = 9, Name = "Jeremy Clarkson", BirthDate = DateTime.Parse("1994-04-09"), Color = BootstrapColor.Danger },
            new CustomerData() { CustomerId = 10, Name = "Jenny Green", BirthDate = DateTime.Parse("1947-02-10"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 11, Name = "Joseph Blue", BirthDate = DateTime.Parse("1948-12-11"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 12, Name = "Jack Daniels", BirthDate = DateTime.Parse("1968-10-12"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 13, Name = "Jackie Chan", BirthDate = DateTime.Parse("1978-08-13"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 14, Name = "Jasper", BirthDate = DateTime.Parse("1934-06-14"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 15, Name = "Jumbo", BirthDate = DateTime.Parse("1965-06-15"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 16, Name = "Junkie Doodle", BirthDate = DateTime.Parse("1977-05-16"), Color = BootstrapColor.Default }
        }.AsQueryable();
    }

    private GridViewDataSetLoadedData<CustomerData> GetData(IGridViewDataSetLoadOptions gridViewDataSetLoadOptions)
    {
        var queryable = FakeDb();
        // NOTE: Apply Pagign and Sorting options.
        return queryable.GetDataFromQueryable(gridViewDataSetLoadOptions);
    }

    public GridViewDataSet<CustomerData> Customers { get; set; }

    public override Task Init()
    {
        Customers = new GridViewDataSet<CustomerData>()
        {
            OnLoadingData = GetData
        };

        return base.Init();
    }

    public void SortCustomers(string column)
    {
        Customers.SetSortExpression(column);
    }

}

public class CustomerData
{
    public int CustomerId { get; set; }

    public string Name { get; set; }

    public DateTime BirthDate { get; set; }

    public BootstrapColor Color { get; set; }
}

Sample 2: GridView Themes

The table body and header can use light or dark themes. Use the TableTheme and HeaderTheme to choose between Default, Light or Dark theme.

<bs:GridView DataSource="{value: Customers}" SortChanged="{command: SortCustomers}" 
             TableTheme="Dark" HeaderTheme="Dark">
  <Columns>
    <dot:GridViewTextColumn HeaderText="Id" ValueBinding="{value: CustomerId}" AllowSorting="True" />
    <dot:GridViewTextColumn HeaderText="Name" ValueBinding="{value: Name}" AllowSorting="True" />
    <dot:GridViewTextColumn HeaderText="Birth Date" ValueBinding="{value: BirthDate}" FormatString="g" AllowSorting="True" />
  </Columns>
</bs:GridView>
public class ViewModel : DotvvmViewModelBase
{
    private static IQueryable<CustomerData> FakeDb()
    {
        return new[]
        {
            new CustomerData() { CustomerId = 1, Name = "John Doe", BirthDate = DateTime.Parse("1976-04-01"), Color = BootstrapColor.Danger },
            new CustomerData() { CustomerId = 2, Name = "John Deer", BirthDate = DateTime.Parse("1984-03-02"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 3, Name = "Johnny Walker", BirthDate = DateTime.Parse("1934-01-03"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 4, Name = "Jim Hacker", BirthDate = DateTime.Parse("1912-11-04"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 5, Name = "Joe E. Brown", BirthDate = DateTime.Parse("1947-09-05"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 6, Name = "Jim Harris", BirthDate = DateTime.Parse("1956-07-06"), Color = BootstrapColor.Warning },
            new CustomerData() { CustomerId = 7, Name = "J. P. Morgan", BirthDate = DateTime.Parse("1969-05-07"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 8, Name = "J. R. Ewing", BirthDate = DateTime.Parse("1987-03-08"), Color = BootstrapColor.Warning },
            new CustomerData() { CustomerId = 9, Name = "Jeremy Clarkson", BirthDate = DateTime.Parse("1994-04-09"), Color = BootstrapColor.Danger },
            new CustomerData() { CustomerId = 10, Name = "Jenny Green", BirthDate = DateTime.Parse("1947-02-10"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 11, Name = "Joseph Blue", BirthDate = DateTime.Parse("1948-12-11"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 12, Name = "Jack Daniels", BirthDate = DateTime.Parse("1968-10-12"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 13, Name = "Jackie Chan", BirthDate = DateTime.Parse("1978-08-13"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 14, Name = "Jasper", BirthDate = DateTime.Parse("1934-06-14"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 15, Name = "Jumbo", BirthDate = DateTime.Parse("1965-06-15"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 16, Name = "Junkie Doodle", BirthDate = DateTime.Parse("1977-05-16"), Color = BootstrapColor.Default }
        }.AsQueryable();
    }

    private GridViewDataSetLoadedData<CustomerData> GetData(IGridViewDataSetLoadOptions gridViewDataSetLoadOptions)
    {
        var queryable = FakeDb();
        // NOTE: Apply Pagign and Sorting options.
        return queryable.GetDataFromQueryable(gridViewDataSetLoadOptions);
    }

    public GridViewDataSet<CustomerData> Customers { get; set; }

    public override Task Init()
    {
        Customers = new GridViewDataSet<CustomerData>()
        {
            OnLoadingData = GetData
        };

        return base.Init();
    }

    public void SortCustomers(string column)
    {
        Customers.SetSortExpression(column);
    }

}

public class CustomerData
{
    public int CustomerId { get; set; }

    public string Name { get; set; }

    public DateTime BirthDate { get; set; }

    public BootstrapColor Color { get; set; }
}

Sample 3: Striped Rows

The HasStripedRows property can make the rows to use dual colors.

The HighlightRowOnHover property will change the row color when the mouse cursor is over.

<bs:GridView DataSource="{value: Customers}" SortChanged="{command: SortCustomers}" 
             HasStripedRows="true" HighlightRowOnHover="true">
  <Columns>
    <dot:GridViewTextColumn HeaderText="Id" ValueBinding="{value: CustomerId}" AllowSorting="True" />
    <dot:GridViewTextColumn HeaderText="Name" ValueBinding="{value: Name}" AllowSorting="True" />
    <dot:GridViewTextColumn HeaderText="Birth Date" ValueBinding="{value: BirthDate}" FormatString="g" AllowSorting="True" />
  </Columns>
</bs:GridView>
public class ViewModel : DotvvmViewModelBase
{
    private static IQueryable<CustomerData> FakeDb()
    {
        return new[]
        {
            new CustomerData() { CustomerId = 1, Name = "John Doe", BirthDate = DateTime.Parse("1976-04-01"), Color = BootstrapColor.Danger },
            new CustomerData() { CustomerId = 2, Name = "John Deer", BirthDate = DateTime.Parse("1984-03-02"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 3, Name = "Johnny Walker", BirthDate = DateTime.Parse("1934-01-03"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 4, Name = "Jim Hacker", BirthDate = DateTime.Parse("1912-11-04"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 5, Name = "Joe E. Brown", BirthDate = DateTime.Parse("1947-09-05"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 6, Name = "Jim Harris", BirthDate = DateTime.Parse("1956-07-06"), Color = BootstrapColor.Warning },
            new CustomerData() { CustomerId = 7, Name = "J. P. Morgan", BirthDate = DateTime.Parse("1969-05-07"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 8, Name = "J. R. Ewing", BirthDate = DateTime.Parse("1987-03-08"), Color = BootstrapColor.Warning },
            new CustomerData() { CustomerId = 9, Name = "Jeremy Clarkson", BirthDate = DateTime.Parse("1994-04-09"), Color = BootstrapColor.Danger },
            new CustomerData() { CustomerId = 10, Name = "Jenny Green", BirthDate = DateTime.Parse("1947-02-10"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 11, Name = "Joseph Blue", BirthDate = DateTime.Parse("1948-12-11"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 12, Name = "Jack Daniels", BirthDate = DateTime.Parse("1968-10-12"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 13, Name = "Jackie Chan", BirthDate = DateTime.Parse("1978-08-13"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 14, Name = "Jasper", BirthDate = DateTime.Parse("1934-06-14"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 15, Name = "Jumbo", BirthDate = DateTime.Parse("1965-06-15"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 16, Name = "Junkie Doodle", BirthDate = DateTime.Parse("1977-05-16"), Color = BootstrapColor.Default }
        }.AsQueryable();
    }

    private GridViewDataSetLoadedData<CustomerData> GetData(IGridViewDataSetLoadOptions gridViewDataSetLoadOptions)
    {
        var queryable = FakeDb();
        // NOTE: Apply Pagign and Sorting options.
        return queryable.GetDataFromQueryable(gridViewDataSetLoadOptions);
    }

    public GridViewDataSet<CustomerData> Customers { get; set; }

    public override Task Init()
    {
        Customers = new GridViewDataSet<CustomerData>()
        {
            OnLoadingData = GetData
        };

        return base.Init();
    }

    public void SortCustomers(string column)
    {
        Customers.SetSortExpression(column);
    }

}

public class CustomerData
{
    public int CustomerId { get; set; }

    public string Name { get; set; }

    public DateTime BirthDate { get; set; }

    public BootstrapColor Color { get; set; }
}

Sample 4: Responsive Table

The IsResponsive property will cause the table to use horizontal scrollbar on small screen sizes.

<bs:GridView DataSource="{value: Customers}" SortChanged="{command: SortCustomers}" 
             IsResponsive="true">
  <Columns>
    <dot:GridViewTextColumn HeaderText="Id" ValueBinding="{value: CustomerId}" AllowSorting="True" />
    <dot:GridViewTextColumn HeaderText="Name" ValueBinding="{value: Name}" AllowSorting="True" />
    <dot:GridViewTextColumn HeaderText="Birth Date" ValueBinding="{value: BirthDate}" FormatString="g" AllowSorting="True" />
  </Columns>
</bs:GridView>
public class ViewModel : DotvvmViewModelBase
{
    private static IQueryable<CustomerData> FakeDb()
    {
        return new[]
        {
            new CustomerData() { CustomerId = 1, Name = "John Doe", BirthDate = DateTime.Parse("1976-04-01"), Color = BootstrapColor.Danger },
            new CustomerData() { CustomerId = 2, Name = "John Deer", BirthDate = DateTime.Parse("1984-03-02"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 3, Name = "Johnny Walker", BirthDate = DateTime.Parse("1934-01-03"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 4, Name = "Jim Hacker", BirthDate = DateTime.Parse("1912-11-04"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 5, Name = "Joe E. Brown", BirthDate = DateTime.Parse("1947-09-05"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 6, Name = "Jim Harris", BirthDate = DateTime.Parse("1956-07-06"), Color = BootstrapColor.Warning },
            new CustomerData() { CustomerId = 7, Name = "J. P. Morgan", BirthDate = DateTime.Parse("1969-05-07"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 8, Name = "J. R. Ewing", BirthDate = DateTime.Parse("1987-03-08"), Color = BootstrapColor.Warning },
            new CustomerData() { CustomerId = 9, Name = "Jeremy Clarkson", BirthDate = DateTime.Parse("1994-04-09"), Color = BootstrapColor.Danger },
            new CustomerData() { CustomerId = 10, Name = "Jenny Green", BirthDate = DateTime.Parse("1947-02-10"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 11, Name = "Joseph Blue", BirthDate = DateTime.Parse("1948-12-11"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 12, Name = "Jack Daniels", BirthDate = DateTime.Parse("1968-10-12"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 13, Name = "Jackie Chan", BirthDate = DateTime.Parse("1978-08-13"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 14, Name = "Jasper", BirthDate = DateTime.Parse("1934-06-14"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 15, Name = "Jumbo", BirthDate = DateTime.Parse("1965-06-15"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 16, Name = "Junkie Doodle", BirthDate = DateTime.Parse("1977-05-16"), Color = BootstrapColor.Default }
        }.AsQueryable();
    }

    private GridViewDataSetLoadedData<CustomerData> GetData(IGridViewDataSetLoadOptions gridViewDataSetLoadOptions)
    {
        var queryable = FakeDb();
        // NOTE: Apply Pagign and Sorting options.
        return queryable.GetDataFromQueryable(gridViewDataSetLoadOptions);
    }

    public GridViewDataSet<CustomerData> Customers { get; set; }

    public override Task Init()
    {
        Customers = new GridViewDataSet<CustomerData>()
        {
            OnLoadingData = GetData
        };

        return base.Init();
    }

    public void SortCustomers(string column)
    {
        Customers.SetSortExpression(column);
    }

}

public class CustomerData
{
    public int CustomerId { get; set; }

    public string Name { get; set; }

    public DateTime BirthDate { get; set; }

    public BootstrapColor Color { get; set; }
}

Sample 5: Table Size

The Size property allows to specify the size of the table - Default or Small.

<bs:GridView DataSource="{value: Customers}" SortChanged="{command: SortCustomers}" 
             Size="Small">
  <Columns>
    <dot:GridViewTextColumn HeaderText="Id" ValueBinding="{value: CustomerId}" AllowSorting="True" />
    <dot:GridViewTextColumn HeaderText="Name" ValueBinding="{value: Name}" AllowSorting="True" />
    <dot:GridViewTextColumn HeaderText="Birth Date" ValueBinding="{value: BirthDate}" FormatString="g" AllowSorting="True" />
  </Columns>
</bs:GridView>
public class ViewModel : DotvvmViewModelBase
{
    private static IQueryable<CustomerData> FakeDb()
    {
        return new[]
        {
            new CustomerData() { CustomerId = 1, Name = "John Doe", BirthDate = DateTime.Parse("1976-04-01"), Color = BootstrapColor.Danger },
            new CustomerData() { CustomerId = 2, Name = "John Deer", BirthDate = DateTime.Parse("1984-03-02"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 3, Name = "Johnny Walker", BirthDate = DateTime.Parse("1934-01-03"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 4, Name = "Jim Hacker", BirthDate = DateTime.Parse("1912-11-04"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 5, Name = "Joe E. Brown", BirthDate = DateTime.Parse("1947-09-05"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 6, Name = "Jim Harris", BirthDate = DateTime.Parse("1956-07-06"), Color = BootstrapColor.Warning },
            new CustomerData() { CustomerId = 7, Name = "J. P. Morgan", BirthDate = DateTime.Parse("1969-05-07"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 8, Name = "J. R. Ewing", BirthDate = DateTime.Parse("1987-03-08"), Color = BootstrapColor.Warning },
            new CustomerData() { CustomerId = 9, Name = "Jeremy Clarkson", BirthDate = DateTime.Parse("1994-04-09"), Color = BootstrapColor.Danger },
            new CustomerData() { CustomerId = 10, Name = "Jenny Green", BirthDate = DateTime.Parse("1947-02-10"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 11, Name = "Joseph Blue", BirthDate = DateTime.Parse("1948-12-11"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 12, Name = "Jack Daniels", BirthDate = DateTime.Parse("1968-10-12"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 13, Name = "Jackie Chan", BirthDate = DateTime.Parse("1978-08-13"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 14, Name = "Jasper", BirthDate = DateTime.Parse("1934-06-14"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 15, Name = "Jumbo", BirthDate = DateTime.Parse("1965-06-15"), Color = BootstrapColor.Default },
            new CustomerData() { CustomerId = 16, Name = "Junkie Doodle", BirthDate = DateTime.Parse("1977-05-16"), Color = BootstrapColor.Default }
        }.AsQueryable();
    }

    private GridViewDataSetLoadedData<CustomerData> GetData(IGridViewDataSetLoadOptions gridViewDataSetLoadOptions)
    {
        var queryable = FakeDb();
        // NOTE: Apply Pagign and Sorting options.
        return queryable.GetDataFromQueryable(gridViewDataSetLoadOptions);
    }

    public GridViewDataSet<CustomerData> Customers { get; set; }

    public override Task Init()
    {
        Customers = new GridViewDataSet<CustomerData>()
        {
            OnLoadingData = GetData
        };

        return base.Init();
    }

    public void SortCustomers(string column)
    {
        Customers.SetSortExpression(column);
    }

}

public class CustomerData
{
    public int CustomerId { get; set; }

    public string Name { get; set; }

    public DateTime BirthDate { get; set; }

    public BootstrapColor Color { get; set; }
}

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message