1. Home
  2. Forum
  3. Blazor
  4. list view column

list view column

i have 2 questions, i can't any info or resources for these issues 


1) display.2 column for blazor list view

2) make it horizontal orientation 


6 Replies
PM Prasanth Madhaiyan Syncfusion Team August 21, 2023 09:41 AM UTC

Hi ANSON,


Greetings from Syncfusion support.


We have validated your reported query in the Blazor ListView component by preparing the sample using the details you shared. We understand that your requirement is to display the ListView component's items in 2 columns with a horizontal orientation. To fulfill this requirement, you can customize the Blazor ListView component using a Grid layout approach with the following CSS adjustments at your end.


Refer to the below code snippets.


<div id="container">

    <div class="sample flex">

        <div class="flex">

            <div class="padding">

                <SfListView DataSource="@Data">

                    <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Text"></ListViewFieldSettings>

                </SfListView>

            </div>

        </div>

    </div>

</div>

 

@code

{

    private DataModel[] Data =

         {

        new DataModel { Text = "Item1", Id = "list-01" },

        new DataModel { Text = "Item2", Id = "list-02" },

        new DataModel { Text = "Item3", Id = "list-03" },

        new DataModel { Text = "Item4", Id = "list-04" },

        new DataModel { Text = "Item5", Id = "list-05" },

        new DataModel { Text = "Item6", Id = "list-06" }

    };

    public class DataModel

    {

        public string Text { get; set; }

        public string Id { get; set; }

    }

}

 

<style>

    #container .e-listview {

        box-shadow: 0 1px 4px #ddd;

        border-bottom: 1px solid #ddd;

        width: 200px;

    }

 

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

        height: 100px;

        width: 100px;

        float: left;

    }

 

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

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

    }

 

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

        width: unset;

    }

 

    .sample {

        justify-content: center;

        min-height: 280px;

    }

 

    .padding {

        padding: 4px;

    }

 

    .flex {

        display: flex;

    }

 

    .flex__center {

        justify-content: center;

    }

 

    .margin {

        margin: 10px;

    }

</style>


For your reference, we have attached the documentation and sample.


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


Check out the attached sample and let us know if you need any further assistance.


Regards,

Prasanth Madhaiyan.


Attachment: BlazorListViewSample_306ff55e.zip

AN ANSON August 22, 2023 05:04 AM UTC

is not luck , i using all your info provided, still is display one column , not like maui dispaly colum span 2


AN ANSON August 22, 2023 05:25 AM UTC


this is the result which i run in version 22.2.9 Image_8460_1692681800252


PM Prasanth Madhaiyan Syncfusion Team August 22, 2023 05:49 AM UTC

Hi ANSON,


Based on the details you've provided, it appears that you are experiencing an issue with rendering the ListView component in 2 columns with a horizontal orientation on your end. However, we have observed that the provided sample is functioning correctly on our end, without any problems. Our suspicion is that you might have overlooked certain styles on your end. Therefore, we recommend that you make all the necessary style-related changes on your end, following our previously shared response.


Refer to the below code snippets.


<style>

    #container .e-listview {

        box-shadow: 0 1px 4px #ddd;

        border-bottom: 1px solid #ddd;

        width: 200px;

    }

 

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

        height: 100px;

        width: 100px;

        float: left;

    }

 

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

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

    }

 

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

        width: unset;

    }

 

    .sample {

        justify-content: center;

        min-height: 280px;

    }

 

    .padding {

        padding: 4px;

    }

 

    .flex {

        display: flex;

    }

 

    .flex__center {

        justify-content: center;

    }

 

    .margin {

        margin: 10px;

    }

</style>



For your reference, we have attached the output screenshot.


Additionally, we would like to know whether you have executed the attached Blazor server ListView sample or if you are utilizing the Maui application on your end. Based on that we will check and provide you a prompt solution. Kindly get back to us with the requested details.


Regards,

Prasanth Madhaiyan.


AN ANSON August 24, 2023 05:15 AM UTC

issue solved , when we change go material.cs 


IL Indhumathy Loganathan Syncfusion Team August 25, 2023 04:59 AM UTC

Anson, We are glad that your reported query has been resolved. Please get back to us if you need any further assistance.


Loader.
Up arrow icon