LIstView dan Data Pager Control (bagian 2)

Posting ini adalah lanjutan dari posting sebelumnya di

Topik yang akan dibahas pada posting kali ini:

  • Sorting dengan ListView
  • Edit, Delete data dengan ListView
  • Insert data dengan ListView
  • Sekilas DataPager Control
  • Contoh menggunakan DataPager
  • Custom Paging

Source code untuk contoh-contoh aplikasi dapat anda download di

Sorting Dengan ListView

Anda juga dapat menambahkan sorting pada ListView control dengan cara merubah property ‘CommandName’ menjadi ‘Sort’ dan ‘CommandArgument’ berisi nama kolom untuk yg akan disorting.

Contoh sorting dengan ListView Control (ListSort.aspx)

   1: <form id="form1" runat="server">
   2: <div>
   3:   <asp:SqlDataSource ID="sdsKategori" runat="server"
   4:     ConnectionString="<%$ 
   5:     ConnectionStrings:MhsConnectionString %>"
   6:     SelectCommand="SELECT * FROM 
   7:       Kategori"></asp:SqlDataSource>
   8:    <asp:ListView ID="lvBerita" runat="server"
   9:      DataSourceID="sdsKategori">
  10:      <LayoutTemplate>
  11:       <table border="1px" style="border-collapse:collapse;">
  12:         <thead>
  13:         <tr>
  14:           <th><asp:LinkButton ID="lnkId" Text="ID"
  15:             CommandName="Sort" CommandArgument="id_kat"
  16:             runat="server" /></th>
  17:           <th><asp:LinkButton ID="lnkNama" Text="Nama 
  18:             Kategori" CommandName="Sort"
  19:             CommandArgument="nama_kat"
  20:             runat="server" /></th>
  21:         </tr>
  22:         </thead>
  23:         <tbody>
  24:           <asp:PlaceHolder ID="itemPlaceHolder"
  25:             runat="server" />
  26:         </tbody>
  27:       </table>
  28:      </LayoutTemplate>
  29:      <ItemTemplate>
  30:        <tr>
  31:          <td><%# Eval("id_kat") %></td>
  32:          <td><%# Eval("nama_kat") %></td>
  33:        </tr>
  34:      </ItemTemplate>
  35:    </asp:ListView>
  36: </div>
  37: </form>

image

Edit, Delete, Insert Data dengan ListView

ListView menggunakan tag-tag <EditItemTemplate>, <DeleteItemTemplate>, <InsertItemTemplate> untuk inser, edit, delete data. Didalam tag tersebut anda dapat membuat tampilan ketika tombol edit, insert, atau delete ditekan.

Contoh Edit dan Delete data menggunakan ListView (EditList.aspx)

   1: <form id="form1" runat="server">
   2: <div>
   3:   <asp:SqlDataSource ID="sdsKategori" runat="server"
   4:     ConnectionString="<%$ 
   5:     ConnectionStrings:MhsConnectionString %>"
   6:     SelectCommand="SELECT * FROM [Kategori]"
   7:     DeleteCommand="DELETE FROM [Kategori] 
   8:       WHERE [id_kat] = @id_kat"
   9:     UpdateCommand="UPDATE [Kategori] SET [nama_kat] = 
  10:       @nama_kat WHERE [id_kat] = @id_kat">
  11:     <DeleteParameters>
  12:       <asp:Parameter Name="id_kat" Type="Int32" />
  13:     </DeleteParameters>
  14:     <UpdateParameters>
  15:       <asp:Parameter Name="nama_kat" Type="String" />
  16:       <asp:Parameter Name="id_kat" Type="Int32" />
  17:     </UpdateParameters>
  18:   </asp:SqlDataSource>
  19:   <asp:ListView ID="lvKategori" runat="server"
  20:     DataKeyNames="id_kat" DataSourceID="sdsKategori">
  21:     <LayoutTemplate>
  22:      <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
  23:     </LayoutTemplate>
  24:     <ItemTemplate>
  25:       <div style="border:solid 1px black;width:250px">
  26:         <h3><%# Eval("nama_kat") %></h3>
  27:         <p>Id: <%# Eval("id_kat") %></p><hr />
  28:         <asp:LinkButton id="lnkEdit" Text="{Edit}"
  29:           CommandName="Edit" Runat="server" />
  30:         <asp:LinkButton id="lnkDelete" Text="{Delete}"
  31:           CommandName="Delete" Runat="server"
  32:           OnClientClick="return confirm('Anda yakin 
  33:           mendelete data?')" />
  34:       </div>
  35:     </ItemTemplate>
  36:     <EditItemTemplate>
  37:       <div style="border:solid 1px black;width:250px">
  38:         Nama Kategori :<asp:TextBox ID="txtKat" Text='<%# 
  39:           Bind("nama_kat") %>' runat="server" />
  40:         <asp:RequiredFieldValidator ID="rfvKat"
  41:           runat="server" ControlToValidate="txtKat"
  42:           ErrorMessage="{required}" /><hr />
  43:         <asp:LinkButton id="lnkUpdate" Text="{Update}"
  44:           CommandName="Update" Runat="server" />
  45:         <asp:LinkButton id="lnkCancel" Text="{Cancel}"
  46:           CommandName="Cancel" Runat="server" />
  47:       </div>
  48:       </EditItemTemplate>
  49:   </asp:ListView>
  50: </div>
  51: </form>

image

image

Contoh insert data menggunakan ListView (InsertList.aspx)

   1: <form id="form1" runat="server">
   2: <div>
   3:   <asp:SqlDataSource ID="sdsKategori" runat="server"
   4:     ConnectionString="<%$ 
   5:     ConnectionStrings:MhsConnectionString %>"
   6:     InsertCommand="INSERT INTO [Kategori] ([nama_kat]) 
   7:       VALUES (@nama_kat)"
   8:     SelectCommand="SELECT * FROM [Kategori]">
   9:     <InsertParameters>
  10:       <asp:Parameter Name="nama_kat" Type="String" />
  11:     </InsertParameters>
  12:   </asp:SqlDataSource>
  13:   <asp:ListView ID="lvKategori" runat="server"
  14:     DataSourceID="sdsKategori"
  15:     InsertItemPosition="FirstItem">
  16:   <LayoutTemplate>
  17:     <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
  18:   </LayoutTemplate>
  19:   <ItemTemplate>
  20:    <div style="border:solid 1px black;width:250px">
  21:     <h3><%# Eval("nama_kat") %></h3>
  22:     <p>Id Kategori : <%# Eval("id_kat") %></p><hr />
  23:    </div>
  24:   </ItemTemplate>
  25:   <InsertItemTemplate>
  26:    <div style="border:solid 1px black;width:250px">
  27:      <h3>Tambah Kategori</h3>
  28:      Nama Kategori :<asp:TextBox ID="txtKat" Text='<%# 
  29:        Bind("nama_kat") %>' runat="server" /><hr />
  30:      <asp:LinkButton ID="lnkInsert" Text="{Insert}"
  31:        CommandName="Insert" runat="server" />
  32:    </div>
  33:   </InsertItemTemplate>
  34:   </asp:ListView>
  35: </div>
  36: </form>

image

DataPager Control

DataPager adalah pasangan dari ListView yang digunakan untuk paging halaman. DataPager dapat digunakan oleh semua control yang mengimplementasikan interface IPageableItemContainer. Di ASP.NET 3.5 baru ada satu control yang mengimplementasikan interface tersebut yaitu ListView ^_^

DataPager control mempunyai beberapa property yang penting yaitu:

  • PageSize: jumlah data yang akan ditampilkan.
  • PagedControlId: ambil atau set control pada halaman.
  • Fields: ambil fields yang ada pada DataPager.
  • StartRowIndex: ambil index dari item pertama yang ditampilkan.
  • MaximumRows: ambil maksimum row yang diambil dari data source.
  • TotalRowCount: ambil total number dari items yang ada pada data source.
  • NextPreviousPagerFields : untuk menampilkan link dalam bentuk next, previous, first dan last.
  • NumericPagerFileds: menampilkan link dalam bentuk numeric.
  • TemplatePagerField: membuat custom user interface pada paging.

