creating a table using two document types 1 for main row 1 for hidden sub row - Using Umbraco and getting started

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Matthew 3 posts 83 karma points

Jul 05, 2017 @ 10:39

Creating a table using two document types: 1 for main row. 1 for hidden sub-row

I'm creating a table on a webpage which is for sports results. So a simple table with 2 teams and the score.

ie. France 2 - 2 Germany

This is setup as an eventMatch document type with teamName properties etc.

What I want to be able to do, is when you click on a match result a hidden row beneath it becomes visible and it displays statistics from the match which are in a Child document type (matchStatistics) of the eventMatch

This is some of what I have so far:

@{ var Homepage = CurrentPage.AncestorsOrSelf(1).FirstOrDefault();

var pageSize = 20;
if (Model.Content.HasValue("numberOfItemsPerPage"))
{
    pageSize = Model.Content.GetPropertyValue<int>("numberOfItemsPerPage");
}

var pageItems = Homepage.Descendants("eventMatch");
var page = 1; int.TryParse(Request.QueryString["page"], out page);
var totalPages = (int)Math.Ceiling((double)pageItems.Count() / (double)pageSize);

if (page > totalPages)
{
    page = totalPages;
}
else if (page < 1)
{
    page = 1;
}

}

                <script>
                    function toggleRow(e) {
                        var subRow = e.parentNode.parentNode.nextElementSibling;
                        subRow.style.display = subRow.style.display === 'none' ? 'table-row' : 'none';
                    }
                </script>

                <table class="table-resultsData" cellspacing="0" cellpadding="0">
                    <colgroup>
                        <col style="width:3%;">
                        <col style="width:20%;">
                        <col style="width:6%;">
                        <col style="width:3%;">
                        <col style="width:6%;">
                        <col style="width:27%;">
                    </colgroup>

                    <tr>
                        <th></th>
                        <th class="rightCell"><span class="teamOne">Team 1</span></th>
                        <th class="teamOneScore"></th>
                        <th class="vs centreCell">v</th>
                        <th class="teamTwoScore"></th>
                        <th class="teamTwo">Team 2</th>

                    </tr>

                    @foreach (var item in pageItems.Skip((page - 1) * pageSize).Take(pageSize))
                    {
                        <tr>
                            <td id="statistics">
                                <a href="#" onclick="toggleRow(this);">Click</a>
                            </td>
                            <td class="rightCell">
                                <span class="teamOne">
                                    <span class="teamName">@item.matchTeamOne</span>
                                </span>
                            </td>
                            <td class="rightCell">
                                <span class="teamOneScore">@item.matchTeamOneScore</span>
                            </td>
                            <td class="centreCell">
                                <span class="vs">-</span>
                            </td>
                            <td class="leftCell">
                                <span class="teamTwoScore">@item.matchTeamTwoScore</span>
                            </td>
                            <td class="leftCell">
                                <span class="teamTwo">
                                    <span class="teamName">@item.matchTeamTwo</span>
                                </span>
                            </td>
                        </tr>
                        <tr style="display: none;" class="subRow">
                            <td colspan="6"><p>Lorem ipsum dolor sit amet...</p></td>
                        </tr>

                    }

                </table>

This is the output so far. I have some fake results in to show as an example and the grey row is the hidden row where I'd like the statistics to come up.