blazor grouped ListView to Gridv Layout

[Arrebatrans Nigeria]

I grouped ListView to Gridview Layout, 

the grouped header only correctly displays for the first Group

I can't get the group header to correctly separate the second group items and to show as well. 

[Sivakumar ShunmugaSundaram]

Hi Arrebatrans,

We have validated the reported query in the Blazor ListView component. As per the shared details, you have rendered ListView as a two-row grid layout. But in the shared screenshot, the ListView header is properly displayed in rows one and two. We are quite unclear about your exact requirements for the ListView component.

We would like to confirm whether you are facing an issue while customizing the ListView as a grid layout. You can render the ListView as a grid layout using the CSS customization. We have attached the documentation link to customize the ListView as a grid layout for your reference.

Documentation: https://blazor.syncfusion.com/documentation/listview/how-to/customize-listview-as-grid-layout

Please share with us the exact issue you are facing at your end. If possible, share with us the reproduced sample, which would help us assist you promptly.

Regards,

Sivakumar S

[Arrebatrans Nigeria]

Here's my example

First grouped category header shows correctly

The Second and Third are missing

[Sivakumar ShunmugaSundaram]

Hi Arrebatrans,

We have validated your reported query in the Blazor ListView component. We understand that you want to implement the Blazor ListView component with grouping header as Grid layout. To achieve your requirement, we suggest you set the width of the list items to occupy the entire width of the window and apply the below CSS style to the grouped item list. We have attached the modified sample to your reference.

Refer to the below code snippet.

[Index.razor]

 

<style>

    #container .e-listview .e-list-item {

    height:100px;

    width: 50%;

    float: left;

}

.e-listview .e-list-group-item{

    overflow:auto;

}

</style>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1-2054921904.zip

Please check the attached sample and get back to us if you need any further assistance.

Regards,

Sivakumar S

[Zhu Xiaoxin]

Hi  Sivakumar,

The provided sample does not resolve the group issue. I have upgraded the sample to .NET 8 and latest version of the Syncfusion controls, slightly modified the application and now it looks like this:

I have attached the modified sample, please review.

Cheers

Zhu Xiaoxin 

Attachment: WebApplication1_5ab7dd59.zip

[Subalakshmi Ramachandran]

Hi Zhu,

Based on the screenshot and the code you have shared, it appears that you have listed a single item to the single Group of ListView. For this, we suggest you remove the style added in the previous update. In the previously shared sample, the two items are listed for each Group of ListView, for that we have added the css styles to render properly.

Refer to the below screenshot:
1 item for group in ListView without styles.

2 items for group in ListView with styles.


If you have any further questions or need additional assistance, get back to us.

Best regards,
Suba R.

Attachment: WebApplication1_46c4ce96.zip