Edit on Github

GridView

in namespace DotVVM.Framework.Controls.Bootstrap

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/3.3/css/#tables

Sample 1: Simple Bootstrap GridView

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

The only extension is the Type property which applies a Bootstrap CSS class to the table.

<bs:GridView DataSource="{value: Customers}" SortChanged="{command: SortCustomers}" Type="Bordered">
  <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>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using DotVVM.Framework.ViewModel;
using DotVVM.Framework.Controls;
using System.Threading.Tasks;
using DotVVM.Framework.Controls.Bootstrap;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.BootstrapGridView.sample1
{

    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 with Color Decorator

Sometimes, you need to apply some color to specific row.

Bootstrap for DotVVM includes several decorators you can use to add CSS classes. The ColorDecorator can apply one of the Bootstrap colors to the row.

<bs:GridView DataSource="{value: Customers}" SortChanged="{command: SortCustomers}" Type="Default">
  <RowDecorators>
    <bs:ColorDecorator Color="{value: Color}"></bs:ColorDecorator>
  </RowDecorators>
  <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>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using DotVVM.Framework.ViewModel;
using DotVVM.Framework.Controls.Bootstrap;
using DotVVM.Framework.Controls;
using System.Threading.Tasks;

namespace DotvvmWeb.Views.Docs.Controls.bootstrap.BootstrapGridView.sample2
{

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

Properties

Name Type Description Notes Default Value
property icon Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
 null
property icon ClientIDMode ClientIDMode Gets or sets the client ID generation algorithm.
attribute
inner element
static value
bindable
default
 Static
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 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.
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 which is 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 ID String Gets or sets the unique control ID.
attribute
inner element
static value
bindable
default
 null
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 InnerText String Gets or sets the inner text of the HTML element.
attribute
inner element
static value
bindable
default
 null
property icon RowDecorators List<Decorator> Gets or sets a list of decorators that will be applied on each row which is not in the ediit 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 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 Type TableType Gets or sets the style of the table.
attribute
inner element
static value
bindable
default
 Default
property icon Visible Boolean Gets or sets whether the control is visible.
attribute
inner element
static value
bindable
default
 True

HTML produced by the control