Horizontal scrolling of Cards from DataList

I'm trying to implement horizontal scrolling of the cards as listed here: https://codepen.io/Temmio/pen/gKGEYV

The above example shows a number of cards, created in design-time.
I want to use the RadzenDataList to generate the cards.
But I can't get it to work because RadzenDataList is generating additional divs with classes.

How to fix this?

This is working:

       <div class="scrolling-wrapper row flex-row flex-nowrap mt-4 pb-4">
            <div class="col-5">
                <div class="card card-block">
                    Bla bla
                </div>
            </div>
            <div class="col-5">
                <div class="card card-block">
                    Bla bla
                </div>
            </div>
            <div class="col-5">
                <div class="card card-block">
                    Bla bla
                </div>
            </div>
            <div class="col-5">
                <div class="card card-block">
                    Bla bla
                </div>
            </div>
            <div class="col-5">
                <div class="card card-block">
                    Bla bla
                </div>
            </div>
            <div class="col-5">
                <div class="card card-block">
                    Bla bla
                </div>
            </div>
            <div class="col-5">
                <div class="card card-block">
                    Bla bla
                </div>
            </div>
        </div>

This is not:

        <div class="scrolling-wrapper row flex-row flex-nowrap mt-4 pb-4">
            <RadzenDataList PageSize="6" WrapItems="true" AllowPaging="true" Data="@getClients" TItem="Entities.Client">
                <Template Context="client">
                    <div class="col-5">
                        <div class="card card-block">
                            Bla bla
                        </div>
                    </div>
                </Template>
            </RadzenDataList>
        </div>

image

Perhaps I should not use RadzenDataList but another component?

Maybe you can use simple for loop instead DataList

You're right. A simple foreach solves my problem :blush: