How to render the multiple card items inside the single list items in Blazor ListView

[Syncfusion Support]

Query: How to render the multiple card items inside the single list items in Blazor ListView

Answer:

We can render the two-card items inside the single list items using template support.  We have prepared a sample based on your requirement.  Refer to the below code snippet. 

 <SfListView ID="List" 

                    DataSource="@ListData" 

                    Width="100%" 

                    Height="800px" 

                    EnableVirtualization="true" 

                    TValue="Product" 

                    CssClass="e-list-template"> 

            <ListViewFieldSettings Id="Cod" Text="Des"></ListViewFieldSettings> 

            <ListViewTemplates TValue="Product"> 

                <Template> 

                    <div style="width:100%"> 

                        <div style="display: grid; display:inline-block; width:50%;justify-content: center; justify-items: center; align-items: center; column-gap: 15px; box-shadow: 0px 0px 2px gray;  margin:4px;padding: 10px;"> 

                            <div style="grid-column: 1; grid-row-start: 1; grid-row-end: 3"> 

                                <img src="P@((context as Product).image).jpg" /> 

                            </div> 

                            <div style="grid-column: 2; grid-row:1;"> 

                                <p>@((context as Product).Cod)</p> 

                            </div> 

                            <div style="grid-column: 2; grid-row:2;"> 

                                <p>@((context as Product).Des)</p> 

                            </div> 

                        </div> 

                        <div style="display: grid; display:inline-block;width:48.5%;justify-content: center; justify-items: center; align-items: center; column-gap: 15px; box-shadow: 0px 0px 2px grey;margin:4px; padding: 10px;"> 

                            <div style="grid-column: 1; grid-row-start: 1; grid-row-end: 3"> 

                                <img src="P@((context as Product).image1).jpg" /> 

                            </div> 

                            <div style="grid-column: 2; grid-row:1;"> 

                                <p>@((context as Product).value)</p> 

                            </div> 

                            <div style="grid-column: 2; grid-row:2;"> 

                                <p>@((context as Product).Number)</p> 

                            </div> 

                        </div> 

                    </div> 

                </Template> 

            </ListViewTemplates> 

        </SfListView> 

Find the sample to render the multiple card items inside the single list items in Blazor ListView from here.

[Richard Rooks]

link for sample is not working

[Indhumathy Loganathan]

Hi Richard, 

 

Sorry for the inconvenience. 

 

Yes, the shared sample link is not working due to incorrect Url. Please find the runnable sample link below. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11881624983.zip 

 

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

 

Regards, 

Indhumathy L