How to add more Columns in a Listiview

Question

Good Day all

i have a Listview and i want to have atlest 3 columns so that i have data in the way i marked in black instread of one column

This is in asp.net webforms

Answer 1

Well, a list view can be considered to have columns.

That means you are free to add columns, or move columns around.

So, say I have this layout template:

So, code to load, say this:

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
        If Not IsPostBack Then  
            LoadGrid()  
        End If  
    End Sub  
  
  
    Sub LoadGrid()  
  
        Dim strSQL As String = "SELECT * FROM Fighters"  
        ListView1.DataSource = MyRst(strSQL)  
        ListView1.DataBind()  
  
    End Sub  
  
    Public Function MyRst(strSQL As String) As DataTable  
  
        Dim rstData As New DataTable  
        Using conn As New SqlConnection(My.Settings.TEST4)  
            Using cmdSQL As New SqlCommand(strSQL, conn)  
                conn.Open()  
                rstData.Load(cmdSQL.ExecuteReader)  
                rstData.TableName = strSQL  
            End Using  
        End Using  
        Return rstData  
    End Function  
  
  

And now we get/have this:

So, in above, we have 5 columns.

But lets do the opposite of what you are asking. lets move the Fighter name over to the image preview column, and delete the column. (so, adding columns, or deleting them is the lesson here).

but, say I wanted to move the fighter "name" to the first column - say above the picture. So, I just move the content from the 2nd column, to the first, delete the 2nd column. I now have this markup:

so the first two columns of markup in the template was this:

But, lets move the content for 2nd row to the first, say like this:

And now we remove the extra row in layout template, and have this:

And the result is thus this:

so, as above shows, you are free to add extra columns (your goal), or remove and combine columns of data. In effect, just reverse the steps above from that last example, to the first - in other words, ADD SOME columns to the layout template, and move the content into those extra columns you desire.

So, my final layout of the listview is now this:

so we can add more columns, or remove columns and combine the content into one column.

Regards,
Albert D. Kallal (Access MVP 2003-2017)
Edmonton, Alberta Canada

Answer 2

Hi @Vuyiswa Maseko ,
If you just add a few simple pieces of data, you can create a DataTable, add Columns to the DataTable, and then bind the DataTable to the ListView.
You can refer to the example below.The annotation part is to get the data through the database.

  protected void Page_Load(object sen der, System.Even tAr gs e)  
        {  
            if (IsPostBack == false)  
                LoadGrid2();  
        }  
        public void LoadGrid2()  
        {             
            DataTable dt = new DataTable();  
            dt.Columns.Add(new DataColumn("Test1", typeof(int)));  
            dt.Columns.Add(new DataColumn("Test2", typeof(string)));  
            dt.Columns.Add(new DataColumn("Test3", typeof(decimal)));  
            dt.Columns.Add(new DataColumn("Test4", typeof(decimal)));  
            dt.Rows.Add(1, "Test1", 1, 0);  
            dt.Rows.Add(10, "Test2 ", 2, 0);  
            dt.Rows.Add(20, "Test3", 3, 0);  
            ListView1.DataSource = dt;  
            ListView1.DataBind();  
             //using (SqlConnection con = new SqlConnection(@"Data Source=***"))  
        //{  
        //    using (SqlCommand cmd = new SqlCommand("SEL ECT * FROM Test1", con))  
        //    {  
        //        SqlDataAdapter sda = new SqlDataAdapter(cmd);  
        //        DataTable dt = new DataTable();  
        //        sda.Fill(dt);  
        //        ViewState["dt"] = dt;  
        //        ListView1.DataSource = dt;  
        //        ListView1.DataBind();  

        //    }  

        //}  
        }  

---

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

Good Day thanks for the reply

 DataTable dt = new DataTable();  
         dt.Columns.Add(new DataColumn("Test1", typeof(int)));  
         dt.Columns.Add(new DataColumn("Test2", typeof(string)));  
         dt.Columns.Add(new DataColumn("Test3", typeof(decimal)));  
         dt.Columns.Add(new DataColumn("Test4", typeof(decimal)));  
         dt.Rows.Add(1, "Test1", 1, 0);  
         dt.Rows.Add(10, "Test2 ", 2, 0);  
         dt.Rows.Add(20, "Test3", 3, 0);.  

This will give me 3 Rows and 4 columns , that is simple , but now what i want is that the rows that you have must be in one line instead of appearing vertically but now with a listview it means it might want t scroll horizontally , but i dont want that i want it to fill the remaining spaces below as well when it reached to the 4th column