Rully Yulian MF

Akhir-akhir ini saya mengalami permasalahan ketika akan post artikel ke blog ini. Permasalahannya yaitu ketika isi artikel tersebut mengandung kode-kode yang di copy paste dari visual studio dengan menggunkan add-on Insert Code, padahal sebelumnya ga terjadi masalah seperti ini. Lalu saya coba saran dari Pak Tahir untuk install Code Snippet add-on dan hasilnya masih ga sesuai dengan previewnya, saran dari Bang Reza belum dicoba soalnya "agak ribet" dikit :). Kemudian saya coba juga dengan menggunakan Insert from Visual Studio add-on yang sebenarnya sudah saya install lama sekali tuh add-on tapi ga pernah saya pake, eh ternyata hasilnya fine-fine aja  :) cuma ga bisa nampilin line number aja...ya sudahlah nanti diutak-atik lagi saja...

Mari kita langsung ke topik saja :)...anda dapat juga melihat artikel ini di web site saya dan download source codenya...

Memang asp.net 3.5 ini betul-betul memanjakan para programmer :) Betapa tidak beberapa fitur-fitur terbaru banyak sekali ditujukan untuk lebih mempermudah pekerjaan programmer agar lebih terfokus pada business process dari aplikasi yang akan dibuat (ya memang seharusnya dari dulu harus sepert itu...).

Kali ini saya benar-benar merasakannya dikala saya ingin menampilkan data yang di kelompokkan berdasarkan kolom / categori tertentu. Sebelum adanya asp.net versi 3.5 ini saya melakukannya dengan menggunakan beberapa teknik yaitu diantaranya penggunaan row_number() function yang digabungkan dengan CTE (Common Table Expression) yang terdapat di sql server 2005, kemudian penggunaan perintah GroupBy di sql statementnya yang digabungkan dengan pemanfaatan event RowDataBound di data controlnya dimana code yang terdapat pada event ini benar-benar sangat tricky :). Anda dapat melihat penggunaan teknik grouping tersebut pada posting artikel saya sebelumnya disini :

1. Grouping Data In DataGridView

2. DataList Control Paging dengan memanfaatkan fungsi baru row_number() di Sql Server  2005

Nah pada posting kali ini saya akan memperlihatkan bagaimana caranya mengelompokkan data dengan menggunakan LinqDataSource control yang sumber datanya diambil dari LinqToSql classes (.dbml), kemudian data tersebut ditampilkan pada control ListView dan GridView yang tentunya kita gabungkan dengan UpdatePanel ajax control dan DataPager untuk melakukan paging.

Mengenai penggunaan ListView dan DataPager control dapat anda lihat di posting saya sebelumnya ini :

1. Using GroupTemplate in ListView ASP.NET 3.5 control

2. Using the new ListView and DataPager control in ASP.NET 3.5

Jadi kali ini pembahasannya akan difokuskan pada fitur grouping data dengan menggunakan LinqDataSource control...kita lihat terlebih dahulu screen shot web preview nya :

Pada gambar petama di atas saya menggunakan ListView control sedangkan pada gambar yang kedua saya gunakan GridView control sebagai container control dan ListView control sebagai Template control untuk menampilkan detail record hasil grouping. Disini saya menggunakan Visual Web Developer 2008 Express Edition dan database Northwind. Source code nya dapat anda download. Untuk menggunakannya anda harus rubah terlebih dahulu connection string yang terdapat di web.config file dan disesuaikan dengan konfigurasi database server yang digunakan.

Mari kita lihat langkah-langkahnya :

1. Buat web site project template. Tambahkan item baru berupa LinqToSql class ke dalam project tsb. Kemudian pada O/RM designer drag and drop tabel Customer database Northwind dari server explorer yang sudah terkoneksi ke database.

2. Tambahkan ScriptManager, LinqDataSource, UpdatePanel, ListView control ke web form.

3. Configure LinqDataSource control seperti yang tampak pada gambar dibawah ini :

html markup code yang dihasilkan :

<asp:LinqDataSource ID="LinqDataSource1" runat="server" 
ContextTypeName="NorthwindDataContext"
    GroupBy="Country" 
    Select="new(Key, Count() as Total,It as Items)" 
    TableName="Customers">
</asp:LinqDataSource>

GroupBy attribut digunakan sebagai kolom untuk kategori grouping, jadi nanti datanya akan dikelompokkan berdasarkan kolom Country. Dengan LinqDataSource kita dapat mendifinisikan property name baru / nama kolom baru yang akan di tampilkan, hal itu dilakukan dengan menggunakan atribut Select. "new" keyword untuk mendifinisikan kolom-kolom baru tersebut.

Pada perintah Select terdapat perintah "Key" yang secara internal digunakan sebagai pengganti kolom grouping yaitu Country. Selain itu kita juga dapat menggunakan aggregate function seperti Avg, Count, Sum, Min, Max. Sedangkan perintah "It" digunakan sebagai "placeholder" yang nantinya kita definisikan sendiri kolom-kolom mana yang akan ditampilkan dari DataContext / LinqDataSource tersebut pada data control yang digunakan.

