UncleCoder.com

UncleCoder.com

Free programming examples and instructions

Making Thead, Tbody and Tfoot in asp.net gridview

Demo and Example for how to make Tbody, Thead and Tfoot in Asp.net Gridview in frond end table.

by Athil


Posted on 26 Feb 2020 Category: Asp.Net Views: 436


Here I am going to show how to make Tbody, Thead and Tfoot in Asp.net gridview table in front end.

DEMO

DOWNLOAD DEMO

Making Tbody, THead, Tfoot

 GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
 GridView1.UseAccessibleHeader = true;
 GridView1.FooterRow.TableSection = TableRowSection.TableFooter; 

First I Create Data model.

   public class imagedata
   {
            public string Name { get; set; }
            public string Image { get; set; }
        
   }
        

Then I addded datas to the gridview using this model

         protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                List<imagedata> images = new List<imagedata>();
                imagedata Image = new imagedata();
                Image.Name = "Lotus";
                Image.Image = "lotus.jpg";

                images.Add(Image);
                
                Image = new imagedata();
                Image.Name = "Rose";
                Image.Image = "Rose.jpg";
                images.Add(Image);

                Image = new imagedata();
                Image.Name = "Jasmine";
                Image.Image = "Jasmine.jpg";
                images.Add(Image);

                GridView1.DataSource = images;
                GridView1.DataBind();


                 GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
                 GridView1.UseAccessibleHeader = true;
                 GridView1.FooterRow.TableSection = TableRowSection.TableFooter; 

            }

        }

Asp Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>Demo for Gridivew make Tbody and Thead in front end table </h1>
        
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
    
    </div>
        
    </form>
</body>
</html>

C# Full Code

 public partial class tbody_thead_aspgridivew : System.Web.UI.Page
    {
        
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                List<imagedata> images = new List<imagedata>();
                imagedata Image = new imagedata();
                Image.Name = "Lotus";
                Image.Image = "lotus.jpg";

                images.Add(Image);
                
                Image = new imagedata();
                Image.Name = "Rose";
                Image.Image = "Rose.jpg";
                images.Add(Image);

                Image = new imagedata();
                Image.Name = "Jasmine";
                Image.Image = "Jasmine.jpg";
                images.Add(Image);

                GridView1.DataSource = images;
                GridView1.DataBind();


                 GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
                 GridView1.UseAccessibleHeader = true;
                 GridView1.FooterRow.TableSection = TableRowSection.TableFooter; 

            }

        }

        public class imagedata
        {
            public string Name { get; set; }
            public string Image { get; set; }
        
        }
        
    }

 



Leave a Comment: