Gridview Filtrage fonction intégrée?

Question

Est-ce que .NET a un type de fonction intégrée qui permet le filtrage sur Gridviews? J'ai toujours programmé mes filtres en utilisant une source de données générée par une procédure stockée dynamique qui prend des paramètres. Mais pour garder la ligne de filtre toujours présente je dois placer le code pour créer les contrôles qui sont utilisés pour filtrer dans trois endroits différents quand la pagination est autorisée (Page_load, Gridview_Databound, Page_SaveStateComplete) Il semble juste qu'il doit y avoir une meilleure façon . Si c'est le cas, comment?

Answer 1

Seulement si vous faites le travail. Consultez

http://blog.evonet.com.au/post/Creating-a-Stylish-looking-Gridview-with-Filtering.aspx

---

Comme indiqué dans les commentaires, ce site est plus disponible. Ce qui suit est pris directement à partir de l'entrée de blog de Bartek Marnane vous pouvez trouver sur web.archive.com:

Étape 1: Créer le Gridview et Datasource

Créer simple Gridview et datasouce. Dans cet exemple, j'utilise une source de données SQL, mais je recommande d'utiliser un ObjectDataSource pour les environnements de production. Définissez ConnectionString sur la valeur de votre fichier web.config et sur ItemStyle-Width pour chacun de vos champs en fonction du type de données et de l'espace dont vous disposez.

<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]" />

Étape 2: Création de la table utilisée pour les en-têtes Gridview

Maintenant, nous créons une table simple à tenir les rubriques et filtre déroulant des boîtes.

<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>

Pour la dernière cellule, définissez la valeur td colspan au nombre de champs dans votre GridView. Déplacez votre Gridview dans cette dernière cellule.

Etape 3: Création de la feuille de style

La feuille de style que j'utiliser présente les éléments suivants:

.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 }

Vous devriez être en mesure de copier tout cela dans votre fichier css sans affecter vos feuilles de style existantes, mais attention si vous avez déjà défini: lien et: visité dans votre site.

Étape 4: Ajouter le filtrage déroulant des boîtes et des sources de données

Dans le tableau créé à l'étape 2, ajoutez un dropdownlist à chacune des cellules dans la deuxième rangée qui contient le champ que vous voulez filtrer . Assurez-vous que la liste déroulante est plus petite que la cellule dans laquelle elle se trouve, sinon les bordures de votre table ne seront pas alignées. Mettre en place une source de données qui obtient chaque valeur possible de ce champ dans votre tableau.Je le fais en exécutant un DISTINCT pour toutes les valeurs de la table je filtrage:

<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>

créer autant de champs que DropDownLists que vous souhaitez filtrer.

Quelques choses à noter:

Définissez la AppendDataBoundItems = propriété True pour votre dropdownlist car il sera rempli lors de l'exécution. Définissez la propriété AutoPostBack = True afin que Gridview soit actualisé lorsque la sélection est modifiée. Assurez-vous que votre ListItem pour 'All' a la valeur '%'. L'expression de votre filtre sera SELECT * FROM [TABLE NAME] Où [FieldName] comme '{0}%' où {0} est la valeur dans votre liste déroulante. Si votre liste déroulante est définie sur tout alors la chaîne de requête sera SELECT * FROM [TABLE NAME] Où [FieldName] comme '%%' qui, dans SQL retourne toutes les valeurs.

Étape 5: Ajouter le filtrage à votre source de données de Gridview

Ajouter un FilterExpress si votre source de données de Gridview tels que

[Field1] comme '{0}%' et [Field2] comme « {1 }% 'et [Field3] comme' {2}% 'et [Field4] comme' {3}% 'et ... etc

Vos champs doivent ensuite être ajoutés à la section FilterParameters dans le même ordre que votre filtre expression. La section FilterParameters fait référence à SelectedValue de vos listes déroulantes.

<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>

Ca y est!