Perintah "as" digunakan sebagai alias name kolom yang baru, anda bisa bebas memberi nama alias tersebut.

4. Langkah berikutnya yaitu lakukan databinding control ListView ke LinqDataSource. Pada ItemTemplate nya kita akan gunakan ListView sebagai control untuk menampilkan Details dari kolom-kolom yang akan ditampilkan sebagai hasil dari grouping. Berikut potongan code html nya :

<ItemTemplate>
    <tr style="">
        <td colspan="4" style="font-style: italic;">
            <asp:Label ID="CountryLabel" runat="server" 
            Text='<%# Eval("Key") %>' Font-Bold="true" 
            ForeColor="Red" />
        </td>
    </tr>
    <asp:ListView ID="lvCustomers" runat="server" 
    DataSource='<%# Eval("Items") %>'>
        <LayoutTemplate>
            <tr id="itemPlaceholder" runat="server">
            </tr>
        </LayoutTemplate>
        <ItemTemplate>
            <tr id="row" runat="server">
                <td align="right">
                    <asp:Image ID="img" runat="server" 
                    ImageUrl="~/images/person2.ico" />
                </td>
                <td style="border-bottom: solid thin Silver;">
                    <%#Eval("CustomerID")%>
                </td>
                <td style="border-bottom: solid thin Silver;">
                    <%#Eval("CompanyName")%>
                </td>
                <td style="border-bottom: solid thin Silver;">
                    <%#Eval("Phone")%>
                </td>
            </tr>
        </ItemTemplate>
    </asp:ListView>
    <tr style="">
        <td colspan="4" 
        style="font-style: italic;text-align:right;
        color:Green;font-weight:bold">
            Total Customer : <%# Eval("Total") %>
        </td>
    </tr>
</ItemTemplate>

DataBinding syntax Expression <%# Eval("Key") %> digunakan untuk menampilkan kolom Country sebagai "kunci" pengelompokkan data. Perhatikan kode pada line-10, disitu terdapat atribut "DataSource" bukan "DataSourceID" yang diisi dengan syntax expression dari "Items" yang merupakan alias dari perintah "It" pada perintah Select yang terdapat di LinqDataSource. Untuk menampilkan kolom-kolom hasil grouping anda bisa menggunakan control apapun, disini saya gunakan table...cukup dengan menuliskan databinding syntax expression dari kolom-kolom yang akan ditampilkan...wow relatif lebih mudah kalau kita bandingkan dengan asp.net versi sebelumnya :)...O ya untuk menampilkan jumlah record per kategori anda cukup gunakan kolom "Total" sebagai hasil dari perhitungan aggregate function "Count()"..

Sekarang mari kita gunakan control lainnya, yaitu GridView seperti yang anda lihat pada gambar diatas. Sebenarnya intinya sama, namun disini saya gunakan alias name yang berbeda sebagai perbandingan. Didalam GridView tersebut saya gunakan satu TemplateField untuk menampilkan detail dari record hasil grouping. TemplateField tersebut saya isi dengan ListView control.

Berikut potongan kode hasil konfigurasi pada LinqDataSource control :

<asp:LinqDataSource ID="lds" runat="server" 
    ContextTypeName="NorthwindDataContext"
    GroupBy="Country" 
    Select="new (key as Country, Count() as Total, it as Customers)"
    TableName="Customers">
</asp:LinqDataSource>

dapat anda lihat kita bisa bebas memberikan nama alias baru pada item yang akan ditampilkan.

Berikut potongan kode pada TemplateField yang terdapat di GridView control :

<asp:TemplateField HeaderText="Details" 
    ItemStyle-VerticalAlign="Top">
    <ItemTemplate>
        <asp:ListView ID="ListView1" runat="server" 
            DataSource='<%# Eval("Customers") %>'>
            <LayoutTemplate>
                <table runat="server" 
                    id="itemPlaceholderContainer" 
                    cellpadding="2" cellspacing="5">
                    <tr>
                        <th align="left">
                                
                        </th>
                        <th align="left">
                            ID
                        </th>
                        <th align="left">
                            Name
                        </th>
                        <th align="left">
                            Phone
                        </th>
                    </tr>
                    <tr id="itemPlaceholder">
                    </tr>
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr>
                    <td align="right" style="width:50px">
                        <asp:Image ID="img" runat="server" 
                            ImageUrl="~/images/person2.ico" />
                    </td>
                    <td align="left" 
                        style="border-bottom: solid thin Silver;
                        width:100px">
                        <%#Eval("CustomerID")%>
                    </td>
                    <td align="left" 
                        style="border-bottom: solid thin Silver;
                        width:200px">
                        <%#Eval("CompanyName")%>
                    </td>
                    <td align="left" 
                        style="border-bottom: solid thin Silver;
                        width:150px">
                        <%#Eval("Phone")%>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:ListView>
    </ItemTemplate>
    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" />
</asp:TemplateField>

That's it...no imperative code...all code is built by declarative markup code :) 

Share this post: | | | |