Dotvvm Repeater nested in Repeater

Question

I like to use 2 dot:repeater(s) nested in one dothtml example :

<dot:Repeater DataSource="{value: Projects}">
    <div class="project">
        <dot:LinkButton Click="{command: _root.RedirectToTasks(Id)}">{{value: Title}}</dot:LinkButton>
        <dot:Repeater DataSource="{value: _parent.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>
    </div>
</dot:Repeater>

i try different options for the _parent. in the task part, but i don't get it working. in other frameworks it is possible to alias the main repeater example: 'DataSource="{value: Projects}" as project' and then its possible in the nested repeater to use 'DataSource="{value: project.Tasks}"' does someone know how to get this working ?

Answer 1

In the inner Repeater, you can use just {value: Tasks}, or alternatively {value: _this.Tasks}.

There is also a second caveat in the code: the RenderWrapperTag="table" is not a good idea if you don't have the tbody element. Some browsers will try to add the missing tbody and can break the DOM structure and cause the Repeater to stop working.

In general, you want to place the Repeater inside the <table> element and use RenderWrapperTag="tbody":

<table>
    <dot:Repeater DataSource="{value: Tasks}" WrapperTagName="tbody">
        <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> 
</table>