Contoh menggunakan DataPager (ShowDataPager.aspx)

   1: <form id="form1" runat="server">
   2: <div>
   3:   <asp:SqlDataSource ID="sdsBerita" runat="server"
   4:     ConnectionString="<%$ 
   5:     ConnectionStrings:MhsConnectionString %>"
   6:     SelectCommand="SELECT * FROM 
   7:       [Berita]"></asp:SqlDataSource>
   8:     <asp:ListView ID="lvBerita" runat="server"
   9:       DataSourceID="sdsBerita">
  10:     <LayoutTemplate>
  11:     <table border="2">
  12:     <thead>
  13:       <th>Judul</th><th>Berita</th><th>Tanggal</th>
  14:     </thead>
  15:     <asp:PlaceHolder ID="itemPlaceHolder" runat="server" />
  16:     </table>
  17:     <asp:DataPager ID="dpBerita" PageSize="2"
  18:       runat="server">
  19:       <Fields>
  20:         <asp:NextPreviousPagerField
  21:           ShowFirstPageButton="true"
  22:           ShowPreviousPageButton="true"
  23:           ShowNextPageButton="false"
  24:           ShowLastPageButton="false" />
  25:         <asp:NumericPagerField />
  26:         <asp:NextPreviousPagerField
  27:           ShowFirstPageButton="false"
  28:           ShowPreviousPageButton="false"
  29:           ShowNextPageButton="true"
  30:           ShowLastPageButton="true" />
  31:       </Fields>
  32:     </asp:DataPager>
  33:     </LayoutTemplate>
  34:     <ItemTemplate>
  35:       <tr>
  36:         <td><%# Eval("judul_berita") %></td>
  37:         <td><%# Eval("detail_berita") %></td>
  38:         <td><%# Eval("tanggal") %></td>
  39:       </tr>
  40:     </ItemTemplate>
  41:   </asp:ListView>
  42: </div>
  43: </form>

image_thumb3

Membuat Custom Paging

Jika anda tidak puas dengan default paging yang disediakan, anda dapat menggunakan TemplatePagerField.

Contoh menggunakan DataPager TemplatePagerField (PagerTemplate.aspx)

   1: <form id="form1" runat="server">
   2: <div>
   3:   <asp:SqlDataSource ID="sdsBerita" runat="server"
   4:     ConnectionString="<%$ 
   5:     ConnectionStrings:MhsConnectionString %>"
   6:     SelectCommand="SELECT * FROM 
   7:       [Berita]"></asp:SqlDataSource>
   8:    <asp:ListView ID="lvBerita" runat="server"
   9:       DataSourceID="sdsBerita">
  10:     <LayoutTemplate>
  11:      <table border="1">
  12:      <thead>
  13:         <th>Judul</th><th>Berita</th><th>Tanggal</th>
  14:      </thead>
  15:      <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
  16:      </table>
  17:      <asp:DataPager ID="dpBerita" runat="server"
  18:        PageSize="2">
  19:        <Fields>
  20:          <asp:TemplatePagerField
  21:            OnPagerCommand="dpBerita_OnPagerCommand">
  22:          <PagerTemplate>
  23:            <asp:LinkButton ID="lnkPrev" Text="{Prev}"
  24:              CommandName="Previous" runat="server" />
  25:            <asp:LinkButton ID="lnkNext" Text="{Next}"
  26:              CommandName="Next" runat="server" />
  27:          </PagerTemplate>
  28:          </asp:TemplatePagerField>
  29:        </Fields>
  30:      </asp:DataPager>
  31:     </LayoutTemplate>
  32:     <ItemTemplate>
  33:       <tr>
  34:         <td><%# Eval("judul_berita") %></td>
  35:         <td><%# Eval("detail_berita") %></td>
  36:         <td><%# Eval("tanggal") %></td>
  37:       </tr>
  38:     </ItemTemplate>
  39:    </asp:ListView>
  40: </div>
  41: </form>

Kemudian tambahkan kode berikut pada event ‘OnPagerCommand’ pada TemplateFields.

   1: protected void dpBerita_OnPagerCommand(object sender,
   2: DataPagerCommandEventArgs e) {
   3:     e.NewMaximumRows = e.Item.Pager.MaximumRows;
   4:     switch (e.CommandName) {
   5:     case "Previous":
   6:       if (e.Item.Pager.StartRowIndex > 0)
   7:         e.NewStartRowIndex = e.Item.Pager.StartRowIndex - 2;
   8:       break;
   9:     case "Next":
  10:         e.NewStartRowIndex = e.Item.Pager.StartRowIndex + 2;
  11:       break;
  12:     }
  13: }

image_thumb5

Dibandingkan dengan GridView, Kombinasi ListView dan DataPager menawarkan fleksibilitas yang lebih besar kepada programmer untuk memodifikasi tampilan dan program. Secara pribadi saya menyarankan penggunaan dua control baru ini daripada control lama seperti GridView, DataList, atau Repeater.

selesai ^_^

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s