讓 GridView 具有簡單又不失專業的 EmptyDataTemplate

使用 GridView 時，如果它的資料來源沒資料時，顯示個「找不到、0筆資料...」類的訊息，似乎可以讓使用者很清楚的區別。這個功能只需要在 <EmptyDataTemplate>做些訊息的設定即可。但如果是希望即使沒資料，也必須讓 GridView 的 Header 都顯示出來，或是有自訂的樣式時，那要怎麼處理呢？

我在 sidesofmarch 的「Cleaning up the GridView’s EmptyDataTemplate (damn those tables!)」發現了作者的怒吼，認為與其花很多時間在研究 <EmptyDataTemplate>，不如簡單地去判斷是否資料來源有資料，如果沒有，則隱藏目前的 GridView，再進一步去顯示自己所要顯示的資訊。

另外也比較了「ListView EmptyDataTemplate - how to use EmptyDataTemplate」這篇文章，透過 CSS 的定義去達成效果，似乎比較符合自己目前的期待，但如果能夠有更簡單一點的作法，會比較漂亮一些。

更仔細點觀察 GridView ，當我有設定 <EmptyDataTemplate> 且資料來源為 0 時，如果 GridView 原先有放了 4 個欄位，則 <EmptyDataTemplate> 會產生一段 HTML Code:

<tr class="Theader"><td colspan="4"></td></tr>

不管日後在  <EmptyDataTemplate> 放任何東西，都會放在 <td colspan="4"> 裡面，如此就會讓我原先已經套好視覺的 GrideView 顯得與既有的其它 GridView 看起來就會有點不一樣，有點怪，有點壞。

不過，我發現，如果在 <EmptyDataTemplate> 設定一個自訂的 <tr>：

<tr><th>上傳文件</th><th>上傳日期</th><th>說明</th><th>建檔人</th></tr>

，則所產生出來的 HTML，就會有兩個 <tr>，也就是：

<tr><td colspan="4"></td></tr>
<tr><th>上傳文件</th><th>上傳日期</th><th>說明</th><th>建檔人</th></tr>

這樣子的效果，除了第一個 <tr>會讓畫面很突兀外，基本上都已經滿足我的需求了。為了讓第一個 <tr>在畫面上消失，我試著使用 jQuery 把它隱藏起來。

在  <EmptyDataTemplate> 裡，我放入：

<tr class="tr_empty"><th>上傳文件</th><th>上傳日期</th><th>說明</th><th>建檔人</th></tr>

jQuery 則是：

<script>
    $(function () {

        $(".tr_empty").each(function () {

            $(this).parent().find("tr").first().hide();

        });

    });

</script>

這段 jQuery，是在頁面上搜尋所有有定義 class name 為 tr_empty 的物件，往上找到他的父親，<tbody>，再從 <tbody> 裡面往下搜尋第一個 <tr>，並將其隱藏。

這樣就可以將第一個 <tr>隱藏，只剩下我所要呈現的第二個 <tr>

參考：
01：Cleaning up the GridView’s EmptyDataTemplate (damn those tables!)
02：ListView EmptyDataTemplate - how to use EmptyDataTemplate