catatan diari: tutorial Membuat scroll bar di repeater dengan kondisi Freeze Header

salam Programming teman!

hari ini penulis akan sedikit memaparkan tutorial bagaimana caranya menampilkan data dari database menggunakan repeater, akan tetapi kalimat di paling atas atau kita sebut Header tidak akan ikut kena scroll saat kita melihat isi data tersebut, tentunya dengan menggunakan beberapa control ASP.NET. khususnya bagi teman2 saya CPP WEB PROGRAMMING yang mau ujian nanti seminggu lagi. semoga sukses ujiannya.

Repeater
untuk memanggil data dari database ke repeater ini sama seperti memanggil data di Gridview, bisa dengan menggunakan SqlDataAdapter ataupun dataset maupun SqlDataReader.

Gridview telah otomatis dibentuk dalam tabel, sedangkan repeater, tampilannya harus kita atur satu persatu. Sebenarnya Gridview ini bisa saja dibuat dalam repeater dengan menggunakan fungsi TemplateField, namun penggunaannya akan sedikit lebih kompleks daripada kita menggunakan repeater langsung.

mari kita bahas langkah-langkahnya satu persatu membuat scroll bar di repeater:

1. buat terlebih dahulu syntax repeater yang ingin dibuat.
<asp:Repeater ID="Repeater1" runat="server">
            <HeaderTemplate>
            </HeaderTemplate>
            <ItemTemplate>
                Nama:<asp:Label ID="Label1" runat="server" Text='<%#Eval("name") %>'></asp:Label>
                <br />
                Harga:<asp:Label ID="Label2" runat="server" Text='<%#Eval("listprice") %>'> </asp:Label>
            </ItemTemplate>
            <SeparatorTemplate>
                <hr />
            </SeparatorTemplate>
        </asp:Repeater>

2. Panggil isi database dengan menuliskan syntax di Webform.aspx.cs . untuk kali ini silakan teman-teman pergunakan cara sendiri saja, karena dikhawatirkan kalau ikut cara penulis ntar jadi pusing. tapi, penulis akan memberikan syntax penulis.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

namespace website5
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string cs=ConfigurationManager.ConnectionStrings["conadventureworks"].ConnectionString;
            using (SqlConnection con = new SqlConnection(cs))
            {
                SqlDataAdapter da = new SqlDataAdapter("select name,listprice from production.product", con);
                DataSet ds = new DataSet();
                da.Fill(ds);
                Repeater1.DataSource = ds;
                Repeater1.DataBind();
            }
        }
    }
}
syntax di file web.config:
<?xml version="1.0"?>


<configuration>
<connectionStrings>
    <add name="conadventureworks" connectionString="data source=.; database=adventureworks; integrated security=SSPI" providerName="System.Data.SqlClient"/>
</connectionStrings>
    <system.web>
        <compilation debug="true" targetFramework="4.0" />
    </system.web>
</configuration>

3. jika kita jalankan, maka Output yang akan dihasilkan seperti ini:

4. baik sekarang kita tampilkan Header pada output tersebut. stop debugging terlebih dahulu agar kita bisa edit. untuk membuat header itu terserah para pembaca, sesuka hati.. kalau penulis, cara simpelnya adalah dengan mengetikkan kalimat Header tersebut di paling atas. hehehe..

5. mari kita jalankan dan scroll kebawah..

ketika di scroll ke bawah:

Lihat! tulisan "Penjualan barang - barang Olahraga dan alat rumah tangga" menghilang karena ikut kena scroll. gimana caranya agar dia tetap tampil ketika data di scroll ke bawah? oke ini dia caranya..

6. pertama drag and drop ASP control : Panel ke dalam project.

7. set pada Panel properties dengan Scrollbars="vertical" dan Height="500px" untuk height ini terserah nilai para pembaca, kalau penulis di set 500px..

8. Drag And Drop Repeater ke dalam kotak ASP Panel tersebut. maaf hasil drag and drop tidak bisa di screenshot, tapi coba lihat codingnya, repeater akan didalam Panel.