GridView

in namespace DotVVM.Controls.Tailwind.Controls

Styled GridView control.

Usage & Scenarios

Inherits the built-in GridView and applies the Tailwind table styling. All columns, sorting, paging, templates, and empty-state features work the same as on the built-in control.

Sample 1: Sorting and Template Columns

The Tailwind GridView uses the same API as the built-in GridView. This sample shows sortable text columns, a template column, and an empty-data template.

<t:GridView DataSource="{value: Customers}">
    <Columns>
        <dot:GridViewTextColumn HeaderText="ID" ValueBinding="{value: Id}" AllowSorting="true" SortExpression="Id" />
        <dot:GridViewTextColumn HeaderText="Name" ValueBinding="{value: Name}" AllowSorting="true" SortExpression="Name" />
        <dot:GridViewTextColumn HeaderText="Department" ValueBinding="{value: Department}" AllowSorting="true" SortExpression="Department" />
        <dot:GridViewTemplateColumn HeaderText="Actions">
            <ContentTemplate>
                <t:Button Type="Primary" Text="Select" Click="{command: _root.SelectCustomer(_this)}" />
            </ContentTemplate>
        </dot:GridViewTemplateColumn>
    </Columns>
    <EmptyDataTemplate>
        <p>No customers are available.</p>
    </EmptyDataTemplate>
</t:GridView>

<p>Selected customer: {{value: SelectedCustomerName}}</p>
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using DotVVM.Framework.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.tailwind.GridView.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string SelectedCustomerName { get; set; } = "(none)";

        public GridViewDataSet<CustomerDto> Customers { get; set; } = new GridViewDataSet<CustomerDto>()
        {
            PagingOptions = { PageSize = 4 },
            SortingOptions = { SortExpression = nameof(CustomerDto.Name) }
        };

        public override Task PreRender()
        {
            if (Customers.IsRefreshRequired)
            {
                Customers.LoadFromQueryable(GetCustomers().AsQueryable());
            }

            return base.PreRender();
        }

        public void SelectCustomer(CustomerDto customer)
        {
            SelectedCustomerName = customer.Name;
        }

        private static List<CustomerDto> GetCustomers()
        {
            return new List<CustomerDto>
            {
                new CustomerDto { Id = 1, Name = "Alice Johnson", Department = "Engineering" },
                new CustomerDto { Id = 2, Name = "Bob Smith", Department = "Design" },
                new CustomerDto { Id = 3, Name = "Carol White", Department = "QA" },
                new CustomerDto { Id = 4, Name = "David Brown", Department = "Product" },
                new CustomerDto { Id = 5, Name = "Eva Green", Department = "Support" },
                new CustomerDto { Id = 6, Name = "Frank Miller", Department = "Sales" }
            };
        }
    }

    public class CustomerDto
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public string Department { get; set; }
    }
}

Properties

Name Type Description Notes Default Value
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 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 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 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 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

Events

Name Type Description
event icon LoadData ICommandBinding

HTML produced by the control