This example demonstrates how to use a text string from an external text box to filter a grid column on the client.
Follow the steps below:
-
Create the Grid View control, populate it with columns, and bind it to a data source.
<dx:ASPxGridView ID="grid" ClientInstanceName="grid" runat="server" AutoGenerateColumns="False" DataSourceID="ds" KeyFieldName="CategoryID"> <Columns> <dx:GridViewDataTextColumn FieldName="CategoryID" ReadOnly="True" VisibleIndex="0"> <EditFormSettings Visible="False" /> </dx:GridViewDataTextColumn> <dx:GridViewDataTextColumn FieldName="CategoryName" VisibleIndex="1" /> <dx:GridViewDataTextColumn FieldName="Description" VisibleIndex="2" /> </Columns> </dx:ASPxGridView> <asp:AccessDataSource ID="ds" runat="server" DataFile="~/App_Data/nwind.mdb" SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]"> </asp:AccessDataSource>
-
Add a text box and a button. When a user enters a text string in the text box and clicks the button, the grid filters a particular column by the entered string. To enable this behavior, handle the button's client-side Click event. In the handler, call the grid's AutoFilterByColumn method and pass the edit value of the text box as a parameter.
<dx:ASPxTextBox ID="txtFilter" ClientInstanceName="txtClientFilter" runat="server" ... /> <dx:ASPxButton ID="btnFilter" ClientInstanceName="btnFilter" runat="server" Text="Filter by CategoryName" AutoPostBack="false" ...> <ClientSideEvents Click="function(s, e) { grid.AutoFilterByColumn('CategoryName', txtClientFilter.GetValue()); }" /> </dx:ASPxButton>
- Default.aspx (VB: Default.aspx)
(you will be redirected to DevExpress.com to submit your response)