Только если вы делаете работу. Проверить
http://blog.evonet.com.au/post/Creating-a-Stylish-looking-Gridview-with-Filtering.aspx
Как отмечается в комментариях, этот сайт больше не доступен. Следующая информация взята непосредственно из записи в блоге Bartek Marnane, которую вы можете найти на web.archive.com :
Шаг 1. Создание Gridview и источника данных
Создание простого Gridview и Datasouce. В этом примере я использую источник данных SQL, но я рекомендую использовать ObjectDataSource для производственных сред. Задайте для ConnectionString значение в вашем файле web.config и ItemStyle-Width для каждого из ваших полей в зависимости от типа данных и количества свободного места.
<asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="False" AllowPaging="True"
AllowSorting="true" DataSourceID="dsGridview" Width="650px" PageSize="20"
CssClass="Gridview">
<Columns>
<asp:BoundField DataField="id" HeaderText="id" SortExpression="id"
ItemStyle-Width="50px" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="FirstName" HeaderText="Sort" SortExpression="FirstName"
ItemStyle-Width="150px" />
<asp:BoundField DataField="LastName" HeaderText="Sort" SortExpression="LastName"
ItemStyle-Width="150px" />
<asp:BoundField DataField="Department" HeaderText="Sort" SortExpression="Department"
ItemStyle-Width="150px" />
<asp:BoundField DataField="Location" HeaderText="Sort" SortExpression="Location"
ItemStyle-Width="150px" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:EvonetConnectionString %>"
SelectCommand="SELECT * FROM [T_Employees]" />
Шаг 2: Создать таблицу, используемую для заголовков Gridview
Теперь мы создадим простую таблицу для хранения заголовков и выпадающих списков фильтров.
<table style="width: 650px" border="0" cellpadding="0" cellspacing="1"
class="GridviewTable">
<tr>
<td style="width: 50px;">
ID
</td>
<td style="width: 150px;">
First Name
</td>
<td style="width: 150px;">
Last Name
</td>
<td style="width: 150px;">
Department
</td>
<td style="width: 150px;">
Location
</td>
</tr>
<tr>
<td style="width: 50px;">
</td>
<td style="width: 150px;">
</td>
<td style="width: 150px;">
</td>
<td style="width: 150px;">
<asp:DropDownList ID="ddldepartment" DataSourceID="dsPopulateDepartment"
AutoPostBack="true" DataValueField="department" runat="server" Width="130px"
Font-Size="11px" AppendDataBoundItems="true">
<asp:ListItem Text="All" Value="%"></asp:ListItem>
</asp:DropDownList>
</td>
<td style="width: 150px;">
<asp:DropDownList ID="ddlLocation" DataSourceID="dsPopulateLocation"
AutoPostBack="true" DataValueField="location" runat="server" Width="130px"
Font-Size="11px" AppendDataBoundItems="true">
<asp:ListItem Text="All" Value="%"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="5">
<asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="False"
AllowPaging="True" AllowSorting="true" DataSourceID="dsGridview"
Width="650px" PageSize="10" CssClass="Gridview">
<Columns>
<asp:BoundField DataField="id" HeaderText="Sort" SortExpression="id"
ItemStyle-Width="50px" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="FirstName" HeaderText="Sort"
SortExpression="FirstName" ItemStyle-Width="150px" />
<asp:BoundField DataField="LastName" HeaderText="Sort"
SortExpression="LastName" ItemStyle-Width="150px" />
<asp:BoundField DataField="Department" HeaderText="Sort"
SortExpression="Department" ItemStyle-Width="150px" />
<asp:BoundField DataField="Location" HeaderText="Sort"
SortExpression="Location" ItemStyle-Width="150px" />
</Columns>
</asp:GridView>
</td>
</tr>
</table>
Для последней ячейки установите значение td colspan равным количеству полей в вашем Gridview. Переместите свой Gridview в эту последнюю камеру.
Шаг 3. Создание таблицы стилей
Используемая мной таблица стилей содержит следующие элементы:
.GridviewDiv {font-size: 62.5%; font-family: 'Lucida Grande',
'Lucida Sans Unicode', Verdana, Arial, Helevetica, sans-serif; color: #303933;}
Table.Gridview{border:solid 1px #df5015;}
.GridviewTable{border:none}
.GridviewTable td{margin-top:0;padding: 0; vertical-align:middle }
.GridviewTable tr{color: White; background-color: #df5015; height: 30px; text-align:center}
.Gridview th{color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;
padding:0.5em 0.5em 0.5em 0.5em;text-align:center}
.Gridview td{border-bottom-color:#f0f2da;border-right-color:#f0f2da;
padding:0.5em 0.5em 0.5em 0.5em;}
.Gridview tr{color: Black; background-color: White; text-align:left}
:link,:visited { color: #DF4F13; text-decoration:none }
Вы можете просто скопировать это в свой CSS-файл, не затрагивая при этом ваши существующие таблицы стилей, хотя будьте осторожны, если вы уже установили: link и: посещения на вашем сайте.
Шаг 4. Добавьте раскрывающиеся списки фильтрации и источники данных
В таблице, созданной на шаге 2, добавьте раскрывающийся список к каждой ячейке во второй строке, содержащей поле, которое вы хотите отфильтровать. Убедитесь, что выпадающий список eac меньше ячейки, в которую он входит, иначе границы таблицы не будут выровнены. Настройте источник данных, который получает каждое возможное значение этого поля в вашей таблице. Я делаю это, запустив DISTINCT для всех значений в таблице, которую я фильтрую:
<asp:DropDownList ID="ddldepartment" DataSourceID="dsPopulateDepartment"
AutoPostBack="true" DataValueField="department" runat="server" Width="130px" Font-Size="11px"
AppendDataBoundItems="true">
<asp:ListItem Text="All" Value="%"></asp:ListItem>
</asp:DropDownList>
<asp:SqlDataSource ID="dsPopulateDepartment" runat="server"
ConnectionString="<%$ ConnectionStrings:EvonetConnectionString %>" SelectCommand="SELECT
DISTINCT Department from [T_Employees]"></asp:SqlDataSource>
Создайте столько выпадающих списков, сколько полей вы хотите отфильтровать.
Несколько замечаний:
Установите свойство AppendDataBoundItems = True для раскрывающегося списка, так как он будет заполнен во время выполнения.
Установите свойство AutoPostBack = True, чтобы Gridview обновлялся при изменении выбора.
Убедитесь, что ваш ListItem для «Все» имеет «%» в качестве значения. Выражение фильтра будет SELECT * FROM [TABLE NAME], где [FieldName], как ‘{0}%’, где {0} - это значение в раскрывающемся списке. Если для вашего выпадающего списка установлено значение all, строка запроса будет SELECT * FROM [TABLE NAME], где [FieldName], например, «%%», который в SQL возвращает все значения.
Шаг 5. Добавление фильтрации в источник данных вашего Gridview
Добавьте FilterExpress, чтобы ваш источник данных Gridview, такой как
[Field1] как '{0}%' и [Field2] как '{1}%' и [Field3] как '{2}%' и [Field4] как '{3}%' и… и т. Д.
Затем ваши поля должны быть добавлены в раздел FilterParameters в том же порядке, что и выражение вашего фильтра. Раздел FilterParameters ссылается на SelectedValue ваших выпадающих списков.
<asp:SqlDataSource ID="dsGridview" runat="server"
ConnectionString="<%$ ConnectionStrings:EvonetConnectionString %>"
SelectCommand="SELECT * FROM [T_Employees]" FilterExpression="Department like '{0}%'
and Location like '{1}%'">
<FilterParameters>
<asp:ControlParameter Name="Department" ControlID="ddldepartment"
PropertyName="SelectedValue" />
<asp:ControlParameter Name="Location" ControlID="ddllocation"
PropertyName="SelectedValue" />
</FilterParameters>
</asp:SqlDataSource>
Вот и все!