DOT

VVM

 DOCS

Version: 1.0 | 1.1 |

Repeater

in namespace DotVVM.Framework.Controls

Repeats a template for each item in the DataSource collection.

Properties

Name Type Description Notes Default Value
Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
ClientIDMode ClientIDMode Gets or sets the client ID generation algorithm.
attribute
inner element
static value
bindable
default
Static
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
DataSource Object Gets or sets the source collection or a GridViewDataSet that contains data in the control.
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
ID String Gets or sets the unique control ID.
attribute
inner element
static value
bindable
default
InnerText String Gets or sets the inner text of the HTML element.
attribute
inner element
static value
bindable
default
ItemTemplate ITemplate Gets or sets the template for each Repeater item.
attribute
inner element
static value
bindable
default
RenderWrapperTag Boolean Gets or sets whether the control should render a wrapper element.
attribute
inner element
static value
bindable
default
True
Visible Boolean Gets or sets whether the control is visible.
attribute
inner element
static value
bindable
default
True
WrapperTagName String Gets or sets the name of the tag that wraps the Repeater.
attribute
inner element
static value
bindable
default
div

Events

Name Type Description

Usage & Scenarios

Repeats a template for each item in the DataSource collection.

HTML Rendered by the Control

You can define, what tag the Repeater renders, using the WrapperTagName. The default is div:

<dot:Repeater DataSource="{value: Items}">
    <ItemTemplate>
        <p>{{value: Name}}</p>
    </ItemTemplate>
</dot:Repeater>

<!-- Client rendering mode -->
<div data-bind="foreach: ...">
    <p><span data-bind="..."></span></p>
</div>

<!-- Server rendering mode -->
<div>
    <p>Jim Hacker</p>
    <p>Humphrey Appleby</p>
    <p>Bernard Woolley</p>
</div>

The ItemTemplate is default element property and so the <ItemTemplate> element can be omitted if it's the only one inside the Repeater control.

Using the RenderWrapperTag you can turn off the wrapper tag. The Knockout comments will then be used in the client rendering mode:

<!-- ko foreach: ... -->
<p><span data-bind="..."></span></p>
<!-- /ko -->

Be careful. Knockout comment bindings don't work well if they are directly in the <table> element. Put the Repeater inside the <tbody> element and it will work.

Sample 1: Basic Repeater

The DataSource points to an IEnumerable or a GridViewDataSet object.

Inside the ItemTemplate, you can use _this to access the current data item.

<dot:Repeater DataSource="{value: Items}">
  <ItemTemplate>
    {{value: _this}}<br />
  </ItemTemplate>
</dot:Repeater>
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.builtin.Repeater.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string[] Items { get; set; } = { "First", "Second", "Third" };

    }
}

Sample 2: Wrapper Tag Customization

If you don't want to render <div>, just change the WrapperTagName property to something else. Or, set the RenderWrapperTag property to false if you don't want to render any wrapper tag.

<dot:Repeater DataSource="{value: Items}" WrapperTagName="ul">
    <ItemTemplate>
        <li>{{value: _this}}</li>
    </ItemTemplate>
</dot:Repeater>
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.builtin.Repeater.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string[] Items { get; set; } = { "First", "Second", "Third" };

    }
}

Sample 3: Real World Sample

A simple task list.

@viewModel DotvvmWeb.Views.Docs.Controls.builtin.Repeater.sample3.ViewModel, DotvvmWeb

<p>
    Create a new task: 
    <dot:TextBox Text="{value: NewTaskTitle}" /> 
    <dot:Button Text="Add" Click="{command: AddTask()}" />
</p>

<dot:Repeater DataSource="{value: Tasks}" WrapperTagName="table">
    <ItemTemplate>
        <tr>
            <td>{{value: Title}}</td>
            <td>{{value: Completed ? ("Finished: " + CompletionDate) : "Not yet"}}</td>
            <td>
                <dot:LinkButton Text="Done" 
                                Click="{command: CompleteTask()}" 
                                Visible="{value: !Completed}" />
            </td>
        </tr>
    </ItemTemplate>
</dot:Repeater>
using System;
using System.Collections.Generic;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.builtin.Repeater.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        public List<MyTask> Tasks { get; set; } = new List<MyTask>();

        public string NewTaskTitle { get; set; }

        public ViewModel()
        {
            Tasks.Add(new MyTask("Install the DotVVM VS Extension"));
            Tasks.Add(new MyTask("Create the first project"));
            Tasks.Add(new MyTask("Build your first app"));
            Tasks.Add(new MyTask("Buy Professional Edition of DotVVM VS Extension"));
        }

        public void AddTask()
        {
            Tasks.Add(new MyTask(NewTaskTitle));
            NewTaskTitle = null;
        }

    }

    public class MyTask
    {
        public string Title { get; set; }

        public bool Completed { get; set; } = false;

        public string CompletionDate { get; set; }

        public MyTask(string title)
        {
            Title = title;
        }

        public MyTask()
        {

        }

        public void CompleteTask()
        {
            Completed = true;
            CompletionDate = DateTime.Now.ToString();
        }
    }
}

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