Datalist AllowVirtualization adds cards on each side

cscastilloliva90 · May 6, 2023, 10:48pm

Hello,

I am working on a component that uses RadzenDatalist and it is adding two items at the beginning and at the end of the datalist.

This only happens when the allowvirtualization and wrap items properties are set to true

Here is my code:

<RadzenCard class="rz-border-radius-5 h-100">
    <h4>Contact List</h4>

    <div class="d-flex justify-content-end mb-2">
        <RadzenButton Text="Add Contact" Icon="person_add"></RadzenButton>
    </div>

    <RadzenDataList AllowVirtualization="true"
                    WrapItems="true" @ref=datalist
                    Data="@contacts" TItem="Contact">

        <Template Context="data">
            <RadzenCard class="rz-border-radius-5">


                    <div class="d-flex justify-content-between">
                        <div>
                            <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex  rz-my-0">Name</RadzenText>
                            <RadzenText TextStyle="TextStyle.Body1"><b>@data.Name</b></RadzenText>
                        </div>
                        <div>
                            <RadzenButton Icon="edit" Size="ButtonSize.Small"></RadzenButton>
                            <RadzenButton Icon="delete" Size="ButtonSize.Small" ButtonStyle="ButtonStyle.Danger"></RadzenButton>
                        </div>
                    </div>


                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex mt-2 rz-mb-0">Email</RadzenText>
                    <RadzenText TextStyle="TextStyle.Body1"><b>@data.Email</b></RadzenText>


                    <RadzenStack Orientation="Orientation.Horizontal" Gap="12">
                        <div>
                            <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex mt-2 rz-mb-0">Phone</RadzenText>
                            <RadzenText TextStyle="TextStyle.Body1"><b>@data.Phone</b></RadzenText>
                        </div>
                        <div>
                            <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex mt-2 rz-mb-0">Ext</RadzenText>
                            <RadzenText TextStyle="TextStyle.Body1"><b>@data.Ext</b></RadzenText>
                        </div>

                    </RadzenStack>

                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex mt-2 rz-mb-0">Mobile</RadzenText>
                    <RadzenText TextStyle="TextStyle.Body1"><b>@data.Mobile</b></RadzenText>
               


            </RadzenCard>


        </Template>

    </RadzenDataList>


</RadzenCard>





@code {
    [Parameter]
    public Client Client { get; set; }

    public IList<Contact> contacts { get; set; } = new List<Contact>();

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

    RadzenDataList<Contact> datalist;

    protected override async Task OnParametersSetAsync()
    {
        isloading = true;

        contacts = await ClientService.GetContactsbyClientID(Client.IDT);

        isloading = false;
    }


}

When one of those is set to false then those cards disappears:

See the code:

<RadzenCard class="rz-border-radius-5 h-100">
    <h4>Contact List</h4>

    <div class="d-flex justify-content-end mb-2">
        <RadzenButton Text="Add Contact" Icon="person_add"></RadzenButton>
    </div>

    <RadzenDataList AllowVirtualization="false"
                    WrapItems="true" @ref=datalist
                    Data="@contacts" TItem="Contact">

        <Template Context="data">
            <RadzenCard class="rz-border-radius-5">


                    <div class="d-flex justify-content-between">
                        <div>
                            <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex  rz-my-0">Name</RadzenText>
                            <RadzenText TextStyle="TextStyle.Body1"><b>@data.Name</b></RadzenText>
                        </div>
                        <div>
                            <RadzenButton Icon="edit" Size="ButtonSize.Small"></RadzenButton>
                            <RadzenButton Icon="delete" Size="ButtonSize.Small" ButtonStyle="ButtonStyle.Danger"></RadzenButton>
                        </div>
                    </div>


                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex mt-2 rz-mb-0">Email</RadzenText>
                    <RadzenText TextStyle="TextStyle.Body1"><b>@data.Email</b></RadzenText>


                    <RadzenStack Orientation="Orientation.Horizontal" Gap="12">
                        <div>
                            <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex mt-2 rz-mb-0">Phone</RadzenText>
                            <RadzenText TextStyle="TextStyle.Body1"><b>@data.Phone</b></RadzenText>
                        </div>
                        <div>
                            <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex mt-2 rz-mb-0">Ext</RadzenText>
                            <RadzenText TextStyle="TextStyle.Body1"><b>@data.Ext</b></RadzenText>
                        </div>

                    </RadzenStack>

                    <RadzenText TextStyle="TextStyle.Overline" class="rz-display-flex mt-2 rz-mb-0">Mobile</RadzenText>
                    <RadzenText TextStyle="TextStyle.Body1"><b>@data.Mobile</b></RadzenText>
               


            </RadzenCard>


        </Template>

    </RadzenDataList>


</RadzenCard>





@code {
    [Parameter]
    public Client SClient { get; set; }

    public IList<Contact> contacts { get; set; } = new List<Contact>();

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

    RadzenDataList<Contact> datalist;

    protected override async Task OnParametersSetAsync()
    {
        isloading = true;

        contacts = await ClientService.GetContactsbyClientID(SClient.IDT);

        isloading = false;
    }


}

appreciate your help!!

cscastilloliva90 · May 7, 2023, 3:50pm

@korchev Could you help me with this?

korchev · May 8, 2023, 9:12am

I can't help without a reproduction. The provided code isn't runnable as it depends on other API's.

aalvarez · May 11, 2023, 6:34pm

How did you get your cards to line up horizontally on one row? I looked through your code and don't see it. Mine are only vertical. Thanks!

cscastilloliva90 · May 15, 2023, 10:52pm

The datalist has an attribute called wrap items and since card within does not grow to the entire container then it appears horizontally aligned. However, once there are more and more items they will be displayed below.

aalvarez · June 22, 2023, 11:52pm

I was able to accomplish the horizontal components and wrapping with:

.chart-style{ display: grid; grid-template-columns: repeat(auto-fit, minmax(385px, 1fr)); grid-gap: 10px; }

Anton_Pavlov · October 4, 2023, 8:01am

I have the same problem, and can reproduce it (I can't upload attachments yet, will share once allowed).

If wrap items is switched off, markers disappears, but arrears margin and padding on data cards, which I was not able to reduce to 0.

dtabako · May 7, 2024, 6:32pm

For anyone still looking for an answer to this I got a solution for this from another thread. Add the following to your razor page in style tag:



	.rz-g > div, .rz-datalist-data > li {
		border-style: none;
		padding: 0;
	}

simon · June 23, 2024, 3:33pm

@dtabako This does not really work. It offsets the first and last card which is especially noticeable in mobile devices.

@enchev The issue is still there. Wrap + Virtualization produces blank cards at start and end of the visible list. You can replicate the issue on your component page by setting WrapItems="true".