DataList - Wrap does not use column layout?

Radzen Studio Blazor Server
1

I'm positive I'm missing something super basic here... but I cannot seem to get specific column layouts working with DataLists.

Turning on WrapItems and setting the template to have a column 'works' but does not function as expected. For example two items with md-6 will display on their own lines (but taking up the proper screen space).

Looking at the generated html what I would expect to be the row class is actually rz-g. If I manually edit that class in the html to be row everything works as expected. Unfortunately I'm not seeing a simple way to override the wrap class. Setting a class attribute on the DataList effects the parent container, not the wrap element and doing the template items of course effects each item.

Again I'm positive I'm missing something basic here but searching so far is not turning up anything.

2

The DataList is not using Bootstrap CSS classes. There currently isn't a way to apply the row class.

3

Is this something that will be changing or is there a supported workflow for having responsive data list items?

Alternatively am I just using the wrong component type if I want to basically render a collection of items with an arbitrary template?

4

The DataList is not lookless and it will wrap the template in <ul> <li> elements. You can always use @foreach with desired markup if you need plain lookless list.

5

Right, I get what it is doing I'm just confused as to what the proper approach is to get the behavior I am looking for. Due to the items coming from the database it could be a single result or thousands so keeping the paging behavior and consistent layout is important.

With wrap enabled I can have the template be a card (or similar) and it tries to auto arrange to fit the screen space based on content. In the event the database only has 1-2 items returned though it will look horrible by stretching the card to the full screen width rather than being able to specify responsive breakpoints for a consistent style.

So I guess I'm just clarifying that there's no alternate approach or existing component that will give this style of behavior? The only solution I can see at the moment is using custom element and designing the layout and logic in code. It seems like a fairly straight forward need to not have visual editor functionality for.

6

There is no such component in Radzen Blazor components - you can create your own.

7

Is there any word on if the upcoming versions will support any sort of improved IDE support for custom components? Losing all in-IDE preview of how my page will be rendered and all WYSYWIG functionality is not a small concern...

8

The word is Radzen 3.0 :slight_smile:

1 Like
9

Perfect thanks!

For anyone with similar issues it seems the simplest workaround is to handle it in CSS. I just did the template as a card with a custom class assigned. Then in CSS I handle the media query breakpoints assigning a max-width to them. Hides the layout information from the IDE but it keeps the components themselves rendering properly.