A "CardGrid" or a way to wrap a list of Cards in a CardDeck?

[sturlath]

Ok this might not even be a Blazorise question but I´m adding anyways if I might be missing a component or if this might get to be included in a future version (CardGrid).

So what am I trying to do? I´m trying to display a list of Cards in x-columns and y-rows. The list varies in length.

Something like this

Here is the hack I got so far. But I can´t wrap the Cards with CardDeck.

@for (int i = 1; i < ListOfCards.Count; i++)
{
    if (counter == 0)
    {
        <CardDeck>
        counter++;
    }

    <Card Margin="Margin.Is4.FromBottom">
        <CardImage Source="assets/images/2.jpg" Alt="Placeholder image">
        </CardImage>
        <CardBody>
            <CardTitle Size="5">Card title</CardTitle>
            <CardText>
                Some text
            </CardText>
            <CardText>
                <small class="text-muted">Last updated 1 mins ago</small>
            </CardText>
        </CardBody>
    </Card>

    /* But this here just renders as text */
    if (counter == 4)
    {
        </CardDeck>
        counter = 0
    }
}

@code {
    int counter = 0;
}

I also tried MarkupString but that doesn´t work at all...

@for (int i = 1; i <= ListOfCards.Count; i++)
{
    if (counter == 0)
    {
        @((MarkupString)openCardDeck)
        counter++;
    }

    <Card Margin="Margin.Is4.FromBottom">
        <CardImage Source="assets/images/2.jpg" Alt="Placeholder image">
        </CardImage>
        <CardBody>
            <CardTitle Size="5">Card title</CardTitle>
            <CardText>
                Some text
            </CardText>
            <CardText>
                <small class="text-muted">Last updated 1 mins ago</small>
            </CardText>
        </CardBody>
    </Card>

    if (counter == 4 )
    {
        @((MarkupString)closeCardDeck)
        counter = 0;
    }
}

@code {
    int counter = 0;
    string openCardDeck = "<CardDeck>";
    string closeCardDeck = "</CardDeck>";
}

I just get both <cardDeck> and </cardDeck> to show up once even though I have in my case 9 items in ListOfCards.

But I know that even though I could have gotten <cardDeck> wrapped around the Cards, that would not have worked either... just showing that I have tried a lot...

I also tried to do this with a DataGrid so I could hopefully use the inbuilt functionality like paging etc. but did get it to work. I only get one card per row (like I expected).

<DataGrid TItem="CardDto" Data="@ListOfCards">
    <DataGridNumericColumn TItem="CardDto" Field="@nameof(CardDto.Name)" Caption="Name" Editable="false">
        <DisplayTemplate>
            <Card Margin="Margin.Is4.FromBottom">
                <CardImage Source="assets/images/2.jpg" Alt="Placeholder image">
                </CardImage>
                <CardBody>
                    <CardTitle Size="5">Card title</CardTitle>
                    <CardText>
                        @(context as CardDto)?.Name
                    </CardText>
                    <CardText>
                        <small class="text-muted">Last updated 1 mins ago</small>
                    </CardText>
                </CardBody>
            </Card>
        </DisplayTemplate>
    </DataGridNumericColumn>
</DataGrid>

I feel like I might be going about this the wrong way but I just can't put my finger on it.

Sorry for the length of this issue but maybe it will help somebody else down the road.

[stsrki]

Made it work

@{
    var rows = (int)( Math.Ceiling( ListOfCards.Count() / (float)CardsPerRow ) );

    @for ( int row = 0; row < rows; row++ )
    {
        var rowIndex = row; // for some reason it doesn't work without this

        <CardDeck>
            @foreach ( var card in ListOfCards.Skip( rowIndex * CardsPerRow ).Take( CardsPerRow ) )
            {
                var index = ListOfCards.IndexOf( card ) + 1;

                <Card Margin="Margin.Is4.FromBottom">
                    <CardImage Source="assets/images/2.jpg" Alt="Placeholder image">
                    </CardImage>
                    <CardBody>
                        <CardTitle Size="5">Card title @index</CardTitle>
                        <CardText>
                            Some text
                        </CardText>
                        <CardText>
                            <small class="text-muted">Last updated 1 mins ago</small>
                        </CardText>
                    </CardBody>
                </Card>
            }
        </CardDeck>
    }
}
@code {
    List<int> ListOfCards = Enumerable.Range( 1, 16 ).ToList();
    int CardsPerRow = 3;
}

[sturlath]

You are a genius! Thank you so much!