Tuesday, 1 October 2013

How to Fix Header in Repeater Control in ASP.NET C#

Here I have written a function fixHeader() in javascript on client side,
I have taken a repeater control of asp.net with three columns in Header:-


<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" language="javascript">
    //Function to Fix header in Repeater control.
    function fixHeader()
    {
        var t = document.getElementById("table");
        var thead = t.getElementsByTagName("thead")[0];
        var t1 = t.cloneNode(false);
        t1.appendChild(thead);
        tableHeader.appendChild(t1)
    }
    window.onload = fixHeader
</script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="tableHeader">
            </div>
            <div style="overflow: scroll; height: 100px; width: 500px">
                <asp:Repeater ID="Reapeter1" runat="server">
                    <HeaderTemplate>
                        <table id="table" width="500" style="table-layout: fixed; border:solid 1px black">
                            <thead>
                                <tr id="thead" style="width: 500px; background-color:#BEBEBE">
                                    <th>Name</th>
                                    <th>Mobile No</th>
                                    <th>Address</th>
                                </tr>
                            </thead>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                            <td>
                                <%#DataBinder.Eval(Container.DataItem, "Name")%>
                            </td>
                            <td>
                                <%#DataBinder.Eval(Container.DataItem,"MobileNo")%>
                            </td>
                            <td>
                                <%#DataBinder.Eval(Container.DataItem,"OfficeAddress")%>
                            </td>
                        </tr>
                    </ItemTemplate>
                    <FooterTemplate>
                        </table>
                    </FooterTemplate>
                </asp:Repeater>
            </div>
        </div>
    </form>
</body>
</html>


Code Written on Code Behind :-

On Code Behind side, I simply created one DataTable and assigned as DataSource to Repeater.
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add(new DataColumn("Name"));
            dt.Columns.Add(new DataColumn("MobileNo"));
            dt.Columns.Add(new DataColumn("OfficeAddress"));
            DataRow dr = dt.NewRow();
            dr["Name"] = "Thakur";
            dr["MobileNo"] = "9876543210";
            dr["OfficeAddress"] = "Office Address1";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["Name"] = "Prince";
            dr["MobileNo"] = "9786543210";
            dr["OfficeAddress"] = "Office Address2";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["Name"] = "Praveen";
            dr["MobileNo"] = "9678541230";
            dr["OfficeAddress"] = "Office Address3";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["Name"] = "Rohit";
            dr["MobileNo"] = "9854712547";
            dr["OfficeAddress"] = "Office Address4";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["Name"] = "Dharmendra";
            dr["MobileNo"] = "9854712547";
            dr["OfficeAddress"] = "Office Address5";
            dt.Rows.Add(dr);
            dr = dt.NewRow();
            dr["Name"] = "Deepesh";
            dr["MobileNo"] = "9874124758";
            dr["OfficeAddress"] = "Office Address6";
            dt.Rows.Add(dr);
            Reapeter1.DataSource = dt;
            Reapeter1.DataBind();
        }
    }


Hope this code may Help you:-

From :- Praveen Thakur.

 

No comments:

Post a Comment