Edit on Github

GridView

in namespace DotVVM.Bootstrap5.Controls

A Bootstrap extension for the built-in GridView control.

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/5.2/content/tables/

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.Light },
            new CustomerData() { CustomerId = 3, Name = "Johnny Walker", BirthDate = DateTime.Parse("1934-01-03"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 4, Name = "Jim Hacker", BirthDate = DateTime.Parse("1912-11-04"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 5, Name = "Joe E. Brown", BirthDate = DateTime.Parse("1947-09-05"), Color = BootstrapColor.Light },
            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.Light },
            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.Light },
            new CustomerData() { CustomerId = 11, Name = "Joseph Blue", BirthDate = DateTime.Parse("1948-12-11"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 12, Name = "Jack Daniels", BirthDate = DateTime.Parse("1968-10-12"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 13, Name = "Jackie Chan", BirthDate = DateTime.Parse("1978-08-13"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 14, Name = "Jasper", BirthDate = DateTime.Parse("1934-06-14"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 15, Name = "Jumbo", BirthDate = DateTime.Parse("1965-06-15"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 16, Name = "Junkie Doodle", BirthDate = DateTime.Parse("1977-05-16"), Color = BootstrapColor.Light }
        }.AsQueryable();
    }

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

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

    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 various color themes. Use TableTheme to set color the table. If you want to set color to header only than you HeaderTheme.

<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.Light },
            new CustomerData() { CustomerId = 3, Name = "Johnny Walker", BirthDate = DateTime.Parse("1934-01-03"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 4, Name = "Jim Hacker", BirthDate = DateTime.Parse("1912-11-04"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 5, Name = "Joe E. Brown", BirthDate = DateTime.Parse("1947-09-05"), Color = BootstrapColor.Light },
            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.Light },
            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.Light },
            new CustomerData() { CustomerId = 11, Name = "Joseph Blue", BirthDate = DateTime.Parse("1948-12-11"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 12, Name = "Jack Daniels", BirthDate = DateTime.Parse("1968-10-12"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 13, Name = "Jackie Chan", BirthDate = DateTime.Parse("1978-08-13"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 14, Name = "Jasper", BirthDate = DateTime.Parse("1934-06-14"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 15, Name = "Jumbo", BirthDate = DateTime.Parse("1965-06-15"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 16, Name = "Junkie Doodle", BirthDate = DateTime.Parse("1977-05-16"), Color = BootstrapColor.Light }
        }.AsQueryable();
    }


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

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

    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 and Highlighted 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.Light },
            new CustomerData() { CustomerId = 3, Name = "Johnny Walker", BirthDate = DateTime.Parse("1934-01-03"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 4, Name = "Jim Hacker", BirthDate = DateTime.Parse("1912-11-04"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 5, Name = "Joe E. Brown", BirthDate = DateTime.Parse("1947-09-05"), Color = BootstrapColor.Light },
            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.Light },
            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.Light },
            new CustomerData() { CustomerId = 11, Name = "Joseph Blue", BirthDate = DateTime.Parse("1948-12-11"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 12, Name = "Jack Daniels", BirthDate = DateTime.Parse("1968-10-12"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 13, Name = "Jackie Chan", BirthDate = DateTime.Parse("1978-08-13"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 14, Name = "Jasper", BirthDate = DateTime.Parse("1934-06-14"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 15, Name = "Jumbo", BirthDate = DateTime.Parse("1965-06-15"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 16, Name = "Junkie Doodle", BirthDate = DateTime.Parse("1977-05-16"), Color = BootstrapColor.Light }
        }.AsQueryable();
    }


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

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

    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 MaximumScreenSizeBeforeScrollBarShows property will maximum screen size on which the horizontal scrollbar is still not visible.
Setting the property to None will cause the scrollbar to never appear.

Showing horizontal scrollbar will improve user experience when viewing wider tables on small screens.

<bs:GridView DataSource="{value: Customers}" SortChanged="{command: SortCustomers}" 
             MaximumScreenSizeBeforeScrollBarShows="Medium">
  <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.Light },
            new CustomerData() { CustomerId = 3, Name = "Johnny Walker", BirthDate = DateTime.Parse("1934-01-03"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 4, Name = "Jim Hacker", BirthDate = DateTime.Parse("1912-11-04"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 5, Name = "Joe E. Brown", BirthDate = DateTime.Parse("1947-09-05"), Color = BootstrapColor.Light },
            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.Light },
            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.Light },
            new CustomerData() { CustomerId = 11, Name = "Joseph Blue", BirthDate = DateTime.Parse("1948-12-11"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 12, Name = "Jack Daniels", BirthDate = DateTime.Parse("1968-10-12"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 13, Name = "Jackie Chan", BirthDate = DateTime.Parse("1978-08-13"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 14, Name = "Jasper", BirthDate = DateTime.Parse("1934-06-14"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 15, Name = "Jumbo", BirthDate = DateTime.Parse("1965-06-15"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 16, Name = "Junkie Doodle", BirthDate = DateTime.Parse("1977-05-16"), Color = BootstrapColor.Light }
        }.AsQueryable();
    }


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

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

    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.Light },
            new CustomerData() { CustomerId = 3, Name = "Johnny Walker", BirthDate = DateTime.Parse("1934-01-03"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 4, Name = "Jim Hacker", BirthDate = DateTime.Parse("1912-11-04"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 5, Name = "Joe E. Brown", BirthDate = DateTime.Parse("1947-09-05"), Color = BootstrapColor.Light },
            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.Light },
            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.Light },
            new CustomerData() { CustomerId = 11, Name = "Joseph Blue", BirthDate = DateTime.Parse("1948-12-11"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 12, Name = "Jack Daniels", BirthDate = DateTime.Parse("1968-10-12"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 13, Name = "Jackie Chan", BirthDate = DateTime.Parse("1978-08-13"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 14, Name = "Jasper", BirthDate = DateTime.Parse("1934-06-14"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 15, Name = "Jumbo", BirthDate = DateTime.Parse("1965-06-15"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 16, Name = "Junkie Doodle", BirthDate = DateTime.Parse("1977-05-16"), Color = BootstrapColor.Light }
        }.AsQueryable();
    }


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

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

    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 6: Table Border

The Border property allows to specify which borders would be drawn.

  • All : Borders around each cell
  • Default : Borders separating rows
  • None : No borders
<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.Light },
            new CustomerData() { CustomerId = 3, Name = "Johnny Walker", BirthDate = DateTime.Parse("1934-01-03"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 4, Name = "Jim Hacker", BirthDate = DateTime.Parse("1912-11-04"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 5, Name = "Joe E. Brown", BirthDate = DateTime.Parse("1947-09-05"), Color = BootstrapColor.Light },
            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.Light },
            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.Light },
            new CustomerData() { CustomerId = 11, Name = "Joseph Blue", BirthDate = DateTime.Parse("1948-12-11"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 12, Name = "Jack Daniels", BirthDate = DateTime.Parse("1968-10-12"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 13, Name = "Jackie Chan", BirthDate = DateTime.Parse("1978-08-13"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 14, Name = "Jasper", BirthDate = DateTime.Parse("1934-06-14"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 15, Name = "Jumbo", BirthDate = DateTime.Parse("1965-06-15"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 16, Name = "Junkie Doodle", BirthDate = DateTime.Parse("1977-05-16"), Color = BootstrapColor.Light }
        }.AsQueryable();
    }


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

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

    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 7: Captions

The Caption serves as heading for entire table. It helps users with screen readers to better understand what the table contains. The CaptionTop can set the caption on the top of the table.

<bs:GridView DataSource="{value: Customers}" SortChanged="{command: SortCustomers}" 
             Caption="Customer table" >
  <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.Light },
            new CustomerData() { CustomerId = 3, Name = "Johnny Walker", BirthDate = DateTime.Parse("1934-01-03"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 4, Name = "Jim Hacker", BirthDate = DateTime.Parse("1912-11-04"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 5, Name = "Joe E. Brown", BirthDate = DateTime.Parse("1947-09-05"), Color = BootstrapColor.Light },
            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.Light },
            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.Light },
            new CustomerData() { CustomerId = 11, Name = "Joseph Blue", BirthDate = DateTime.Parse("1948-12-11"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 12, Name = "Jack Daniels", BirthDate = DateTime.Parse("1968-10-12"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 13, Name = "Jackie Chan", BirthDate = DateTime.Parse("1978-08-13"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 14, Name = "Jasper", BirthDate = DateTime.Parse("1934-06-14"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 15, Name = "Jumbo", BirthDate = DateTime.Parse("1965-06-15"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 16, Name = "Junkie Doodle", BirthDate = DateTime.Parse("1977-05-16"), Color = BootstrapColor.Light }
        }.AsQueryable();
    }


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

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

    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 8: Alignment

Table Cells are aligned to the top by default. Use Alignment property to re-align cells in the table.

<bs:GridView DataSource="{value: Customers}" Alignment="Default">
        <Columns>
            <dot:GridViewTextColumn HeaderText="Id" ValueBinding="{value: CustomerId}" />
            <dot:GridViewTextColumn HeaderText="Name" ValueBinding="{value: Name}" />
            <dot:GridViewTextColumn HeaderText="Birth Date" ValueBinding="{value: BirthDate}" FormatString="dd.MM.yyyy" />
        </Columns>
    </bs:GridView>
    <bs:GridView DataSource="{value: Customers}" Alignment="Top">
        <Columns>
            <dot:GridViewTextColumn HeaderText="Id" ValueBinding="{value: CustomerId}" />
            <dot:GridViewTextColumn HeaderText="Name" ValueBinding="{value: Name}" />
            <dot:GridViewTextColumn HeaderText="Birth Date" ValueBinding="{value: BirthDate}" FormatString="dd.MM.yyyy" />
        </Columns>
    </bs:GridView>
    <bs:GridView DataSource="{value: Customers}" Alignment="Middle">
        <Columns>
            <dot:GridViewTextColumn HeaderText="Id" ValueBinding="{value: CustomerId}" />
            <dot:GridViewTextColumn HeaderText="Name" ValueBinding="{value: Name}" />
            <dot:GridViewTextColumn HeaderText="Birth Date" ValueBinding="{value: BirthDate}" FormatString="dd.MM.yyyy" />
        </Columns>
    </bs:GridView>
    <bs:GridView DataSource="{value: Customers}" Alignment="Bottom">
        <Columns>
            <dot:GridViewTextColumn HeaderText="Id" ValueBinding="{value: CustomerId}" />
            <dot:GridViewTextColumn HeaderText="Name" ValueBinding="{value: Name}" />
            <dot:GridViewTextColumn HeaderText="Birth Date" ValueBinding="{value: BirthDate}" FormatString="dd.MM.yyyy" />
        </Columns>
    </bs:GridView>
    <bs:GridView DataSource="{value: Customers}" Alignment="BaseLine">
        <Columns>
            <dot:GridViewTextColumn HeaderText="Id" ValueBinding="{value: CustomerId}" />
            <dot:GridViewTextColumn HeaderText="Name" ValueBinding="{value: Name}" />
            <dot:GridViewTextColumn HeaderText="Birth Date" ValueBinding="{value: BirthDate}" FormatString="dd.MM.yyyy" />
        </Columns>
    </bs:GridView>
    <bs:GridView DataSource="{value: Customers}" Alignment="TextBottom">
        <Columns>
            <dot:GridViewTextColumn HeaderText="Id" ValueBinding="{value: CustomerId}" />
            <dot:GridViewTextColumn HeaderText="Name" ValueBinding="{value: Name}" />
            <dot:GridViewTextColumn HeaderText="Birth Date" ValueBinding="{value: BirthDate}" FormatString="dd.MM.yyyy" />
        </Columns>
    </bs:GridView>
    <bs:GridView DataSource="{value: Customers}" Alignment="TextTop">
        <Columns>
            <dot:GridViewTextColumn HeaderText="Id" ValueBinding="{value: CustomerId}" />
            <dot:GridViewTextColumn HeaderText="Name" ValueBinding="{value: Name}" />
            <dot:GridViewTextColumn HeaderText="Birth Date" ValueBinding="{value: BirthDate}" FormatString="dd.MM.yyyy" />
        </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.Light },
            new CustomerData() { CustomerId = 3, Name = "Johnny Walker", BirthDate = DateTime.Parse("1934-01-03"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 4, Name = "Jim Hacker", BirthDate = DateTime.Parse("1912-11-04"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 5, Name = "Joe E. Brown", BirthDate = DateTime.Parse("1947-09-05"), Color = BootstrapColor.Light },
            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.Light },
            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.Light },
            new CustomerData() { CustomerId = 11, Name = "Joseph Blue", BirthDate = DateTime.Parse("1948-12-11"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 12, Name = "Jack Daniels", BirthDate = DateTime.Parse("1968-10-12"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 13, Name = "Jackie Chan", BirthDate = DateTime.Parse("1978-08-13"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 14, Name = "Jasper", BirthDate = DateTime.Parse("1934-06-14"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 15, Name = "Jumbo", BirthDate = DateTime.Parse("1965-06-15"), Color = BootstrapColor.Light },
            new CustomerData() { CustomerId = 16, Name = "Junkie Doodle", BirthDate = DateTime.Parse("1977-05-16"), Color = BootstrapColor.Light }
        }.AsQueryable();
    }


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

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

    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; }
}

Properties

Name Type Description Notes Default Value
property icon Alignment BootstrapTableAlign Gets or sets the cells alignment.
attribute
inner element
static value
bindable
default
 Default
property icon Border BootstrapTableBorder Gets or sets the style of table border.
attribute
inner element
static value
bindable
default
 Default
property icon Caption String Gets or sets the caption of the GridView.
attribute
inner element
static value
bindable
default
 null
property icon CaptionTop Boolean Gets or sets whether the capture should be placed above the table.
attribute
inner element
static value
bindable
default
 False
property icon Columns List<GridViewColumn> Gets or sets a collection of columns that will be placed inside the grid.
attribute
inner element
static value
bindable
default
 null
property icon DataSource Object Gets or sets the source collection or a GridViewDataSet that contains data in the control.
attribute
inner element
static value
bindable
default
 null
property icon 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
 null
property icon EmptyDataTemplate ITemplate Gets or sets the template which will be displayed when the DataSource is empty.
attribute
inner element
static value
bindable
default
 null
property icon FilterPlacement GridViewFilterPlacement Gets or sets the place where the filters will be created.
attribute
inner element
static value
bindable
default
 HeaderRow
property icon HasStripedRows Boolean Gets or sets whether rows have alternating colors.
attribute
inner element
static value
bindable
default
 False
property icon HeaderRowDecorators List<Decorator> Gets or sets a list of decorators that will be applied on the header row.
attribute
inner element
static value
bindable
default
 null
property icon HeaderTheme BootstrapTableHeaderTheme Gets or sets the template color of the GridView header.
attribute
inner element
static value
bindable
default
 Default
property icon HighlightRowOnHover Boolean Gets or sets whether row should be highlighted on hover.
attribute
inner element
static value
bindable
default
 False
property icon 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
property icon MaximumScreenSizeBeforeScrollBarShows ResponsiveBreakpoints Gets or sets the maximum screen size on which the horizontal scrollbar is still not visible. Setting the property to None will cause the scrollbar to never appear.
attribute
inner element
static value
bindable
default
 None
property icon 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
 null
property icon 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
property icon Size BootstrapTableSize Gets or sets table size
attribute
inner element
static value
bindable
default
 Default
property icon 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
 null
property icon TableTheme BootstrapTableTheme Gets or sets the template color of the GridView.
attribute
inner element
static value
bindable
default
 Default

HTML produced by the control

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Edit options

Information about cookies

We use cookies to analyze our traffic, personalize content and ads, and to provide some social media features. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services.

Choose which cookies you want to enable

Necessary cookies Always allowed

Necessary cookies are essential and maintain information based on your activity on our site, like remembering your signed in account, selection of your language, or products added to the shopping cart. The website cannot work properly without these cookies.

Google Analytics

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Google Inc.

Google Ads

We use these cookies to measure conversions from our advertisement and banners distributed via Google Ads. This allows us to better target the ads and make them more relevant to you.

Facebook Pixel

We use these cookies to measure conversions from our advertisement and banners distributed via Facebook. This allows us to better target the ads and make them more relevant to you.

Smartlook

We use these cookies to measure, collect, analyse and report how users interact with our sites to better understand their behavior. Thanks to this, we can improve the site and provide better experience. The analytics service is provided by Smartlook.

Google ads user data

Google ads ad personalization